1、CSS外部样式的引用
<!--引用外部样式-->
<!--CSS style引用规律
1:就近原则
2:叠加原则
-->
<link rel="stylesheet" href="CSS/index.css">
2、CSS标签选择器
CSS样式规律
- 相同类型的选择器遵循 a.就近原则 b.叠加原则
- 不同类型的选择区遵循 : 选择器针对性越强,优先程度越高
- 选择器的权值加到一起,大的优先;如果权值相同,后定义的优先(就近原则)
- important > 内联选择器(行内) > id选择器 > 类选择器 | 伪类 |属性选择器 > 伪元素 > 标签选择器> 通配符 > 继承
/*复合选择器*/
div.test1{
color: #ff8559;
}
/*类选择器 权值:10*/
.test1{
color: black;
}
.test2{
color: yellow;
}
/*标签选择器 权值:1*/
div {
color: red !important;
}
/*id选择器 权值:100*/
#er{ color: aquamarine;
}
/*通配符 权值:0
1.优先级别非常低
2.性能比较差
*/
*{
font-size: 30px;
}
3、三种标签样式 行内标签、块级标签、行内-块级标签
行内标签:独占一行,能设置宽高
块级标签:多个可以占一行,宽高有内容决定
行内-块级标签:同时包含两种属性,技能设置宽高,又可以多个标签占一行
他们之间可以用display这个属性来相互转换 none;block;inline;inline-block
4、CSS属性
background 设置背景
display:显示类型(none、block、inline、inline-block)
padding内边距:(四种方式)
margin 外边距:(四种方式)
border 设置边框:(border-width、border-style、border-color)
overflow 设置超出元素边界内容的显示
line-height 垂直居中
cursor设置光标的类型 (手指十字架)
text-decoration设置a标签的下划线
text-align水平居中
list-style 设置列表左边编号的类型,经常用 none