[CSS3] 学习笔记-CSS入门基本知识

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>

你可能感兴趣的:([CSS3] 学习笔记-CSS入门基本知识)