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

时间 2020-08-04

标签使用 div+css div css 重写网站首页案例选择器栏目 HTML 繁體版

原文原文链接

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

DIVhtml

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

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

它主要用于页面的布局；spa

Span3d

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

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

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

CSSinput

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

解决内容与表现分离的问题（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>

结果：