版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
CSS的概念：
- Cascading Style Sheet 级联样式表
- 表现HTML或XHTML文件样式的计算机语言
- 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
CSS的优势：
- 内容与表现分离
- 网页的表现统一，容易修改
- 丰富的样式，使得页面布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用独立于页面的CSS，有利于网页被搜索引擎收录
CSS基本语法结构：
语法：
<style type="text/css">
选择器{
声明1；
声明2；
}
</style>
示例：
h1 {
font-size:12px; 属性：值
color:#F00;
}
注意：
CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上
html引入css样式的方法：
- 行内样式
- 内部样式表
- 外部样式表
- 行内样式
- 使用style属性引入CSS样式
示例：
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
- 内部样式表
- CSS代码写在的
语法：写在html里面的head当中
<style>
h1{color: green; }
</style>
优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
- 外部样式表
- CSS代码保存在扩展名为.css的样式表中
- HTML文件引用扩展名为.css的样式表，有两种方式
-
- 链接式
-
- 导入式
- 链式外部样式表
示例：
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
href 文件路径 rel 使用外部样式表 type 文件类型
- 导入外部样式表
示例：
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
这个限制一些版本，我是没有成功，广大的博友可以试试。
链接式与导入式的区别：
- 标签属于XHTML，@import是属于CSS2.1
- 使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
- 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
- @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
优先级为：
- 行内样式>内部样式表>外部样式表
- 就近原则
CSS3基本选择器：
- 标签选择器
- 类选择器
- ID选择器
- 标签选择器
语法：
p { font-size:16px;}
p 标签选择器 全部内容是声明 font-size是属性 16px 是值、
- 类选择器：
语法：
.class { font-size:16px;}
<标签名 class= "类名称">标签内容</标签名>
.class 这个class 为类的名字，而不是统称所有的类
- ID选择器：
示例：
#id { font-size:16px;}
详情如上边的class
总结：
- 标签选择器直接应用于HTML标签
- 类选择器可在页面中多次使用
- ID选择器在同一个页面中只能使用一次（因为id唯一）
基本选择器的优先级：
- ID选择器>类选择器>标签选择器
- 不遵循就近原则，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级