CSS的初步学习

钱眼 · 发表于 2019-6-19 23:37:00

1.首先CSS的概念：

CSS即就是Cascading Style Sheet层叠样式表，的缩写；

是表现HTML文件样式的语言: 包括对字体，边距，高度，宽度，背景图片，网页定位等设定。

（目前市场企业主要使用CSS3.0）

2.CSS的优势：

内容和表现分离；网页的表现统一，容易修改；丰富的样式，使得页面的布局更加的灵活；减少网页的代码量，增加网页的浏览速度，节省网络带宽；有利于网页被搜索引擎收录。

3.CSS的基础语法：

选择器 {

声明1；

声明2； /* 声明：属性+值*/

}

Style标签：为于<Head> </Head>之间：

<style>

选择器{

声明1；

声明2； /* 声明：属性+值*/

}

</style>

示例代码：

 1    <style type="text/css">
 2         /*
 3         中写注释
 4          */
 5         h1{
 6             color: black;
 7             font-size: 20px;
 8             font-family: 华文琥珀;
 9         }
10     </style>
11 
12 </head>
13 <body>
14 <h1>
15     hello world!
16 </h1>

4.三种引入CSS的方式：

行内样式：--->使用style属性导入

内部样式表；--->使用style标签导入

外部样式表；--->链接式（link标签），导入式（@import）

注意：链接式和导入式的区别以及CSS样式的优先级（就近原则）：

使用<link>链接的CSS文件先加载到网页中，再进行编译显示；

使用@import导入式的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中；

导入式属于CSS2.1特有的。

就近原则：就近以所修饰的内容远近为标准；

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>CSS的引入</title>
 4     <!--2.采用style标签-->
 5     <!--
 6         选择器{
 7            属性：属性值；
 8         }
 9     -->
10     <style>
11         h2{
12             font-family: 隶书;
13             font-size: 15px;
14             color: aqua;
15         }
16     </style>
17 
18 
19     <!--3.外部样式表-->
20     <!--导入式-->
21     <style>
22         @import url(../Resource2/CSS/style_1.css);
23     </style>
24 
25     <!--&lt;!&ndash;链接式，需要link标签&ndash;&gt;-->
26     <!--
27     <link rel="stylesheet" href="../Resource2/CSS/style_1.css">
28     -->
29     
30 
31 </head>
32 <body>
33 <!--1.行内属性（多个属性时，分号隔开）-->
34 <h1 style="font-family: 华文琥珀 ; font-size: 30px;color: darkred;">
35     我爱学习！
36 </h1>
37 
38 <h2>
39     hello！
40 </h2>
41 
42 <div>
43     啦啦啦~
44 </div>
45 
46 </body>

5.CSS的三种基础选择器：

标签选择器：--->HTML的标签作为标签选择器的内容；

类选择器；--->可在页面内多次使用；

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>

    <style>
        /*
        ID选择器：定义在标签中，ID属性
        ID属性全局唯一不能同名；
          #id{
            属性：属性值；
            }
        */
        #a{
            color: black;
        }
        #a{
            color: blue;
        }
        #aa{
            color: #e1533c;
        }
        #b{
            color: aqua;
        }
    </style>
</head>
<body>
<p id="a">
    这是一个晴朗的早晨！
    啊啊啊啊。
</p>
<br>
<a href="" id="aa">
    这是一条链接
</a>
<br>
<span ID="b">
    我是一个粉刷匠，啦啦啦啦~
</span>
<br>
<div ID="bb">
    嚯哈哈棒棒棒
</div>
</body>
</html>

ID选择器；--->在一个页面中只能使用一次；

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>三种基础选择器-->类选择器</title>
 4     <style>
 5         /*
 6         类名在标签中用 class属性定义；
 7           类选择器：
 8            .类名{
 9              属性：属性值；
10              }
11         */
12         .a{
13             color: blue;
14             font-family: 华文琥珀;
15             font-size: 30px;
16         }
17     </style>
18 
19 </head>
20 <body>
21 <!--类选择器-->
22 <h1 class="a">
23     又是正能量的一天！
24 </h1>
25 <br>
26 <div class="a">
27     啦啦啦！
28 </div>
29 <br>
30 <span class="a">
31     哈哈哈~
32 </span>
33 <br>
34 <xbf class="a">
35     这个人很吊！
36 </xbf>

三种选择器的优先级： ID选择器 > 类选择器 > 标签选择器

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>基础选择器的优先级别</title>
 5     <!--类选择器-->
 6     <style>
 7         .a{
 8             color: blue;
 9         }
10     </style>
11 
12     <!--标签选择器-->
13     <style>
14         p{
15             color: #000;
16         }
17     </style>
18 
19     <!--ID选择器-->
20     <style>
21         #id{
22             color: red;
23         }
24     </style>
25 </head>
26 <body>
27 
28 <p class="a" id="id">
29     说明比的考试课代表。
30     不成熟课代表速度快举报的盛开的考虑不了 。
31 </p>
32 </body>
33 </html>

6.CSS的三种高级选择器：

6.1层次选择器：

后代选择器；

子代选择器；

相邻兄弟选择器；

兄弟选择器；

（注：找兄弟时都是向下找兄弟）

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>高级选择器---层次选择器</title>
 5 
 6     <style>
 7         p,ul{
 8             border: 1px solid red;
 9         }
10 
11         /*
12         1.层次选择器--->后代选择器
13         需求：获取body下面的所有p标签
14         body p{  --->中间用空格隔开
15           属性：属性值；
16           }
17         */
18         body p{
19             background: blueviolet;
20         }
21 
22         /*
23         2.层次选择器--->子代选择器
24         需求：仅选择body下的第一层的p标签
25         body>p{ ---->大于号链接
26           属性：属性值；
27          }
28         */
29         body>p{
30             background: chartreuse;
31         }
32 
33         /*
34         3.层次选择器---->相邻兄弟选择器（向下找相邻兄弟）
35         首先定位到一个元素
36         需求：获取指定元素的相邻兄弟元素
37 
38         E+F{  先定位到E，在选择相邻的标签F，用'+'连接
39           属性：属性值；
40         }
41 
42         #a+p{ --->#a定位到ID->a,再将相邻下一个的p标签内容赋属性
43          属性：属性值；
44         }
45         */
46         #a+p{
47             border: 1px solid black;
48         }
49 
50         /*
51         4.层次选择器--->通用兄弟选择器（向下找兄弟）
52         先定位到一个指定元素；
53         对指定元素下的，所有兄弟元素进行属性赋值
54 
55         E~F{  -->E指定的元素，F是指定元素的兄弟元素的形式
56          属性：属性值；
57         }
58 
59         #a~p{
60          属性：属性值；
61         }
62         */
63         .p~ul{
64             background: darkblue;
65         }
66 
67 
68 
69     </style>
70 
71 </head>
72 <body>
73 <p>1</p>
74 
75 <p id="a" >2</p>
76 
77 <p class="p">3</p>
78 
79 <ul>
80     <li>
81         <p>4</p>
82     </li>
83 
84     <li>
85         <p>5</p>
86     </li>
87 
88     <li>
89         <p>6</p>
90     </li>
91 </ul>
92 
93 </body>
94 </html>

6.2结构伪类选择器：

结构伪类选择器：
概念：伪选择器，伪元素 是CSS已经定义好的，我们拿来就可以用
格式：
   选择器：伪元素{
      属性：属性值；
    }
伪元素的几种形式：
1.E:first-child -->寻找E的父类选择器F，再找F下的第一个子元素，若不是E类型，就不会被选择。

2.E:last-child -->作为父类下的孩子标签 E 的最后一个元素

3.F E:nth-child(n)-->（可以不用写父级元素）
            找到E的父级元素，再找父级元素的第N个子元素，
            判断它是不是E元素，不是就不会被选择
4.(F) E:nth-of-type(n) -->找到E的父级元素，再找父级元素下的第N个E元素。
（注意：两者的差别，下面是只找该类型的第n个E元素）

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>结构伪类选择器</title>
 4 
 5     <style>
 6         /*边框*/
 7         p,li{
 8             border: 1px solid red;
 9         }
10         /*
11         结构伪类选择器：
12         概念：伪选择器，伪元素 是CSS已经定义好的，我们拿来就可以用
13         格式：
14            选择器：伪元素{
15               属性：属性值；
16             }
17         伪元素的几种形式：
18         1.E:first-child -->作为父类下的孩子标签 E 的第一个元素
19         2.E:last-child -->作为父类下的孩子标签 E 的最后一个元素
20         */
21         ul li:first-child{
22             background: #000;
23         }
24         ul li:last-child{
25             background: darkblue;
26         }
27         /*
28         3.F E:nth-child(n)-->（可以不用写父级元素）
29                     找到E的父级元素，再找父级元素的第N个子元素，
30                     判断它是不是E元素，不是就不会被选择
31         */
32         /*body->父级元素； p->要选择的子元素的类型；n->第N个子元素
33         需求：选择body下面的第二个元素
34         */
35         p:nth-child(2){
36             background: black;
37         }
38         p:nth-child(1){
39             background: black;
40         }
41         /*
42         4.需求：选择body下面的第二个P元素：
43         (F) E:nth-of-type(n) -->找到E的父级元素，再找父级元素下的第N个E元素
44         */
45         p:nth-of-type(1){
46             background: black;
47         }
48     </style>
49 
50 </head>
51 <body>
52 <h1>结构伪类选择器</h1>
53 <p>1</p>
54 <p>2</p>
55 <p>3</p>
56 <ul>
57     <li>li1</li>
58     <li>li2</li>
59     <li>li3</li>
60 </ul>
61 </body>
62 </html>

6.3属性选择器：

E[attr]: 选择匹配具有属性attr的E元素；

E[attr=val]:选择匹配具有属性attribute的E元素，并且属性值为val;

E[attr^=val]:选择匹配元素E，E并定义了属性attr，属性值以val开头的；

E[attr$=val]:选择匹配元素E，E并定义了属性attr，属性值以val结尾的；

E[attr*=val]:选择匹配元素E，E并定义了属性attr，属性值中包含了val的；

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>高级选择器->属性选择器</title>
 5 
 6     <style>
 7         /*
 8         给基础代码添加样式
 9         */
10         .demo a{
11             /*浮动*/
12             float: left;
13             display: block;
14             height: 50px;
15             width: 50px;
16             border-radius: 10px;
17             background: darkblue;
18             color:white;
19             text-align: center;
20             line-height: 50px;
21             /*取掉下划线*/
22             text-decoration:none  ;
23             margin: 5px;
24         }
25 
26         /*
27         属性选择器：
28         */
29         a[id]{
30             background: red;
31         }
32 
33         a[id=id1]{
34             background: green;
35         }
36 
37         a[href^="https"]{
38             background: blueviolet;
39         }
40 
41         a[class]{
42             background: black;
43         }
44     </style>
45 </head>
46 <body>
47 <p class="demo">
48     <a href="https://www.baidu.com" id="id1" class="class1">1</a>
49     <a href=""id="id2">2</a>
50     <a href="" class="class3">3</a>
51     <a href="">4</a>
52     <a href="">5</a>
53     <a href=""id="id6">6</a>
54     <a href="">7</a>
55     <a href="">8</a>
56     <a href="">9</a>
57 </p>
58 </body>
59 </html>

7.盒子模型（Box Model）：

所有的HTML元素都可以看作盒子，在CSS中，盒子模型是在设计和布局时使用。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（Border），填充（Padding）和实际内容（Content）。

不同部分的说明如下：

外边距（Margin）：清除边框外的区域，外边距是透明的；

边框（Border）：围绕在内边距和内容外的边框；

内边距（Padding）：清除内容外的区域，内边距是透明的；

实际内容（Content）：盒子的内容显示文本和图像。

实例代码：

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>盒子模型</title>
 5 
 6     <style>
 7         /*
 8         style中写CSS代码
 9         */
10         /*标签选择器*/
11         div{
12             border: 8px solid red;
13             padding: 10px;
14             margin: 10px;
15             width: 300px;
16             height: 300px;
17         }
18     </style>
19 </head>
20 <body>
21 <p>盒子模型测试：</p>
22 <div>
23     平常设置的width属性只是作用于Content（实际内容，包括文本和图像），
24     其实还包括了，Margin（外边距），和border（边框,透明的），padding（内边距,透明的）。
25     在上面的style中:
26     真实的宽：300+10*2+10*2+8*2;
27     真实的高：300+10*2+10*2+8*2。
28 </div>
29 </body>
30 </html>

8.浮动（Float）：

CSS的Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列，往往是用于图像，但它在布局时一样非常有用。

实例代码：

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>浮动</title>
 5     <style>
 6         img{
 7             width: 50px;
 8             height: 50px;
 9             float: left;
10         }
11     </style>
12 </head>
13 <body>
14 <p>浮动测试：<b>图片的浮动</b></p>
15 <img src="../Resource2/image/QQ图片.jpg" alt="本人">
16 <div>
17     我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~
18     我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~
19     我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~
20     我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~我最棒啦~
21 </div>
22 </body>
23 </html>

来源：https://www.cnblogs.com/xbfchder/p/11055777.html