CSS-详解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS-详解相关的知识，希望对你有一定的参考价值。
单位
绝对长度
px 像素(浏览器默认字体为16px)
注：用于pc端固定布局
相对长度
em 相对于父元素的字体大小
rem 相对于根元素的字体大小ie9+
注：一般html元素的字体大小设置为625%，body元素的字体大小设置为0.16rem(0.1rem=1px)
% 百分比
vw | vh 以百分比设置宽高(1vw=1%)ie9+
1 // 将元素高度设置100%，需将html和body的高度设置100% 2 <html style="height: 100%;"> 3 <body style="height: 100%;"> 4 <div style="height: 100%;"></div> 5 </body> 6 </html> 7 8 // 而使用vh则不用 9 <div style="height: 100vh;"></div>
颜色
设置颜色的方式：
1、red
2、rgb(255,0,0) | rgba(255,0,0,1)ie9+
3、hsl(360, 100%, 50%)ie9+ | hsla(360, 100%, 50%,1)ie9+
4、#FF0 | #FF0000
注：一般使用十六进制表示
选择器
div 选择元素
#id 选择id
.class 选择类名
* 通配符
elem elem 选择元素下的元素
elem > elem 选择元素下的子元素
elem + elem 选择元素后的第一个元素
elem ~ elem 选择元素后的所有元素
[attr] 选择带有某属性的元素(= *= ~= |= ^= $=)
=等于 *=包含 ~=空格 |=前缀 ^=开头 $=结尾
伪类
:hover 鼠标经过效果ie7
:focus 选择带有焦点的元素ie8
:before 在元素之前插入内容ie8
:after 在元素之后插入内容ie8
1 // 用于浮动元素清楚浮动 2 .clearfix:before,.clearfix:after{ 3 content: "\200B"; 4 display: block; 5 height: 0; 6 clear: both; 7 }
css3伪类
:first-child 选择第一个子元素ie7
以下ie9+支持
:last-child 选择最后一个子元素
:only-child 选择唯一的子元素
:first-of-type 选择第一个同类型的子元素
:last-of-type 选择最后一个同类型的子元素
:only-of-type 选择唯一的同类型的子元素
:nth-child() 选择第n个元素
:nth-last-child() 选择第n个元素(反向)
:nth-of-type() 选择第n个同类型的元素
:nth-last-of-type() 选择第n个同类型的元素(反向)
注：参数可以是数字(n)、关键字(odd even)、公式(2n+1)，索引是从1开始
:not(sel) 选择不是指的选择器的元素
:root 选择html元素
:empty 选择没有任何子级的元素
:target 选择锚点元素
:enabled 选择可用表单控件
:disabled 选择不可用表单控件
:checked 选择选中控件
::selection 被用户选中文本自定义高亮
符号
!important 指定样式优先权
1 <div id="demo"></div> 2 3 #demo { 4 width: .8rem; 5 height: .8rem; 6 background-color: #ccc; !important 7 background-color: #f00; // 不会覆盖上面的颜色 8 }
/* comment */ 添加注释
@import 导入样式
1 @import url("global.css"); 2 @import url(global.css); 3 @import "global.css"; 4 5 @import url(example.css) screen and (min-width:800px);
注：建议使用link标签替代
@charset 指定样式的字符集
1 @charset "UTF-8";
@media 媒体查询ie9+
@media screen and (min-width:768px;)
@font-face 指定用户没有的字体ie9+
1 @font-face { 2 font-family: myFont; 3 src: url("Sansation_Light.ttf") format(‘embedded-opentype‘), 4 url("Sansation_Light.eot") format(‘truetype‘); // ie9 5 } 6 7 // 使用 8 div { 9 font-family: myFont; 10 }
@keyframes 指定一个动画ie10+
1 @keyframes myAnimated1 { 2 from { opacity: 1; } 3 to { opacity: 0; } 4 } 5 6 @keyframes myAnimated2 { 7 from { transform: translate(0, 0); } 8 20% { transform: translate(20px, 20px); } 9 40% { transform: translate(40px, 0); } 10 60% { transform: translate(60px, 20); } 11 80% { transform: translate(80px, 0); } 12 to { transform: translate(100px, 20px); } 13 }
书写顺序
hack
定位与对齐
媒体查询
css3特性
以上是关于CSS-详解的主要内容，如果未能解决你的问题，请参考以下文章