CSS样式表
一:为什么要使用样式表?(CSS样式表对HTML标签进行控制,美化页面)
1.HTML标签的外观样式比较单一(默认字体黑色)
2.可以美化网页,使页面更漂亮
3.可以在多个网页中共享使用,提高工作效率
4.实现样式和页面分离,方便团队开发
DIV标签:容器标签 CSS控制页面是可直接对DIV 进行控制
二:样式表发的基本语法
<style type="text/css">
选择器{
属性:属性值
……
}
</style>
三:选择器的分类(1.标签选择器;2.类选择器;3.id选择器;)
1.标签选择器(标签名{属性:属性值})
例:<style type="text/css">
p{
属性:属性值
……
}
</style>
2.类选择器(.类名{属性:属性值}) 在代码标签中要定义类名称(<p class="r"> </p>)
例:<style type="text/css">
.className{
属性:属性值
……
}
</style>
3.id选择器(#id名称{属性:属性值}) 在代码标签中要定义id名称(<p id="e"></p>)
例:<style type="text/css">
#idName{
属性:属性值
……
}
</style>
4.选择器的集体声明
标签,#id名称,.类名称{属性:属性值……}
四:CSS的继承和嵌套
CSS继承是指:子标记会继承父标记的所有样式风格,并可以在父标记样式的风格的基础上加以修改,产生新的样式,而产生的新样式风格完全不会影响父标记
五:样式的分类(如下3种)
使用CSS控制页面的方法
1.行内样式:直接在标签中加入 属性定义
2.内嵌样式:
(1)CSS代码写在 <head>与</head>之间
(2)使用<style></style>标签进行声明
3.外部样式表
(1)链接外部样式表
<head>
<link href="文件的路径和名称" rel="指定相互关系是样式表(stylesheet)" type="链接的样式表示CSS(text/css)">
</head>
(2)导入外部样式表
<head>
<style type="text/css">
<!--
@import url(外部样式表CSS文件的路径和名称);
-->
</style>
</head>
(3)链接外部样式表与导入外部样式表的区别@import样式表:在HTML初始化时会被导入到HTML文件内<link>样式表:HTML标签需要样式时链接导入)
[1]:加载的顺序不同<link>样式表:同时加载 @import样式表:页面全部下载完后再加载
[2]:兼容性的差别@import样式表:CSS2.1提出的使用方式 一些老的浏览器不支持(如:IE4以下的浏览器)
[3]:使用DOM控制页面的样式的区别(页面使用JavaScript控制DOM改变页面样式时@import不支持,<link>属于XHTML标签@importCSS提供的方式)
六:样式的优先级(由以下 由左到右)
1.行内样式表--2.内嵌样式表--3.外部样式表((1)链接外部样式表--(2)导入外部样式表)