今日笔记
一.CSS层叠样式表
1.如何使用css
1)内联样式
写在标签的style属性中的样式
所有的标签都有style属性,都可以写内部样式
| <a href="#">web<span style="color:#f00;">前端</span>学习</a> <h1 style="width:200px;height:200px;background-color:#ff0;">内联样式</h1> |
总结:
| 1.内联样式不能重用 |
2)内部样式
在head标签中,写style标签
在style内部写样式
选择器{
样式属性:值;
}color font-size background-color
小复习:
css的使用
1.内联样式 在标签的style属性中写样式
1.不能重用
2.优先级最高
2.内部样式 在head中写style标签.在style中写样式
1.样式可以重用
2.这重用有局限性,只在当前html文件重用
3)外部样式
单独创建一个.css为后缀文件
在html的head写引用.css文件的命令
总结:可以广泛的重用
总结:
| 1.内联样式 不能重用,优先级最高,项目中不用,学习和测试的时候使用 |
2.CSS样式的规则特性
1)继承性
大多数样式可以被子元素继承
2)层叠性
多个属性不重复的样式,作用在同一个标签上,
都会对这个标签生效
3)优先级,样式属性重复,优先级高的生效
1.浏览器默认样式优先级最低
2.就近原则
3.内联样式优先级最高
练习：
创建03_ex.html.写h2标签,文字自定
1.写内部样式.第一套h2-->宽 高 边框#f00 背景色#006699
字体颜色#fff font-family:"黑体";
2.写内部样式.第二套 h2-->border:20px solid #000
背景色#990066字体颜色#ff0
观察优先级
3.写外部样式03.css h2-->背景颜色#0ff 字体颜色 #f0f
把link标签写在style标签上面,
把link标签写在style标签下面,观察优先级
4.给h2写内联样式 字体颜色#fff 观察优先级
4.选择器
选择器的作用,选出页面中复合要求一个或者多个标签
给这些匹配的标签添加样式
1)通用选择器,定义公用样式,少用
*{/*把所有标签的内外边距清0*/
margin:0px;padding:0px;
}
2)标签选择器,匹配所有的符合关键字的标签
1.写通用样式
2.为复杂的选择器服务
关键字{} ex: div{} p{} h2{}
3)id选择器
1.匹配一个id值符合的标签
2. 为复杂的选择器服务
<ANY id="值">
#值{}
4)类选择器
1.匹配一类标签,共用一个样式
2. 为复杂的选择器服务
<ANY class="值"></ANY>
.值{}