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>
示例代码：
<div class="cnblogs_code">
<pre> 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></pre>
</div>
4.三种引入CSS的方式：
行内样式：--->使用style属性导入
内部样式表；--->使用style标签导入
外部样式表；--->链接式（link标签），导入式（@import）
注意：链接式和导入式的区别以及CSS样式的优先级（就近原则）：
<link/> 标签:是属于XHTML，@import是属于CSS2.1;
使用<link>链接的CSS文件先加载到网页中，再进行编译显示；
使用@import导入式的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中；
导入式属于CSS2.1特有的。
就近原则：就近以所修饰的内容远近为标准；
<div class="cnblogs_code">
<pre> 1 <head>
 2 <meta charset="UTF-8">
 3 <title>CSS的引入</title>
 4 
 5 
10 <style>
11 h2{
12 font-family: 隶书;
13 font-size: 15px;
14 color: aqua;
15 }
16 </style>
17
18
19 
20 
21 <style>
22 @import url(../Resource2/CSS/style_1.css);
23 </style>
24
25 
26 
29
30
31 </head>
32 <body>
33 
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></pre>
</div>
5.CSS的三种基础选择器：
标签选择器：--->HTML的标签作为标签选择器的内容；
类选择器；--->可在页面内多次使用；
<div class="cnblogs_code">
<pre><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></pre>
</div>
ID选择器；--->在一个页面中只能使用一次；
<div class="cnblogs_code">
<pre> 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></pre>
</div>
三种选择器的优先级： ID选择器 > 类选择器 > 标签选择器
<div class="cnblogs_code">
<pre> 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 
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></pre>
</div>
6.CSS的三种高级选择器：
6.1层次选择器：
后代选择器；
子代选择器；
相邻兄弟选择器；
兄弟选择器； 
（注：找兄弟时都是向下找兄弟）
<div class="cnblogs_code">
<pre> 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></pre>
</div>
6.2结构伪类选择器：
<pre>结构伪类选择器： 概念：伪选择器，伪元素是CSS已经定义好的，我们拿来就可以用 格式： 选择器：伪元素{ 属性：属性值； } 伪元素的几种形式： 1.E:first-child -->寻找E的父类选择器F，再找F下的第一个子元素，若不是E类型，就不会被选择。 2.E:last-child -->作为父类下的孩子标签 E 的最后一个元素</pre>
<pre>3.F E:nth-child(n)-->（可以不用写父级元素） 找到E的父级元素，再找父级元素的第N个子元素， 判断它是不是E元素，不是就不会被选择 4.(F) E:nth-of-type(n) -->找到E的父级元素，再找父级元素下的第N个E元素。 （注意：两者的差别，下面是只找该类型的第n个E元素） </pre>
<div class="cnblogs_code">
<pre> 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 1
54 2
55 3
56 <ul>
57 <li>li1</li>
58 <li>li2</li>
59 <li>li3</li>
60 </ul>
61 </body>
62 </html></pre>
</div>
<pre></pre>
6.3属性选择器：
E:  选择匹配具有属性attr的E元素；
E:选择匹配具有属性attribute的E元素，并且属性值为val;
E:选择匹配元素E，E并定义了属性attr，属性值以val开头的；
E:选择匹配元素E，E并定义了属性attr，属性值以val结尾的；
E:选择匹配元素E，E并定义了属性attr，属性值中包含了val的；
<div class="cnblogs_code">
<pre> 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{
30 background: red;
31 }
32
33 a{
34 background: green;
35 }
36
37 a{
38 background: blueviolet;
39 }
40
41 a{
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></pre>
</div>
 7.盒子模型（Box Model）：
       所有的HTML元素都可以看作盒子，在CSS中，盒子模型是在设计和布局时使用。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（Border），填充（Padding）和实际内容（Content）。
<img src="https://www.runoob.com/images/box-model.gif" alt="CSS box-model" width="536" height="289">
 不同部分的说明如下：
外边距（Margin）：清除边框外的区域，外边距是透明的；
边框（Border）：围绕在内边距和内容外的边框；
内边距（Padding）：清除内容外的区域，内边距是透明的；
实际内容（Content）：盒子的内容显示文本和图像。
实例代码：
<div class="cnblogs_code">
<pre> 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></pre>
</div>
8.浮动（Float）：
CSS的Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列，往往是用于图像，但它在布局时一样非常有用。
实例代码：
 
<div class="cnblogs_code">
<pre> 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></pre>
</div>
 
 
 
 
<pre> </pre> 
来源：https://www.cnblogs.com/xbfchder/p/11055777.html

頁: [1]

琼殿技术论坛's Archiver

CSS的初步学习