CSS
CSS
CSS，Cascading Style Sheet，层叠样式表，定义如何显示HTML元素，给HTML设置样式，让它更加美观。
当浏览器读到一个样式表，它就会按照这个样式表对文档进行格式化(渲染)。
CSS语法
CSS实例
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
CSS注释
/*这是注释*/
CSS引入方式
行内样式
行内样式是在标签的style属性中设定的CSS样式。不推荐大十几个模使用。
<p style="color:red">hello world.</p>
内部样式
内部样式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>
外部样式
外部样式是将CSS写在一个单独的文件中，然后在页面中进行引入即可。推荐使用此方式。
<head> <meta charset="UTF-8"> <title>Title</title> <link href="文件名称" rel="stylesheet" type="text" type="text/css"> # css文件在html中引入方式 </head>
文件内容：
p {color:blue;} /*注释*/ 注释一般都使用来描述后面这段css代码是给页面上哪一个板块用的 /*标题样式*/ xxxxx /*个人中心设置*/
CSS选择器
基本选择器
元素选择器
语法： 标签名 {属性1；属性2;...}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { color: red; } </style> </head> <body> <p>p1标签</p> <p>p2标签</p> <p>p3标签</p> </body> </html>
效果：
ID选择器
id不能重复。
语法： #id属性值 {属性1；属性2；...}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1 {color: red;} #p2 {color:green;} </style> </head> <body> <p id="p1">p1标签</p> <p id="p2">p2标签</p> <p id="p3">p3标签</p> </body> </html>
效果：
类选择器
- 样式类名不要用数字开头(有的浏览器不认)
- 标签中的class属性如果有多个，要用空格分隔
语法： .class属性值 {属性1;属性2;...} 标签名.class属性值 {属性1;属性2;...} # 找到所有标签名里面含有class属性值的标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 {color:green;} </style> </head> <body> <p class="c1">p1标签</p> <p class="c1">p2标签</p> <p class="c2">p3标签</p> <span class="c1">我是span</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 {color:green;} </style> </head> <body> <p class="c1">p1标签</p> <p class="c1 c2">p2标签</p> <p class="c2">p3标签</p> <span class="c1">我是span</span> </body> </html>
效果：
通用选择器
* {属性1;属性2;...} *表示所有的标签
组合选择器
后代选择器
语法： 标签名1/#id属性值/.class属性值 空格 标签名2 {属性1;属性2;...} /*将标签名1下的所有标签名2设置此样式*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div p {color:green;} </style> </head> <body> <div class="div1"> <div> <p class="c1">p1标签</p> <p class="c1 c2">p2标签</p> </div> <p class="c2">p3标签</p> <span class="c1">我是span</span> </div> </body> </html>
效果：
儿子选择器（只找儿子）
语法： 标签名1/#id属性值/.class属性值 > 标签名2 {属性1;属性2;...} /*选择所有父级是标签名1元素的标签名2元素*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1 > p {color:green;} </style> </head> <body> <div class="div1"> <div> <p class="c1">p1标签</p> <p class="c1 c2">p2标签</p> </div> <p class="c2">p3标签</p> <span class="c1">我是span</span> </div> </body> </html>
效果：
毗邻选择器
语法： 标签名1/#id属性值/.class属性值 + 标签名2 {属性1;属性2;...} /*选择所有紧接着标签名1元素之后的标签名2元素*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div + p {color:green;} </style> </head> <body> <div class="div1"> <div> <p class="c1">p1标签</p> <p class="c1 c2">p2标签</p> </div> <p class="c2">p3标签</p> <span class="c1">我是span</span> </div> <p>p4标签</p> </body> </html>
效果：
弟弟选择器
语法： 标签名1/#id属性值/.class属性值 ~ 标签名2 {属性1;属性2;...} /*选择标签名1元素后面的所有兄弟标签名2元素*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div ~ p {color:green;} </style> </head> <body> <div class="div1"> <div> <p class="c1">p1标签</p> <p class="c1 c2">p2标签</p> </div> <p class="c2">p3标签</p> <span class="c1">我是span</span> </div> <p>p4标签</p> </body> </html>
效果：
属性选择器
通过属性或者属性的值来查找，这个属性是我们自己定义的，不是html自带的如id,class属性
语法： /*用于选取带有指定属性的元素。*/ 标签名[属性名] {属性1;属性2;...} /*用于选取带有指定属性和值的元素。*/ 标签名[属性名=属性值] {属性1;属性2;...}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div[title="2"] {color:green;} </style> </head> <body> <div title="1"> <p>p1标签</p> <div title="2"> <p class="c1">p2标签</p> <p class="c1 c2">p3标签</p> </div> <p class="c2">p4标签</p> <span class="c1">我是span</span> </div> <p>p5标签</p> </body> </html>
效果：
每个标签里都可以有一个title属性，这个属性的作用是当鼠标移动到这个标签上，就会显示title属性的值。
采用正则写法，匹配属性值：
/*找到所有title属性以hello开头的元素*/ [title^="hello"] { color: red; } /*找到所有title属性以hello结尾的元素*/ [title$="hello"] { color: yellow; } /*找到所有title属性中包含（字符串包含）hello的元素*/ [title*="hello"] { color: red; } /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/ [title~="hello"] { color: green; }
分组与嵌套
分组(多个选择器逗号分隔)
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，可通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
语法： 标签名/#id属性值/.class属性值，
标签名/#id属性值/.class属性值,... {属性1;属性2;...}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1,.c1 {color:green;} </style> </head> <body> <div> <p>p1标签</p> <div id="d1"> <p>p2标签</p> <p>p3标签</p> </div> <p>p4标签</p> <span class="c1">我是span</span> </div> <p>p5标签</p> </body> </html>
效果：
嵌套
多种选择器可以混合起来使用，例如：.c1类内部所有p标签设置字体颜色为红色
.c1 p { color: red; }
伪类选择器(css3版本新加的特性)
可以根据标签的不同状态再进行进一步的区分，比如一个a标签，有点击前，点击时，点击后三个不同的状态。
/*未访问的链接*/ a:link { color: #FF0000 } /*已访问的链接*/ a:visited { color: #00FF00 } /*鼠标移动到链接上*/ 用的比较多 a:hover { color: #FF00FF } /*选定的链接*/ 鼠标点下去没有放开的那个瞬间，可以使它变颜色 a:active { color: 0000FF } /*input输入框获取焦点时样式*/ # input默认有个样式，鼠标点进去时input框会变浅蓝色 input: focus { background-color: #eee; #框里的背景色 }
伪元素选择器(通过CSS来造标签，不推荐使用)
first-letter
常用的给首字母设置特殊样式：
/*语法*/ 标签名：first-letter {属性1;属性2;...}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:first-letter { font-size: 48px; color: red; } </style> </head> <body> <p>忠厚老实</p> </body> </html>
效果：
before
在某元素前插入内容
/*在每个<p>元素之前插入内容*/ 标签名:before {content="";属性2;...}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:before { content: "*"; color: red; } </style> </head> <body> <p>忠厚老实</p> </body> </html>
效果：
after
在某元素之后插入内容
/*在每个<p>元素之前插入内容*/ 标签名:after {content="";属性2;...}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:after { content: "[?]"; color: red; } </style> </head> <body> <p>忠厚老实</p> </body> </html>
效果：
上面这些前后添加的文本内容在页面上是无法选中的，正常的标签或者文字是可以选中的。before和after多用于清除浮动
选择器的优先级
css继承
继承是css的一个主要特征，它是依赖于祖先-后代的关系。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。
此时页面上所有标签都会继承body的字体颜色。然而，CSS继承的权重是非常低的，权重会值为0。
CSS继承也是有限制的，有些属性如border,margin,padding,background等不能被继承。
对于同一个标签，如果在style中上下设置了多个样式，则页面渲染的是最后一个样式。因为渲染是按顺序的，当前渲染会覆盖之前渲染的样式。
选择器的优先级
同一个元素，可能有多个方式对其设置样式，浏览器是按照不同选择器的权重来决定采用何种样式泻染。具体的选择器权重计算方式如下图：
- 内联样式是指把css样式写在标签里style属性中
- 对于权重计算永不进位：class权重是10，但即便是11个class相加起来大于id的100权重，也还是id生效。永不进位，class组合起来也无法超过id的权重
- 可通过添加!important方式强制让样式生效，不推荐使用
CSS属性
宽和高
- width属性可以为元素设置宽度
- height属性可以为元素设置高度
- 块级标签才能设置宽度，内联标签的宽度由内容来决定
字体属性
文字字体
font-family可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。流浏览器会使用它可识别的第一个值。
简单实例：
body{ font-family: "Microsoft YaHei","微软雅黑","Arial"
}
字体大小
font-size用来设置字体大小，如果设置成inherit表示继承父元素的字体大小值
p { font-size: 14px; }
字重(粗细)
font-weight用来设置字体的字重(粗细)
- normal：默认值，标准粗细
- bold：粗体
- bolder：更粗
- lighter：更细
- 100-900：设具体粗细，400等同于normal,而700等同于bold
- inherit：继承父元素字体的粗细值
文本颜色
文字属性
文字对齐
text-align属性规定元素中的文本的水平对齐方式
- left：左边对齐(默认值)
- right：右对齐
- center：居中对齐
- justify：两端对齐
文字装饰
text-decoration属性用来给文字添加特殊效果
- none：定义标准的文本(默认)
- underline：定义文本下的一条线
- overline：定义文本上的一条线
- line-through：定义穿过文本下的一条线
- inherit：继承父元素的text-decoration属性的值
常用去掉a标签默认的自划线：
a { text-decoration: none; }
首行缩进
一个字在页面上的默认大小为16px
标签名 { text-indent: 32px; }
背景属性
背景颜色
/*背景颜色*/ background-color: red:
背景图片
/*背景图片*/ background-image: url("图片路径")
背景重复
/*背景重复*/ background-repeat: no-repeat;
- repeat(默认)：背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签
- repeat-x：背景图片只在水平方赂上平铺
- repeat-y：背景图片只在垂直方赂上平铺
- no-repeat：北景图片不平铺
背景位置
/*背景位置*/ background-position: right top; background-position: 200px 200px;
- 浏览器坐标系：左上角为原点，向左为x轴，向下为y轴
- 使用背景图片的一个常见案例：很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
- 通过QQ截图时可以显示像素
固定背景图片
鼠标滚动但背景不动。
/*l固定背景图片*/ background-attachment: fixed;
背景属性支持简写
background: color image repeat position;
边框
- border-width 宽度
- border-style 样式
- border-color 颜色
支持简写：
p { border: width style color; }
样式
- none：无边框
- dotted：点状虚线边框
- dashed：矩形虚线边框
- solid：实线边框
除了可以统一设置边框外还可以单独为某一个边框设置样式
#p { border-top-style:dotted; border-top-color: red; border-right-style:solid; border-bottom-style:dotted; border-left-style:none; }
border-radius
实现圆角边框的效果。
/*可以写具体的像素值，也可以写百分比*/ border-radius: 50%; border-radius: 2px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1 { border: 1px solid red; width: 50px; height: 50px; border-radius: 10px; background: red; } </style> </head> <body> <p class="div1"></p> </body> </html>
效果：
display属性
用于控制HTML元素的显示效果
- display: "none"：HTML文档元素存在，但在浏览器中不显示。一般用于配合JavaScript代码使用
- display: "block"：默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充。可将内联标签改为块级标签的效果
- display: "inline"：按行内元素显示，此时再设置元素的width、height、margin-bottom和float都不会有什么影响
- display: "inline-block"：使元素同时具有行内元素和块级元素的特点
display: "none"与visibility:hidden的区别：
- visibility: hidden：可以隐藏某个元素，但隐藏的元素仍需占用未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局
- display: "none"：可以隐藏某个元素，且隐藏的元素不会占用空任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
CSS盒子模型
在CSS里面，每个标签可以称为一个盒子模型
- margin：外边距，用于控制元素与元素之间的距离。margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
- padding：内边距，用于控制内容与边框之间的距离
- border(边框)：围绕在内边距和内容外的边框
- content(内容)：盒子的内容，显示文本和图像
margin
标签名 { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-left:20px; }
浏览器在加载HTML时，都会自动上下左右给body加上margin,在写css样式时，都会先写一个如下样式，意思是body的上下左右margin都设置为0
body { margin: 0; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
margin支持简写，顺序为上右下左
标签名 {
margin: top right bottom left;
}
常见居中：
标签名 { margin: 0 auto; #上下0像素，左右自适应，居中的效果 }
如果写的是三个：margin：10px 20px 20px 10px;意思是上为10，左右为20，下为10
padding内边距
标签名 { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; }
padding支持简写，顺序为上右下左
标签名 { padding: top right bottom left; }
padding常用简写方式：
- 只提供一个：用于四边
- 提供两个：第一个用上-下，第二个用于左-右
- 提供三个：第一个用于上，第二个用于左-右，第三个用于下
- 提供四个：将上-右-下-左的顺序作用于四边
float
浮动
- 浮动元素会生成一个块级框，而不论它本身是何种元素
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
- 由于浮动框不在文档的普通流中，所以文档的普通流中的块级框表现得像浮动框不存在一样
属性
- left：向左浮动
- right：向右浮动
- none：默认值，不浮动
1) 未加浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { border: 1px solid black; } .c2 { width: 200px; height: 100px; background-color: red; border: 1px solid black; } .c3 { width: 100%; height: 200px; background-color: green; border: 1px solid black; } </style> </head> <body> <div class="c1"> <div class="c2">1</div> <div class="c2">2</div> </div> <div class="c3">3</div> </body> </html>
效果：
2) 添加浮动：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { border: 1px solid black; } .c2 { width: 200px; height: 100px; background-color: red; border: 1px solid black; } .c3 { width: 100%; height: 200px; background-color: green; border: 1px solid black; } .left { float: left; } .right { float: right; } </style> </head> <body> <div class="c1"> <div class="c2 left">1</div> <div class="c2 right">2</div> </div> <div class="c3">3</div> </body> </html>
效果：
参考示例：http://www.w3school.com.cn/css/css_positioning_floating.asp
clear
特点
- clear属性只会对自身起作用，而不会影响其他元素
属性
- left：在左侧不允许浮动元素
- right：在右侧不允许浮动元素
- both：在左右两侧均不允许浮动元素
- none：默认值。允许浮动元素出现在两侧
- inherit：规定应该从父元素继承clear属性的值
清除浮动
- 固定高度，即在父标签里面加一个其他的标签
- 伪元素清除法(使用较多)
- overflow：hidden
1) 固定高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height: 102px; border: 1px solid black; } .c2 { width: 200px; height: 100px; background-color: red; border: 1px solid black; } .c3 { width: 100%; height: 200px; background-color: green; border: 1px solid black; } .left { float: left; } .right { float: right; } </style> </head> <body> <div class="c1"> <div class="c2 left">1</div> <div class="c2 right">2</div> </div> <div class="c3">3</div> </body> </html>
2) 伪元素清除法
一般业内约定成俗，都把这个清除浮动的class属性命名为clearfix
语法： .clearfix:after { content: ""; display: block; clear:both; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { border: 1px solid black; } .c2 { width: 200px; height: 100px; background-color: red; border: 1px solid black; } .c3 { width: 100%; height: 200px; background-color: green; border: 1px solid black; } .left { float: left; } .right { float: right; } .clearfix:after { content: ""; display: block; clear: both; } </style> </head> <body> <div class="c1 clearfix"> <div class="c2 left">1</div> <div class="c2 right">2</div> </div> <div class="c3">3</div> </body> </html>
overflow
溢出属性
- overflow：水平和垂直均可设置
- overflow-x：设置水平方向，只出现x轴的滚动条
- overflow-y：设置垂直方向，只出现y轴的滚动条
属性
- visible：默认值。内容不会被修剪，会呈现在元素框之外
- hidden：内容会被修剪，并且其余内容不可见
- scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其作内容
- auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
- inherit：规定应该从父元素继承overflow属性的值
圆形图像
定位(position)
- 不管是float、relative还是absolute，都是按照元素自己的左上角进行计算的
static
- 无定位。position默认无定位。不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的
relative
- 相对定位。指相对于该元素在文档流中的原始位置，即以自己原始位置左上角为参照物
- 即使设定了元素的相对定位以及编移值，元素还占着原来的位置，即占据文档流空间。对象遵循正常文档流，所以不会出现像浮动那种父级标签塌陷的副作用
