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类选择器 > 标签选择器的优先级