首页 > 代码库 > CSS-详解

CSS-详解

2024-11-04 22:04:02   210人阅读

单位

绝对长度

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-详解


联系
我们