使用CSS的意义
CSS：层叠样式表
CSS的优势：分离 易改 灵活 增速 优化搜索
CSS的基本语法结构
语法
选择器{ 声明1；
声明2；
...... }
h1{
font-size:12px；
color:#F00；
}
CSS的最后一条声明后的“；”可写可不写，建议写
style标签
<style type="text/css">
h1{
font-size:12px;
color:#F00;
}
</style>
CSS三种选择器
标签选择器 类选择器 ID选择器
标签选择器
html标签作为标签选择器的名称<h1>---<h2>,<p>,<img/>
语法 p{font-size:16px;}
类选择器
.class{font-size:16px;}
<标签名 class="类名称">标签内容</标签名>
ID选择器
#id{front-size:19px;}
小结：
1.标签选择器可以直接应用于HTML标签
2.类选择器可在页面中多次使用
3.ID选择器在同一个页面中只能使用一次
HTML中引入CSS样式表
行内样式表 内部样式表 外部样式表
行内样式表
使用style属性引入CSS样式
eg、<h1 style="color:red;">style属性的应用</h1>
<p style="front-size:14px;color:green;">直接在HTML标签中设置的样式</p>
内部样式表
CSS代码写在<head>的<style>标签中
优：方便在同页面中修改样式
缺：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式
1. 链接式
<head>
......
<link href="style.css"文件路径 rel="stylesheet"使用外部样式表 type="text/css"文件类型/>
......
</head>
2.导入式
<head>
......
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
链接式和导入式的区别
1.<link/>是HTML标签，@import是css样式命令
2.<link/>先加载，再解释
3.@import先解释HTML结构，再加载
4.@import属于CSS2.1特有的，兼容性不好
CSS样式优先级
行内样式>内部样式表>外部样式表
ID选择器>类选择器>标签选择器
CSS的高级应用
CSS复合选择器： 后代选择器 交集选择器 并集选择器
CSS继承特性
后代选择器
在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明
外层的标签写在前面，内层的标签写在后面，之间用空格分隔
标签嵌套时，内层的标签成为外层标签的后代
h3 strong{color:red;font-size:36px;}
交集选择器
有两个选择器直接连接构成，选中二者各自元素范围的交集
第一个必须是标签选择器，第二个则必须是类选择器或者ID选择器
选择器之间不能有空格，必须连续书写
p.txt{color:red;line-height:28px;}
并集选择器
多个选择器通过逗号连接而成
利用并集选择器同时声明风格相同样式
h3,.first,.second,#end{
font-size:16px;
color:red;
font-weight:normal;
}
CSS继承特性
继承特性：指html元素可以从父元素继承一部分css属性，即使当前元素没有定义该属性
常用的css可继承的属性
font 组合字体
font-family 规定元素的字体系列
font-weight 设置字体的粗细
font-size 设置字体的尺寸
font-style 定义字体的风格
text-indent 文本缩进
text-align 文本水平对齐
line-height 行高
color 文本颜色
visibility 元素可见性
cursor 光标属性
子标签可以继承父标签的样式
子标签的样式不会影响父标签的样式风格
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
