CSS 简记
2017-01-07 17:39
246 查看
CSS:层叠样式表（内部样式会覆盖父级样式）
一、应用 CSS 的3种方式：
1：行内样式表
2：内部样式表
3：外部样式表
eg:
1: <div style="color:red;font-size:50px">css</div>
2: <div class="div1">css</div>
<head>
<style type="text/css">
.div1{
color:red;
font-size:50px;
}
</style>
</head>
3: <div class="div1">css</div>
<head>
<link rel="stylesheet" href="www.css">
</head>
www.css doc
.div1{
color:red;
font-size:50px;
}
二、CSS 选择器
1、ID 用 # 开头
2、标签名
3、类用 . 开头
三、复杂选择器
1、组合选择器
E,F:同时选择E和F这2个选择器。（可选多个）
E F:选择器E的下一代内部选择器F（有多个F则都选中）。
E>F:选择器E的直接子代选择器F（只选儿子辈）。
E~F：E后面的所有兄弟元素。
E+F：E后面的第一个兄弟元素。
2、属性选择器
<input type="checkbox" checked/>选项1
<input type="checkbox" checked/>选项2
<input type="radio"/>选项3
<input type="radio"/>选项4
1：E[attr]:标签E中含属性attr的所有元素。
input[checked]{ //改变复选框的大小,不改变文字。
width:20px; height:30px;
}
2: E[attr=F]:选中E中含属性F的所有元素。
input[type=radio]{
width:50px; height:60px;
}
3、伪类（根据元素的状态选取）
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接，鼠标单击未释放时的效果 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
4、伪元素（根据元素的内容选取）
1、:first-line 匹配元素的第一行
2、:first-letter 匹配元素的第一个字母
四、优先级
1、行内 > 内部 > 外部
2、ID > class > 标签
3、相同权重的后面为主（效果的覆盖）
4、!important（在属性值后面加上 !important 使其优先级最高）
五、盒子模型
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 