文章目录
前言
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。该博客将详细介绍常见的CSS样式以及相关内容。
一、CSS应用方式
1.在标签上
html
<img src="..." stype="height: 100px">2.在head标签的style上
- 相当于把样式取了一个名字
- 后续使用直接在标签中添加：class='名字'
html
...
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.c1 {
color: red;
}
</style>
</head>
<body>
<h1 class="c1">用户注册</h1>
...3.写在文件中
在common.css文件中（一般放在static文件夹中）
css
.c1 {
color: red;
}在.html文件中调用
html
...
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/static/common.css" />
</head>
<body>
<h1 class="c1">用户注册</h1>
...二、选择器
1.ID选择器
- 用id
html
#c1 {
color: red;
}
<div id='c1'></div>2.类选择器
- 用class
html
.c1 {
color: red;
}
<div class='c1'></div>3.标签选择器
- 直接对标签进行处理
- 后续所有该标签全部使用该样式
html
div{
color: red;
}
<div>xxx</div>4.属性选择器
- 直接对标签的某种属性处理
- 后续所有该标签的该属性全部使用该样式
样例1
html
<head>
<title>Document</title>
<link rel="stylesheet" href="/static/commons.css">
<style>
input[type="text"]{
border: 1px solid red;
}
</style>
</head>样例2
html
<style>
.v1[xx="456"]{
color: gold; <!-- 橙色 -->
}
</style>
...
<body>
...
<div class="v1" xx="123">a</div>
<div class="v1" xx="456">b</div>
<div class="v1" xx="789">c</div>
...
</body>5.后代选择器
- 让子孙都可以使用生效
html
<style>
.zz h2{
color:chartreuse;
}
</style>
</head>
<body>
<div class="zz" >
<div>
<h2>我是div里面的h2</h2>
</div>
<h2>我是div外面的h2</h2>
...- 只让子使用生效（只生效一层）
html
<style>
.zz > h2{
color:chartreuse;
}
</style>6.样式覆盖
- 当一个标签引用多个样式，会出现属性重复的问题
- 第一种方式：在head中将优先级最高的写在后面(c3生效)
html
<style>
.c2 {
color: darkgoldenrod;
}
.c3 {
color:hotpink;
}
</style>
<body>
<div class="c2 c3">我是天才</div>
</body>- 第二种方式：在head中将优先级高的样式后面添加
! important(c2生效)
html
<style>
.c2 {
color: darkgoldenrod !important;
}
.c3 {
color:hotpink;
}
</style>三、CSS样式
1.高度和宽度
- 宽度支持百分比，但是高度不支持，因为高度具有不确定性
- 行内标签默认无效，块级标签默认有效
css
.c4 {
height: 300px;
width: 500px;
}2.块级标签和行内标签转换
display: inline-block;让行内标签对height和width生效- 而且只占有需要大小，还是有行内标签的属性
html
<style>
.c4 {
display: inline-block;
height: 300px;
width: 500px;
border: 1px solid red;
}
</style>
...
<body>
<span class="c4">联通</span>
</body>- 块级和行内标签相互转换
html
<div style="display: inline;">移动</div>
<span style="display: block;">联通</span>3.字体颜色/大小/粗细/样式/对齐/边框
html
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.c1 {
color: #00FF7F; /* 字体颜色 */
font-size: 20px; /* 字体大小 */
font-weight: 600; /* 字体粗细 */
font-family: Microsoft Yahei; /* 字体样式 */
text-align: center; /* 水平方向居中 */
line-height: 50px; /* 垂直方向居中 */
border: 1px solid red; /* 边框 */
}
</style>
</head>4.浮动
- 如果在块级标签中，加入了float属性，那么这个块级标签奖不会再占用一整行，而是自己有多大就占用多大
- 如果你让标签浮动起来之后，就会脱离文档流
- 解决办法: 在同级子标签的最下面添加
style="clear: both;"
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.item {
float: left;
width: 280px;
height: 170px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="background-color: blue;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div style="clear: both;"></div>
</div>
</body>
</html>5.背景色
- 颜色都有三种表达方式：HTML颜色代码、rgb(x,x,x)、颜色英文
css
background-color: 颜色;6.内边距
- padding-top | padding-left | padding-right | padding-botton
- 其实上面的四个上下左右的padding可以简写为padding: 20px 20px 20px 20px,顺序为上右下左(顺时针方向)
- 给自己增加一定距离，会使得该块所占空间增大
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
border: 1px solid red;
height: 200px;
width: 200px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="outer">
<div>hello</div>
<div>world</div>
</div>
</body>
</html>7.边界
- border功能：设置边界的像素/样式/颜色
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.left {
float: left;
}
.c1 {
height: 200px;
width: 300px;
border: 3px dotted red;
margin: 50px;
}
.c2 {
height: 200px;
width: 300px;
border: 3px solid red;
border-left: 3px solid green;
margin: 50px;
}
.c3 {
height: 200px;
width: 300px;
margin: 50px;
background-color: bisque;
border-left: 2px solid transparent; /* 透明色 */
}
.c3:hover {
border-left: 2px solid rgb(35, 211, 19);
}
</style>
</head>
<body>
<div class="c1 left">我是虚线~</div>
<div class="c2 left">我是实线~左边框是绿色,上下右边框是红色</div>
<div class="c3 left">我是透明色,鼠标碰到我边框会变色哦~</div>
<div style="clear: both;"></div>
</body>
</html>8.外边距
- 给自己和别人之间增加距离，视觉上本块不会增大
- margin为外边距，及边框外到外部容器的距离，有四种参数设置方式：
margin:5px;/四边外边距都为5px/
margin:5px 10px;/上下外边距5px，左右外边距10px/
margin:5px 10px 15px;/上外边距5px，左右外边距10px，下外边距15px/
margin:5px 10px 15px 20px;/顺时针方向：上5px，右10px，下15px，左20px/
margin:0 auto;/上下外边距为0，左右自动，实际效果为左右居中/
html
<body>
<div style="height: 200px; background-color: aquamarine;"></div>
<div style="height: 200px; background-color:blueviolet; margin-top: 20px;"></div>
</body>- margin/border/padding/content的关系
9.鼠标悬停效果
- hover功能：鼠标移动到此会改变某些样式，实现视觉效果
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.c1 {
color:brown;
}
.c1:hover {
color: green;
font-size: 20px;
}
.c2 {
width: 300px;
height: 300px;
border: 3px solid red;
}
.c2:hover {
border: 3px solid green;
}
.download {
display: none;
}
.app:hover .download {
display: block;
}
</style>
</head>
<body>
<div class="c1">字体碰到鼠标变成绿色</div>
<div class="c2">边框碰到鼠标变成绿色</div>
<div class="app">
<div>鼠标放我这里触发显示二维码</div>
<div class="download">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/78c30d4f259ed43ab20e810a522a6249.png" alt="">
</div>
</div>
</body>
</html>10.内容增加
- after功能：实现文本内容的增加
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.c1:after {
content: "大帅哥"
}
</style>
</head>
<body>
<div class="c1">张三</div>
</body>
</html>- after一般像下面这样用,不用每次都写
stype="clear: both;"
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix:after {
content: "";
display: block;
clear: both;
}
.item {
float: left;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>11.位置
- position
- fixed功能：固定在窗口的某个位置
样例1：返回顶部框
css
.back {
position: fixed;
width: 60px;
height: 60px;
border: 1px solid red;
right: 50px;
bottom: 50px;
}样例2：中间对话框
- opacity可以设置透明度
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
.dialog {
position: fixed;
height: 300px;
width: 500px;
background-color: white;
/*left: 0; 和 right: 0; 分别将元素的左边界和右边界的定位都设为 0，这会使得元素水平居中对齐*/
/*而 margin: 0 auto; 则会使元素在水平方向上的外边距自动分配，从而实现水平居中*/
left: 0;
right: 0;
margin: 0 auto;
/*竖直居中*/
top: 200px;
z-index: 1000; /* 防止对话框被mask遮住 */
}
.mask {
background-color: black;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.7;
z-index: 999; /* 防止对话框被mask遮住 */
}
</style>
</head>
<body>
<div style="height: 1000px;"></div>
<!-- 如果css中不加 z-index 设置优先级的话 -->
<!-- 那么下面的 dialog 如果在 mask 的上面,对话框就显示不出来了 -->
<!-- 设置优先级可以解决此问题 -->
<div class="dialog"></div>
<div class="mask"></div>
</body>
</html>- relative和absolute功能：实现相对位置的摆放
- 父类标签写relative，子类写absolute，实现相对性
html
...
<style>
.app{
position: relative;
}
.app .download {
position: absolute;
display: none;
height: 100px;
width: 100px;
}
.app:hover .download {
display: block;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a href="https://www.mi.com">小米商城</a>
<a href="https://www.mi.com">MIUI</a>
<a href="https://www.mi.com">云平台</a>
<a href="https://www.mi.com">有品</a>
<a href="https://www.mi.com">小爱开放平台</a>
<a href="https://www.mi.com" class="app">app下载
<div class="download">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/78c30d4f259ed43ab20e810a522a6249.png" alt="">
</div>
</a>
</div>
<div class="account">
<a href="https://www.mi.com">登录</a>
<a href="https://www.mi.com">注册</a>
<a href="https://www.mi.com">消息通知</a>
</div>'
<div style="clear: both;"></div>
</div>
</div>
...