首页 > > 网页制作 > css >

前端开发HTML&css入门——CSS&…

2019-08-26 05:43:32来源：博客园阅读 ()

前端开发HTML&css入门——CSS&选择器练习（待补）

　CSS　

　　层叠样式表 (Cascading Style Sheets)css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。而css就可以分别为网页的各个层次设置样式。　　

　　CSS的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成。

　　语法：

　　　　– 选择器 {样式名:样式值；样式名:样式值 ; }
　　　　– p {color:red ; font-size:12px;}

方法一：

　　内联样式

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>CSS</title>
 6 　　 </head>
 7     <body>
 8 　　　　　　　　　　<p style="color:red;font-size:40px;">锄禾日当午，汗滴禾下土</p>
 9                 <p style="color:red;font-size:40px;">谁知盘中餐，粒粒皆辛苦</p>
10     </body>
11 </html>

　　可以将CSS样式编写到元素的style属性当中将样式直接编写到style属性中，这种样式我们称为内联样式。内联样式只对当前的元素中的内容起作用，内联样式不方便复用内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用。所以我们就有了CSS。

　　内部样式

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" /
 5     <style type="text/css">
 6             p{
 7                 color:red;
 8                 font-size:40px;
 9             }
10         
11         </style>
12         
13     </head>
14     <body>
15 <p>谁知盘中餐，粒粒皆辛苦</p>
16         <p>谁知盘中餐，粒粒皆辛苦</p>
17         <p>谁知盘中餐，粒粒皆辛苦</p>
18         <p>谁知盘中餐，粒粒皆辛苦</p>
19         <p>谁知盘中餐，粒粒皆辛苦</p>
20         <p>谁知盘中餐，粒粒皆辛苦</p>
21     </body>
22 </html>

　　这样就解决了数量很庞大的标签项目的样式设定。但是如果我们在其他页面也使用内部样式那？

　　外部样式表

　　先将上述p标签的样式复制下来，然后在新建一个文本文件，将样式拷贝进文本文件中，然后右键另存为sytle.css

　　然后我们编写了一个外部的CSS文件，然后通过link标签来将外部的CSS文件引入到当前页面中，这样外部文件中的css样式表将会应用到当前页面中。

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>CSS</title>
 6     <link rel="stylesheet" type="text/css" href="style.css" />
 7         
 8         
 9     </head>
10     <body
11 <p>谁知盘中餐，粒粒皆辛苦</p>
12         <p>谁知盘中餐，粒粒皆辛苦</p>
13         <p>谁知盘中餐，粒粒皆辛苦</p>
14         <p>谁知盘中餐，粒粒皆辛苦</p>
15         <p>谁知盘中餐，粒粒皆辛苦</p>
16         <p>谁知盘中餐，粒粒皆辛苦</p>
17     </body>
18 </html>

　　将CSS样式统一编写到外部的样式表中，完全使结构和表现分离，可以是样式表可以在不同的页面中使用，最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存，加快用户访问的速度提高了用户体验，所以在开发中我们最推荐使用的方式就是外部的CSS文件。href=css的路径。

　　css的注释

　　CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中。

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>CSS</title>    
 6         <style type="text/css">
 7             
 8             /*
 9                 CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中
10                 
11                 CSS的语法：
12                 
13                     选择器 声明块
14                     
15                 选择器：
16                     - 通过选择器可以选中页面中指定的元素，
17                         并且将声明块中的样式应用到选择器对应的元素上
18                         
19                         
20                 声明块：
21                     - 声明块紧跟在选择器的后边，使用一对{}括起来，
22                         声明块中实际上就是一组一组的名值对结构，
23                             这一组一组的名值对我们称为声明，
24                         在一个声明块中可以写多个声明，多个声明之间使用;隔开，
25                         声明的样式名和样式值之间使用:来连接
26                     
27             */
28             
29                 
30             p{
31                 color:red;
32                 font-size:50px;
33             }
34         
35         </style>
36         
37     </head>
38     <body>
39             
40         <p style="color:red">天天下雨，我已经半个月没见太阳了</p>
41         
42     </body>
43 </html>

　　块元素和内联元素

　　div就是一个块元素，所谓的块元素就是会独占一行的的元素,无论他的内容有多少，他都会独占一整行。

　　p h1 h2 h3 ... 都是块元素。

　　div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式，div元素主要用来对页面进行布局的。　

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6       </head>
 7      <body>
 8             <div style="background-color:red ; width: 200px;">
 9                 我是一个div
10             </div>
11         <p>我是一个p标签</p>
12         <p>我是一个p标签</p>
13            
14         
15     </body>
16 </html>

　　span是一个内联元素（行内元素）：所谓的行内元素，指的是只占自身大小的元素，不会占用一行
　　常见的内联元素：a img iframe span
　　span没有任何的语义，span标签专门用来选中文字，
　　然后为文字来设置样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
<span>我是一个span</span>
        <span>我是一个span</span>
        
        <span>我是一段文字</span>
        
    </body>
</html>

　　块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，
　　一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
　　a元素可以包含任意元素，除了他本身
　　p元素不可以包含任何块元素

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>    
 7     　　<p><span>我是一个span</span></p>
 8         
 9         <a href="#"></a>
10         
11         
12         <a href="#">
13             <div style="background-color:red ; width: 200px;">
14                 我是一个div
15             </div>
16         </a>
17     </body>
18 </html>

　　在HTML5中，内联元素和块元素这两个概念已经取消了。但是我们在这里便于理解还是使用老的概念。

　　常用的CSS选择器

　　　　元素选择器
　　　　作用：通过元素选择器可以选则页面中的所有指定元素
　　　　语法：标签名 {}

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>常用选择器</title>
 6         <style type="text/css">
 7          p{
 8                 color: red;
 9             }
10             
11             
12             h1{
13                 color: red;
14             }        
15         </style>
16     </head>
17     <body>
18         <h1>悯农</h1>
19         <p>锄禾日当午</p>
20         <p>锄禾日当午</p>
21     </body>
22 </html>

　　这种选择器缺点显而易见，如果单独想设置某一个P标签的样式。就会更改整体P标签的样式。

　　　　id选择器
　　　　通过元素的id属性值选中唯一的一个元素
　　　　语法：
　　　　 #id属性值 {}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常用选择器</title>
        <style type="text/css">   
#p1{
                font-size: 20px; 
}
</style>
    </head>
    <body>
        <h1>悯农</h1>
        <p>锄禾日当午</p>
        <p>锄禾日当午</p>
        <p id="p1">锄禾日当午</p>
    </body>
</html>

　　虽然解决了不能单独分配样式的问题，但是相同的带来另外一个问题就是不能分组去分配样式。如果想多个分配样式必须把每一个P标签分配一个ID。　　

　　类选择器
　　通过元素的class属性值选中一组元素
　　语法：
　　class属性值{}

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常用选择器</title>
        <style type="text/css">
          .p2{
                color: red;
            }
　　　　　　.hello{
　　　　　　　　　　font-size: 50px;
　　　　　　　}
          
        </style>
    </head>
    <body> 
             <p class="p2 hello">锄禾日当午</p>
             <p class="p2">锄禾日当午</p>
             <p class="p2">锄禾日当午</p>        
    </body>
</html>

　　　　我们可以为元素设置class属性，
　　　　class属性和id属性类似，只不过class属性可以重复
　　　　拥有相同class属性值的元素，我们说他们是一组元素
　　　　可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开

　　　选择器分组(并集选择器)
　　　　通过选择器分组可以同时选中多个选择器对应的元素
　　　　语法：选择器1,选择器2,选择器N{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常用选择器</title>
        <style type="text/css">
            
        #p1 , .p2 , h1{
           background-color: yellow;
            }
        </style>
    </head>
    <body>
            <h1>悯农</h1>
            <p id="p1">锄禾日当午</p>
            <p class="p2">锄禾日当午</p>
    </body>
</html>

　　　　　　复合选择器（交集选择器）
　　　　　　　　可以选中同时满足多个选择器的元素
　　　　　　　　语法：
　　　　　　　　选择器1选择器2选择器N{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常用选择器</title>
        <style type="text/css">
　　　　　      　span.p3{
                 background-color: yellow;
            　 　　　}
　　　　　</style>
    </head>
    <body>
　　　　　　　   <p class="p3">锄禾日当午</p>
       　　　　 <span class="p3">汗滴禾下土</span>
               </body>
</html>

　　　　　　对于id选择器来说，不建议使用复合选择器

　　　　　通配选择器
　　　　　他可以用来选中页面中的所有的元素
　　　　　语法：*{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常用选择器</title>
        <style type="text/css">
           *{
                color: red;
            }
        </style>
    </head>
    <body>
            <h1>悯农</h1>
            <p id="p1">锄禾日当午</p>
            <p class="p2">锄禾日当午</p>
    </body>
</html>

　　　　　　　后代元素选择器

　　　　　　　选中指定元素的指定后代元素
　　　　　　　　语法：
　　　　　　祖先元素后代元素{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        div span{
                color: greenyellow;
            }
              </style>
     </head>
    <body>
        <div>
            <span>我是div标签中的span</span>
            <p><span>我是p标签中的span</span></p>
        </div>
        <span>我是body中的span元素</span>
           
</body>
</html>

　　　只要是div块元素后代的span标签都会应用选择器，而不是div块元素后代的span标签不会应用选择器。而且后代元素选择器也可以交叉使用ID选择器，class选择器例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
　　　　　　　　#d1 span{
                color: greenyellow;
           　　 }
　　　　　</style>
    </head>
    <body>
　　　　　　　<div id="d1">
            <span>我是div标签中的span</span>
            <p><span>我是p标签中的span</span></p>
        　　</div>
    
    </body>
</html>

也可以单独选择一个后代元素进行应用（第几个后代就在后面加几个标签）例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
　　　　　　　　#d1 p span{
                font-size: 50px;
               }
　　　　　</style>
    </head>
    <body>
　　　　　　　<div id="d1">
            <span>我是div标签中的span</span>
            <p><span>我是p标签中的span</span></p>
        　　</div>
    </body>
</html>

　　　　　　　　子元素选择器
　　　　　　　　　　选中指定父元素的指定子元素
　　　　　　　　　　父元素 > 子元素
　　　　　　　　　* IE6及以下的浏览器不支持子元素选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
                    div > span{
                background-color: yellow;
            }
        </style>
    </head>
    <body>       
              <div id="d1">
            <span>我是div标签中的span</span>
            <p><span>我是p标签中的span</span></p>
       　　　　 </div>
    </body>
    </html >