CSS相关知识回顾目录
CSS2选择器
假选择器的使用
属性选择器的使用
边框设置
背景设置
字体设置
文本属性
a标签假选择器使用
列表设置
表格设置
鼠标设置
单位设置
隐藏显示
位置设置
清除浮动
假元素的使用
媒体类型
CSS相关知识回顾
-
* 通配符选择器 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- medium thick thin 10px; outline- thick; 边框样式 支持的属性 one, hidden, dashed, dotted, double, groove, inset, outset, ridge, solid border-style: outset; outline-style: outset; 边框颜色 border-color: darkcyan; outline- thick; -
background-color 设置背景颜色 background-image 设置背景图片 background-repeat 设置图片平铺的方式 repeat-x repeat-y no-repeat background-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设置 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; 使用rem设置 rem是相对于html标签的字体单位，默认是16px;用法和em类似 body{ font-size: 62.5%; } #id1{ font-size: 1rem; } 可以简单的控制html标签的字体大小，控制整个页面的字体 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 字母小写 none text-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: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 { 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之前content div::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">