【使用DIV+CSS重写网站首页案例】CSS选择器-CSDN博客

本文链接：https://blog.csdn.net/u012161251/article/details/101739612

使用表格<table></table>对网站首页进行布局有缺陷，不能拖动版块，不灵活。

DIV

Div是一个html的标签，单独使用没有意义，必须结合CSS使用；

是一个块级元素，单独占一行；

它主要用于页面的布局；

Span

Div是一个html的标签，单独使用没有意义，必须结合CSS使用；

是一个内联元素，显示一行；

它主要用于对括起来的内容进行样式的修饰；

CSS

层叠样式表：同一元素，同一属性，设置不同值；

解决内容与表现分离的问题（html只能将元素展现出来，内容样式无法展示出来），对内容进行修饰；

语法和规范：

设置样式：

*第一种写法：写在<head></head>内部

（选择器：用于快速查找需要设置样式的元素）

选择器{

属性名1:属性值1；

属性名2:属性值2(；)

}

*冒号是英文输入法的

*最后一个分号可以省略

基本选择器：(3种)

元素选择器：对整体设置样式（div）

例子：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>元素选择器</title>
 7         <!--对整体设置样式-->
 8         <style  type="text/css">
 9             div{
10                 font-size:50px;
11                 color:pink;
12             }
13         </style>
14     </head>
15     <body>
16         <div>
17             哈哈哈哈哈11
18         </div>
19         <div>
20             哈哈哈哈哈22
21         </div>
22         <div>
23             哈哈哈哈哈33
24         </div>
25         <div>
26             哈哈哈哈哈44
27         </div>
28         <div>
29             哈哈哈哈哈55
30         </div>
31     </body>
32 
33 </html>

结果：

类选择机器：部分设置样式（. class名字）

例子：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>类选择器</title>
 6         <!--部分设置样式-->
 7         <style>
 8             .div2{
 9                 font-size: 30px;
10                 color:gold
11             }
12         </style>
13     </head>
14     <body>
15         <div>
16             哈哈哈哈哈11
17         </div>
18         <div class="div2">
19             哈哈哈哈哈22
20         </div>
21         <div>
22             哈哈哈哈哈33
23         </div>
24         <div class="div2">
25             哈哈哈哈哈44
26         </div>
27         <div>
28             哈哈哈哈哈55
29         </div>
30     </body>
31 </html>

结果：

id选择器：单个设置样式（# id名）

*注意：虽然44可以实现样式，但不是id选择器的目的，此处是有问题的。使用时只设置一个。

例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>id选择器</title>
        <!--单个设置样式-->
        <style>
            #div5 {
                font-size: : 30px;
                color: yellow;
            }
        </style>
    </head>

    <body>
        <div>
            哈哈哈哈哈11
        </div>
        <div class="div2">
            哈哈哈哈哈22
        </div>
        <div>
            哈哈哈哈哈33
        </div>
        <!--虽然44可以实现样式，但不是id选择器的目的，此处是有问题的。使用时只设置一个。-->
        <div class="div2" id="div5">
            哈哈哈哈哈44
        </div>
        <div id="div5">
            哈哈哈哈哈55
        </div>
    </body>

</html>

结果：

其他选择器

层级选择器：层次选择样式(div p)

例子：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>层级选择器</title>
 7         <style>
 8             div p{
 9                 font-size:30px;;
10                 color:green;
11             }
12         </style>
13     </head>
14 
15     <body>
16         <div>
17             哈哈哈哈哈11
18         </div>
19         <div>
20             哈哈哈哈哈22
21         </div>
22         <div>
23             哈哈哈哈哈33
24         </div>
25         <div>
26             <p>
27                 哈哈哈哈哈55
28             </p>
29         </div>
30         <div>
31             哈哈哈哈哈55
32         </div>
33     </body>
34 
35 </html>

结果：

属性选择器：属性选择样式( input[type='..' ] )

例子：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>属性选择器</title>
 6         <style>
 7             input[type='text']{
 8                 background-color: red;
 9             }
10             
11             input[type='password']{
12                 background-color: blue;
13             }
14         </style>
15     </head>
16     <body>
17         用户名：<Input type="text" name="username"/><br />
18         密码：<input type="password" name="password" />
19     </body>
20 </html>

结果：