CSS相关知识回顾目录
CSS2选择器
假选择器的使用
属性选择器的使用
边框设置
背景设置
字体设置
文本属性
a标签假选择器使用
列表设置
表格设置
鼠标设置
单位设置
隐藏显示
位置设置
清除浮动
假元素的使用
媒体类型
CSS相关知识回顾
CSS2选择器
* 通配符选择器div 元素选择器#box id选择器.box 类选择器p.box 交集选择器div p 后代选择器ui > li 子代选择器p + div 亲兄弟选择器，选择p标签后面紧挨着的div元素p ~ div 表兄弟选择器，选择p标签后面所有同级的div元素h1,h2,h3 并集选择器假选择器的使用
div:first-child 匹配第一个元素div:last-child 匹配最后一个元素div:nth-child(2) 选择第二个元素div:nth-child(even) 偶数元素div:nth-child(odd) 基数元素div:nth-child(2n+1):lang选择器的使用 ???q:lang(no) { ???????quotes: "~" "~"; ???} ???<p>文本 <q lang="no">修饰的文本</q> 文本.</p>属性选择器的使用
<div key="a a">erefefwfa</div><div key="b-a">erefefwfa</div> ???[key] ???div[key] ???div[key="a a"] ???div[key~="a"] 匹配空格分割的任意属性值 ???div[key|="b"] 匹配以连字符连接的属性值，这个属性值以指定值开头 ???div[key^="b"] 匹配一指定字符开头的属性值 ???div[key$="a"] 匹配以指定字符结尾的属性值 ???div[key*="b"] 匹配包含指定字符的属性值边框设置
边框有border和outline之分，outline在border外面，outline无法单独设置每条边的样式颜色 ???outline和border没有显示指示自己的颜色，则使用color属性值 ???p { ???????color: #0000ff; ???????outline: 2px solid; ????????border: 2px solid red; ????}边框宽度 ???border-width: medium thick thin 10px; ???outline-width: thick;边框样式 ???支持的属性 one, hidden, dashed, dotted, double, groove, inset, outset, ridge, solid ???border-style: outset; ???outline-style: outset;边框颜色 ???border-color: darkcyan; ???outline-width: thick;背景设置
background-color 设置背景颜色background-image 设置背景图片background-repeat 设置图片平铺的方式 ???repeat-x ???repeat-y ???no-repeatbackground-attachment 设置图片固定方式 ???fixed 固定 ???scroll 随容器滚动background-position: bottom right; 设置图片的位置 ???background-position: 100% 100%;简写形式的顺序 background: color image repeat attachment position; ???background: #f0e68c url("./1.jpg") no-repeat fixed 250px 25px;字体设置
font-family: ‘Franklin Gothic Medium‘, ‘Arial Narrow‘, Arial, sans-serif; // 设置字体家族font-style 设置字体样式 ???normal ????italic 斜体字体 ???oblique 普通字体斜体样式font-size 设置字体大小 ???使用关键字设置字体大小 ???????在body元素上设置绝对字体大小如font-size: xx-small;支持的属性xx-small, x-small, small, medium, large, x-large, xx-large ???????在页面其他的元素上设置相对字体大小如font-size: larger;支持的属性smaller, larger ???????这种设置方式，可以简单的控制body字体大小，从而控制页面所有标签的字体大小 ???使用pixel设置 ???????font-size: 12px; 这种方式设置的字体大小固定，不推荐使用 ???使用em设置 ???????在body元素上设置font-size: 16px; 那么1em=16px; 如果页面上没有设置px值，默认是16px ???????在子元素中设置 font-size: 2em; 表示32px; ???????W3C建议使用的字体设置方式 ???????????body元素设置 font-size: 62.5%; ???????????子元素设置 font-size: 1.6em; 相当于 1.6em=16px;font-weight 设置字体粗细 ???数值 100, 200, 300, 400, 500, 600, 700, 800, 900 其中400是normal, 700是bold ???关键字 bolder, lighter 这两值是根据父元素的font-weight来显示的，如父元素设置bold那么它更粗font-variant: small-caps; 将小写字母显示成小型的大写字母 ???可用属性值 normal, small-caps, inherit文本属性
color 设置文本颜色text-align 设置文本对齐方式 ???left ???right ???center ???justify 分散对齐text-decoration 设置文本标记线 ???underline 下划线 ???overline 上划线 ???line-through 中划线 ???none 去掉下划线text-transform 设置文本转化方式 ???capitalize 首字母大写 ???uppercase 字母大写 ???lowercase 字母小写 ???nonetext-indent 设置首行缩进 ???text-indent: 10px; ???text-indent: 10%;word-spacing: 20px; 设置单词之间的间隙letter-spacing: 5px; 设置字符之间的间隙line-height 设置行高 ???line-height: 50%; ???line-height: 1.2; 基于当前字体计算 ???line-height: 20px;a标签假选择器使用
a:link{ color: #FF0000; } 初始颜色a:visited{ color: #00FF00; } 访问后的颜色a:hover { color: #FF00FF; } 鼠标悬浮颜色a:active { color: #0000FF; } 鼠标点击不放颜色设置顺序 :link, :visited, :hover, :active列表设置
ul,ol中列表项的前缀可以使用list-style-type设置，如 ul { list-style-type:lower-alpha; }ul,ol中列表项的前缀可以使用list-style-position设置是否包含在li盒子里面，如ul li { list-style-position: inside; }ul,ol中里表项的前缀可以使用list-style-image设置前缀图片，如 ul li { list-style-image: url(‘./2.jpg‘); }可以使用list-style属性简写上面提到的三种属性 ???简写的顺序 list-style-type | list-style-position | list-style-image表格设置
边框设置，默认table是没有边框的 table, th, td{ border: 1px solid #ccc; }边框合并，默认单元格的边框是分开的 ???可以设置border-collapse让单元格共享边框 table{ border-collapse: collapse; } ???也可以设置border-spacing设置单元格之间的间隙为0 table{ border-spacing: 0; }table布局，单元格宽度默认是根据内容的来自适应的 ???可以设置 table-layout 来设置单元格的宽度为指定的宽度 table { width: 300px; table-layout: fixed; }，auto为默认值。 ???默认情况下，table标签是会等待所有的表格数据加载完成才会展示出来，将table-layout设置成fixed还有一个好处，可以让表格一次加载一行数据空单元格的显示于隐藏，table{ empty-cells: hide; }表标题位置设置，caption{ caption-side:bottom; }鼠标设置
支持的属性值 default, pointer, text, wait, help, progress, crosshair, move如 cursor: help;创建自定义游标 ???最好将要显示的图片转换成.cur格式的图片，谷歌默认支持jpg等 ???如 cursor: url("./2.jpg"), default;单位设置
相对单位em,ex 其中em前面已经介绍，ex的作用和em类似，ex是用x字母的高度为准绝对单位 ???#box1 { height: 12in; } // 1in === 2.54cm ???#box2 { line-height: 3cm; } ????#box3 { word-spacing: 4mm; } ????#box4 { font-size: 12pt; } // 1pt === 1/72 in === 0.353mm ???#box5 { font-size: 1pc; } // 1pc === 12pt ???#box6 { font-size: 12px; } // 1px === 0.75pt隐藏显示
display: none; 控制dom是否渲染visibility 控制dom是否显示 ???visible 默认值 ???hidden 隐藏 ???collapse 主要用于表格单元的隐藏 ???inherit 继承位置设置
position: static; 默认值，静态定位不受top,bottom,left,right,z-index影响position: relativa; 设置相对自己当前位置定位，不脱离文档流position: absolute; 设置相对父元素位置定位，父元素非static，脱离文档流position: fixed; 设置相对浏览器视口定位，脱离文档流清除浮动
.clearfix:after { ???content: "."; ???display: block; ???height: 0; ???clear: both; ???visibility: hidden;}假元素的使用
p::first-line 第一行p::first-letter 第一个字div::before{ content: url(‘./1.jpg‘); } 元素content之前contentdiv::after 元素content之后的content媒体类型
根据不同的设备应用不同的样式 ???写法一 ???????@media screen {} 屏幕 ???????@media print {} 打印设备 ???????@media screen, print {} ???写法二 ???????@import url("./test.css") screen; ???????@import url("./test.css") print; ???写法三 ???????<link rel="stylesheet" type="text/css" media="all" href="./test.css"> ???????<link rel="stylesheet" type="text/css" media="screen" href="./test.css"> ???????<link rel="stylesheet" type="text/css" media="print" href="./test.css"> ???????<link rel="stylesheet" type="text/css" media="screen, print" href="./test.css">