CSS(层叠样式表:Cascading Style Sheets)
1. 样式表的核心规则
选择符{属性1:值;属性2:值2;}
例:h1{color:green;}
选择符{属性1:值;属性2:值2;}
例:h1{color:green;}
2. 样式表放在那个地方
内部的CSS、外部的CSS
内部的CSS:
内部的CSS、外部的CSS
内部的CSS:
(1) 直接在html代码行中加入样式规则。例题:first.html
语法格式如下:<标签名 style=”样式属性:属性值;样式属性:属性值;….”>
<h1 style=”color:red;font-size:35px;font-family:隶书”>样式表</h1>
<p style=”background:yellow;color:blue;font-size:25px;”>这是在行内加入样式的效果</p>
语法格式如下:<标签名 style=”样式属性:属性值;样式属性:属性值;….”>
<h1 style=”color:red;font-size:35px;font-family:隶书”>样式表</h1>
<p style=”background:yellow;color:blue;font-size:25px;”>这是在行内加入样式的效果</p>
(2) 将样式表嵌入到html文件的文件头中。例题:first2.html
<html>
<html>
<head><title></title>
<style type=”text/css”>
<!--
选择符1{样式属性:属性值;样式属性:属性值;…}
选择符2{样式属性:属性值;样式属性:属性值;…}
选择符3{样式属性:属性值;样式属性:属性值;…}
- ->
</style>
</head>
<body>
</body>
</html>
<style type=”text/css”>
<!--
选择符1{样式属性:属性值;样式属性:属性值;…}
选择符2{样式属性:属性值;样式属性:属性值;…}
选择符3{样式属性:属性值;样式属性:属性值;…}
- ->
</style>
</head>
<body>
</body>
</html>
(3) 将一个外部样式表连接到html文件中例题:first3.html
<html>
<head><title></title>
<html>
<head><title></title>
<link rel=”stylesheet” href=”*.css” type=”text/css”>
</head>
<body></body>
</html>
</head>
<body></body>
</html>
(4) 将一个外部样式表输入到html文件中:例题:first4.html
<html>
<head><title></title>
<style type=”text/css”>
<!--
@import url(外部样式表的文件名);
- ->
</style>
</head>
<body></body>
</html>
<html>
<head><title></title>
<style type=”text/css”>
<!--
@import url(外部样式表的文件名);
- ->
</style>
</head>
<body></body>
</html>
3. (1)CSS样式的编写
选择符组(可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义)
例如:p,table,td,th{font-size:9pt;}
(2)类选择符
用类选择符能把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。(一种是:html标记名+“。”+类名。第二种:“。”+类名,第二种是经常使用的方式)
例如:p.right{text-align:right;} .right{text-align:right;}
<p class=”right”>这个段落向右对齐的</p>
(3)ID选择符
与CLASS选择符类似,把CLASS换成ID就可以了
定义ID选择符要在ID名称前加上一个“#”号。
(4)包含选择符
可以单独对某种元素包含关系定义的样式表,例如元素1里包含元素2
选择符组(可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义)
例如:p,table,td,th{font-size:9pt;}
(2)类选择符
用类选择符能把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。(一种是:html标记名+“。”+类名。第二种:“。”+类名,第二种是经常使用的方式)
例如:p.right{text-align:right;} .right{text-align:right;}
<p class=”right”>这个段落向右对齐的</p>
(3)ID选择符
与CLASS选择符类似,把CLASS换成ID就可以了
定义ID选择符要在ID名称前加上一个“#”号。
(4)包含选择符
可以单独对某种元素包含关系定义的样式表,例如元素1里包含元素2
例如: table a{font-size:12px;}这条样式只对表格内的链接改变了样式后,文字的大小为12像素,而表格外的链接的文字不变
4. 样式的优先级
ID样式的优先级高于CLASS,再其次是html标签选择符,如果想超越这三者之间的关系可以使用!import提升样式表的优先权。实例:css_jibie.html
ID样式的优先级高于CLASS,再其次是html标签选择符,如果想超越这三者之间的关系可以使用!import提升样式表的优先权。实例:css_jibie.html
5. 样式表的继承性
所在元素中嵌套的元素都会继承外层元素指定的属性值
例如:
div{color:red;font-size:9pt;}
…….
<div><p>这个段落的文字为红9号字</p></div>
所在元素中嵌套的元素都会继承外层元素指定的属性值
例如:
div{color:red;font-size:9pt;}
…….
<div><p>这个段落的文字为红9号字</p></div>
6. CSS的注释
/**/引用外部样式表的格式是
/**/引用外部样式表的格式是
7. 伪类
伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动识别的特殊选择符,它的最大好处就是可以对链接在不同状态下定义不同的样式效果
书写顺序:
a:link,a:visited,a:hover,a:actived
伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动识别的特殊选择符,它的最大好处就是可以对链接在不同状态下定义不同的样式效果
书写顺序:
a:link,a:visited,a:hover,a:actived
a:link {
/*未访问的链接*/
/*未访问的链接*/
color:#FF0000;
text-decoration:none;
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论