css
-
介绍
用于修饰HTML结构的，层叠样式表。
成叠
多个样式修饰一个结构
子元素从父元素那里继承样式
优先级
样式表
相关样式在一起定义（封装） -
语法
- 如何在html中应用css
-
定义style属性中
缺点：样式与结构冗余
优点：优先级较高<div style="color:#fff;background:#333"></div>
-
- 如何在html中应用css
-
定义在head标签中的style标签中
缺点：样式的复用率较低
优点：样式与结构分离<head> <meta> <title></title> <link rel="stylesheet" href=""> <script></script> <style> //css样式 div { color:#fff; background:#333 } </style> </head> <body> <div></div> </body>-
将样式定义在css文件中
优点：样式的复用率高（框架:例如bs），样式与结构分离
style.cssdiv { color:#fff; background:#333 } b.html <head> <link rel="stylesheet" href="./style.css"> </head>
-
规则
style属性：
属性名:属性值;属性名:属性值;style标签/.css
选择器 {
属性值:属性值;
属性名:属性值;
} -
注释
/注释内容/ -
选择器
-
核心选择器
标签选择器
h2 { }
div {规则 }
id选择器
#two {}
类选择器
.second{}
逗号选择器
h1,h2,h3 {}
组合选择器
div#two {}
选择id为div的元素
div,#two {}
选择div元素和id为two的元素
普遍选择器
* -
层次选择器
</div> <div class="content"> <a href=""></a> <a href 子元素选择器 .header > a
选中class为header的元素的直接孩子元素a标签
<div class="header"> <a href=""></a> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul>=""></a> </div>后代元素选择器
.header a
选中class为header的元素的后代元素a标签下一个兄弟
ul>li.two + li
=>
.two + *<ul> <li>zero</li> <li>one</li> <li class="two">two</li> <li>three</li> <li>four</li> <li>five</li> </ul>之后所有兄弟
ul>li.two ~ li
=>
.two ~ * -
-
属性选择器【过滤器】
在已有选择器的基础上进行筛选
selector[]
input[type]
input[type=text]
input[type^=s]
input[type$=t]
input[type*=t]-
伪类选择器【过滤器】
表示结构的
:first-child
:last-child
:nth-child()
number/2n+1/even、odd
表示状态的
:link
:hover
:active
:visited
:focus
-
-
伪元素选择器【添加元素】
selector::after
将一个伪元素添加到selector选择到的元素里面的最后面ul.nav::after { content:"four"; display:block; ... } <ul class="nav"> <li>one</li> <li>two</li> <li>three</li> ::after </ul>css -> css语法 -> 选择器 {规则}
-> 选择器 -> 规则
规则取值：
关键字：
位置 left right center top bottom medium
取消 none
…
颜色：
十六进制 #ffffff #ededed,简写为#fff
rgb函数 rgb(0,0,0)
关键字
渐变色 linear-gradient
长度：
绝对单位 px
相对单位
em 当前元素上的字体大小
font-size:12px
1em = 12px
2em = 24px
rem 当前html元素中设定的字体大小html { font-size:10px; } ul { font-size:20px; } li { height:2rem; //20px } % 百分比 border-radius:50%文本样式 (可以被继承)
line-height
text-align
text-decoration
字体样式 (可以被继承)
color
font-family 族
‘微软雅黑’ ,‘Microsoft YaHei’,‘宋体’
字体栈
font-family:“微软雅黑”,“Microsoft YaHei”,serif;
font-size 大小
网页默认字体为16px
12px 10px
font-weight 粗细
bold
thin
bolder
100~900
font-style 是否打开斜体
line-height
font:
速写，简写font: font-style font-weight font-size/line-height font-family font:normal bold 14px/1.5em "微软雅黑","Microsoft YaHei"网络字体
奇葩字体，（字 -> icon）
列表样式 list-style:none 盒子样式（块元素） width height background margin padding border border-radius box-shadow 布局 浮动布局 float clear 定位布局 position relative absolute top left 伸缩盒 -
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
