概念:CSS层叠样式表,也称级联样式表;包含一个或多个规则的文本文件
作用:进行网页风格设计
特点:
1.是页面字体变得更漂亮,更容易编排
2.可以轻松控制页面布局
3.可以在大多数浏览器上使用
4.以前一些必须通过图像转换才能实现的功能,现在只要用CSS就可以轻松实现,页面下载更快
5.可以使用一个CSS文件控制整个网站的显示风格。只要修改CSS文件中相应的行,就可以改变整个网站上页面的显示样式
优势:
1.表现和内容分离
2.增强了网页的表现力
3.是整个网站显示风格趋于统一
编辑方法:
1.写在html文件里的CSS规则
2.将CSS规则写在单独的文件里
CSS规则组成:选择器和声明
选择器类型:
1.标记选择器
直接使用HTML标记名称作为选择器
例:h1{font-size:30px; color:blue; font-familiy:黑体;}
2.类选择器
例:.c1{ font-size:30px; color:blue;font-familiy:黑体;} //写在头部
<p class="c1">著名诗人</p> //写在主体部分
标记选择器和类选择器混合使用:
例:p.h2{ color:res; font-weight:bold;} //写在头部
3.id选择器
由”#”及id属性直接相连构成
例:#right{ color:red; text-align:right; font-size:20px;}
<p id="right">使用id选择器设置样式</p>
4.伪装选择器
用法:标记:伪类名{/*CSS规则*/}
例子:a:link{ color:gray; text-decration:none;}
常用伪类:
伪类名 | 说明 |
link | 设置a标记在未被访问前的样式 |
hover | 设置a标记在鼠标悬停时的样式 |
active | 设置a标记在被用户激活(鼠标单击和释放之间)时的样式 |
visited | 设置a标记在访问后的样式 |
first-letter | 作用于块,设置第一个字符的样式 |
first-line | 作用块,设置第一行的样式表 |
first-child | 设置第一个子标记的样式 |
lang | 设置具有lang属性的标记的样式 |
CSS选择器声明:
1.集体声明
例:h1,h2,h3,h4,h5,p{ color:purple; font-size:16px;}
h2.spscial, .special,#one{ text0decoration:underline;}
2.全局声明
全局声明符号:“*”
例子:
*{color:purple;
font-size:16px; }
3.派生选择器
优点:使CSS代码更加简洁
例子:
li strong { font-style:italic; font-weight:normal;} //italic 斜体
strong { font-weight:bold;} //bold 粗体
测试代码:
<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我来说没有用</strong></p>
<ol>
<li><strong>我是斜体字,因为strong元素位于li标记内</strong></li>
<li>我是正常字体</li>
</ol>
CSS定义与引用
1.内联样式
基本语法:<标记 style=“属性1:属性值1;属性2:属性值2;…”>修饰内容</标记>
语法说明:
(1)标记是指HTML标记,如p、h1、body等标记
(2)标记的style定义的声明只对自身起作用
(3)style属性的值可以包含多个声明,每个声明之间用“;”分隔
(4)标记自身定义的style样式优先于其他所有样式定义
例子:<p style="font-size:20px; font-style:italic;">这个内联样式定义段落文字大小20像素,文字风格为斜体</p>
2.内部样式表
基本语法:
<style type="text/css">
选择器1{属性1:属性值1;属性2:属性值2;…}
选择器2{属性1:属性值1;属性2:属性值2;…}
…
选择器n{属性1:属性值1;属性2:属性值2;…}
</style>
语法说明:
(1)style标记语法是成对标记,有一个type属性是指style元素以CSS的语法定义
(2)选择器1...选择器n,可以定义n个选择器,再定义声明部分
(3)属性和属性值之间用冒号连接,“属性/属性值”对之间用分号分隔
例子:
(1).int_css{ //类选择器
border-width:2px; //定义边框宽度
border-style:solid; //定义边框样式
text-align:center; //定义文本对齐方式
color:red; //定义颜色
}
(2)#h1_css{ //id选择器
font-size:28px; //定义字体大小
font-style:italic; //定义字体样式
}
3.外部样式表
外部样式表将CSS规则写在以.css为后缀的CSS文件里,需要用到此样式的网页里引用该CSS文件
优点:
①便于复用
一个外部CSS文件可被多个网页共用
②便于修改
修改样式只须修改CSS文件
③提高显示速度
(1)链接外部样式表
基本语法:<link type="text/css" rel="stylesheet" href="out.css"> //out.css是外部样式表的文件名称
语法说明:
link标记是单个标记,也是空标记,仅包含属性,只能存在于head部分,不过他可出现任何次数
link标记属性、取值及说明
属性 | 取值 | 说明 |
type | MIME_type | 规定被链接文档的MIME类型 |
rel | stylesheet | 定义当前稳当与被连接文档之间的关系 |
href | URL | 定义被连接文档的位置 |
(2)导入外部样式表
基本语法:
<style type="text/css">
@import url("外部样式表文件1名称")
@import url("外部样式表文件2名称")
选择器1{属性1:属性值1;属性2:属性值2;...}
选择器2{属性1:属性值1;属性2:属性值2;...}
…
选择器n{属性1:属性值1;属性2:属性值2;…}
</style>
语法说明:
①导入样式表必须在style标记内开头的位置定义,可同时导入多个外部样式表,每条语句必须以“;”结束。一般导入外部文件写在最前面,内部样式写在后面
②“@import”必须连续书写,即“@”和“import”之间不能留有任何空格
③url(“外部样式表文件名称”)中的文件必须是全称,含后缀名.css,如out.css
CSS继承与层叠
1.CSS继承即子标记会继承父标记所有样式的风格,并且在父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式风格完全不影响父标记。
注意:有的属性不会继承父标记的属性值,如:边框属性就是非继承的。
2.CSS全称:层叠样式表
CSS规定优先级:行内样式>id样式>class样式>标记样式