1、CSS概述
CSS指层叠样式表
CSS样式表极大的提高了工作效率
1）CSS基础语法：
selector{
propery:value
}
例1：h1{color:red;font-size:14px;}
属性大于1个之后，属性之间用分号隔开；如果大于1个单词，需要加上引号：p{font-family:"sans serif";}
2）CSS高级语法
选择器分组：h1,h2,h3,h4,h5,h6{color:red;}
继承：body{
color:green;
}
例子：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link href="1.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <h1> 10 这是一个h1标签的样式 11 </h1> 12 <h2> 13 这是一个h2标签的样式 14 </h2> 15 <a> 16 这是一个a标签的样式 17 </a> 18 <h3> 19 这是一个h3标签的样式 20 </h3> 21 </body> 22 </html>
其中的1.css：
1 h1, a, h2{
2 color:blue;font-size:50px;
3 }
4 body{
5 color:red;
6 }
2、CSS派生选择器
派生选择器：通过依据元素在其位置的上下文关系来定义样式
1 <body> 2 <p><strong>p标签:hello css</strong></p> 3 <ul> 4 <li><strong>li标签：hello css</strong></li> 5 </ul> 6 </body>
对应css文件：
1 li strong{
2 color:blue;
3 }
4 strong{
5 color:chartreuse;
6 }
3、CSS id选择器
Id选择器可以为标有id的html元素指定特有的样式，id选择器用“#”来定义
目前比较常用的方式是用id选择器来建立派生选择器
<body>
<a>普通的a标签</a>
<p id="pid">hello css<a href="www.jikexueyuan.com">pid中的a标签</a> </p>
</body>
对于的css文件：
1 #pid{
2 color:chartreuse;
3 }
4 #pid a{
5 color:brown;
6 }
4、类选择器
类选择器以一个点显示
class也可以用作派生选择器
1 <body> 2 <p class="pclass">class 类型</p> 3 <p class="pclass"><a>这是一个class 类型中的a标签</a></p> 4 </body>
对于的css文件：
1 .pclass{
2 color:red;
3 }
4 .pclass a{
5 color:blue;
6 }
5、属性选择器
对带有指定属性的Html元素设定样式
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 [title]{
8 color:blue;
9 }
10 [title=te]{
11 color:rosybrown;
12 }
13 </style>
14 </head>
15 <body>
16 <p title="t">属性选择器</p>
17 <p title="te">属性和值选择器</p>
18 </body>
19 </html>
时间： 2024-10-17 13:52:55