CSS
引入方式
-
行内式
<p style="color: red">这是行内样式</p> -
内部样式
在head标签里写选择器
<!DOCTYPE html> <html> <head> <title></title> <style> p{ color: red; } </style> </head> <body> <p>这是内部样式</p> </body> </html> -
外部引入
使用标签引入外部css文件
<link rel="stylesheet" href="css/head.css" />
选择器
基本选择器
-
元素选择器
p{ color: red; } -
id选择器
#head{ color: red; } -
类选择器
.cl{ color: red; }
组合选择器
-
后代选择器（以空格分隔）
选取某元素的后代元素
li标签中的a标签 li a{ color: red; } -
子元素选择器（以大于号分隔）
相比于后代选择器，子元素选择器只能选择作为某元素子元素的元素
div>p{ background-color:yellow; } -
兄弟选择器（以~分隔）
选取所有指定元素之后的相邻兄弟元素
div~p{ background-color:yellow; } -
毗邻兄弟选择器（以加号分隔）
选择紧接在另一元素后的元素，且二者有相同父元素
div+p{ background-color:yellow; }
属性选择器
选择具有特定属性的HTML元素样式。
p[name]{
color: red;
}
分组和嵌套选择器
-
分组选择器
在样式表中有很多具有相同样式的元素，为了尽量减少代码，你可以使用分组选择器（以逗号分隔）
h1, h2, p{ color:red; } -
嵌套选择器
多种选择器混合起来使用
div>li, .title{ color: red; }
伪类选择器
-
anchor伪类选择器
a:link{ color: black; /*未访问的时候*/ } a:visited{ color: black; /*已访问的时候*/ } a:hover{ color: red; /*鼠标悬停的时候*/ } a:active{ color: green; /*已选中的时候*/ } -
first-child与last-child伪类选择器
div p:first-child{ color: red; /*父元素下的第一个子元素*/ } div p:last-child{ color: blue; /*父元素下的最后一个子元素*/ }
伪元素选择器
用来添加一些选择器的特殊效果
-
first-line：向文本的首行设置样式
p:first-line{ color: red; } -
first-letter：向文本的首字设置样式
p:first-letter{ color: red; font-size: 36px; } -
before：在元素前插入内容
p:before{ content: "这是插入的内容！" } -
after：在元素后面插入内容
p:after{ content: "这是插入的内容！" }
选择器的优先级
每个选择器在权重级别中都有自己泾渭分明的位置。根据选择器种类的不同可以分为四类，也决定了四种不同等级的权重值。
-
行内样式（权重值：1000）
<p style="color: red;">这是行内式</p> -
id选择器（权重值：100）
<style> #head{ color: red; } </style> -
类选择器（权重值：10）
<style> .cl{ color: red; } </style> -
元素选择器（权重值：1）
<style> p{ color: red; } </style>
CSS常用属性
-
宽与高
- width：宽度（块级标签才能设置宽度，内联标签的宽度由内容来决定）
- height：高度
-
文字属性
-
字体：font-family
body{ font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif }可以将多个字体名称作为一个“回退”系统来保存,如果浏览器不支持第一个字体，则会尝试下一个
-
文字大小：font-size
p{ font-size: 14px; } -
文字粗细：font-weight
p{ font-weight: bold; }值 描述 normal 标准粗细 bold 粗体 bolder 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值，默认值 -
文字颜色：color
p{ color: red; }- 十六进制值：#808080
- rgb值：RGB(255,0,0)
- rgba值：rgba(255,0,0,0.5) 第四个值为alpha，指定色彩的不透明度，1：不透明，0：透明
- 颜色的名称：red
-
文字对齐：text-align
div{ text-align: center; }值 描述 left 左边对齐 默认值 right 右对齐 center 居中对齐 justify 两端对齐 -
文字装饰：text-decoration
p{ text-decoration: underline; }值 描述 none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 inherit 继承父元素的text-decoration属性的值。 -
首行缩进：text-indent
p{ text-indent: 2em; /*首行缩进两个字*/ } -
字间距：letter-spacing
p { letter-spacing: 5px; }
-
-
背景
-
背景颜色：background-color
div{ 200px; height: 200px; background-color: red; } -
背景图片
div{ 200px; height: 200px; background-image: url("1.jpg") no-repeat; /*最后一个设置平铺与不平铺*/ /* repeat: 平铺（平铺：背景图片填满整个屏幕） repeat-x：向水平方向平铺 repeat-y：向垂直方向平铺 no-repeate：不平铺 */ }
-
-
边框：border
div{ border: 1px solid red; /*第一个参数：边框粗细，第二个参数：边框样式，第三个参数：边框颜色*/ }边框样式
值 描述 none 无边框。 dotted 点状虚线边框。 dashed 矩形虚线边框。 solid 实线边框。 同时还可以设置四个边框的样式：
- border-top
- border-left
- border-right
- border-bottom
-
圆角：border-radius
div{ 180px; height: 50px; border: 1px solid red; border-radius: 10px; /* 一个参数：设置四个角的圆角 两个参数： 第一个参数：左上，右下 第二个参数：右上，左下 三个参数： 第一个参数：左上 第二个参数：右上，左下 第三个参数：右下 四个参数：左上，右上，右下，左下 */ } -
display属性
控制HTML元素的显示效果
值 意义 display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 display:"inline-block" 使元素同时具有行内元素和块级元素的特点。 display：none与visibility：hidden的区别：
visibility：hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。
display：none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。
-
外边距：margin
div{ margin: 10px; /* 一个参数：四个边 两个参数：上下，左右 三个参数：上，左右，下 四个参数：上，右，下，左 */ }也可以四边单独设置
- margin-top
- margin-left
- margin-right
- margin-bottom
-
内填充：padding
div{ padding: 10px; /* 一个参数：四个边 两个参数：上下，左右 三个参数：上，左右，下 四个参数：上，右，下，左 */ }也可以四边单独设置
- padding-top
- padding-left
- padding-right
- padding-bottom
-
浮动：float
脱离文档流向左浮动或向右浮动
div{ 200px; height: 200px; float: left; border: 1px solid red; }值 描述 left 向左浮动元素。 right 向右浮动元素。 none 不允许浮动元素。 但是浮动有一个问题就是会脱离文档流使父级标签塌陷
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .a{ border: 1px solid black; 800px; } .b{ 200px; height: 200px; background-color: red; float: left; } .c{ 200px; height: 200px; background-color: green; float: right; } </style> </head> <body> <div class="a"> <div class="b"></div> <div class="c"></div> </div> </body> </html>为了解决这个问题可以使用clert来修复这个bug
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .a{ border: 1px solid black; 800px; } .b{ 200px; height: 200px; background-color: red; float: left; } .c{ 200px; height: 200px; background-color: green; float: right; } .clearfix{ clear: both; } </style> </head> <body> <div class="a"> <div class="b"></div> <div class="c"></div> <div class="clearfix"></div> </div> </body> </html>clear属性
值 描述 left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承 clear 属性的值。 -
溢出：overflow
值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 -
定位：position
值 描述 static 默认值。无定位。 relative（相对定位） 相对于未改变位置之前的位置，随父级标签移动，不脱离文档流。 absolute（绝对定位） 相对于未改变位置之前的最近定位，不随父级标签移动，脱离文档流。 fixed 相对于未改变位置之前的绝对与屏幕的位置，不随父级标签移动，脱离文档流 -
层级：z-index
设置对象的层叠顺序。层级越大显示越前，层级越小显示越后
-
不透明度：opacity
整体的透明度，整体的所有内容都会随不透明度的改变而改变。