HTML学习之==>CSS

一、CSS选择器

  1 id选择器
  2 class选择器
  3 标签选择器
  4 标签层级选择器
  5 class层级选择器
  6 id层级选择器
  7 id组合选择器
  8 class组合选择器
  9 属性选择器
 10 <!DOCTYPE html>
 11 <html lang="en">
 12 <head>
 13     <meta charset="UTF-8">
 14     <title>Title</title>
 15     <style>
 16         /*id选择器通过井号来定位*/
 17         #i1{height: 100px;
 18             width: 100px;
 19             background-color: red;
 20         }
 21 
 22         /*class选择器通过点来定位*/
 23         .c1{height: 100px;
 24             width: 100px;
 25             background-color: black;
 26         }
 27 
 28         /*标签选择器：当前html页面下的所有div都会受到影响*/
 29         div{
 30             height: 100px;
 31             width: 100px;
 32             background-color: pink;
 33         }
 34 
 35         /*标签层级选择器，div标签下的所有span标签颜色改变*/
 36         div span{
 37             background-color: blue;
 38         }
 39 
 40         /*class层级选择器*/
 41         .c2 span{
 42             background-color: green;
 43         }
 44 
 45         /*id层级选择器*/
 46         #i2 span{
 47             background-color: yellow;
 48         }
 49 
 50         /*id组合选择器，i3、i4、i5公用一套css样式*/
 51         #i3,#i4,#i5{
 52             height: 100px;
 53             width: 100px;
 54             background-color: orange;
 55         }
 56 
 57         /*class组合选择器，c3、c4、c5公用一套css样式*/
 58         .c3,.c4,.c5{
 59             height: 100px;
 60             width: 100px;
 61             background-color: chocolate;
 62         }
 63 
 64         /*属性选择器，通过name属性定位。对选择到的标签 在通过属性进行筛选 可以和层级选择器连用*/
 65         div[name='dsx']{
 66             background-color: rebeccapurple;
 67         }
 68 
 69     </style>
 70 </head>
 71 <body>
 72     <!--id选择器,一个html页面中不可以存在相同的id，以“#”来定位-->
 73     <div id="i1"></div>
 74 
 75     <!--class选择器，以“.”来定位-->
 76     <div class="c1"></div>
 77 
 78     <!--标签选择器：当前html页面下的所有div都会受到影响-->
 79     <div>标签选择器</div>
 80 
 81     <!--标签层级选择器-->
 82     <div>
 83         <span>大师兄</span>
 84     </div>
 85 
 86     <!--class层级选择器-->
 87     <div class="c2">
 88         <span>大师兄</span>
 89     </div>
 90 
 91     <!--id层级选择器-->
 92     <div id="i2">
 93         <span>大师兄</span>
 94             如果行内标签没有内容，不可以对它进行任何的css装饰
 95     </div>
 96 
 97     <!--id组合选择器-->
 98     <div id="i3">aaa</div><br>
 99     <div id="i4">bbb</div><br>
100     <div id="i5">ccc</div>
101 
102     <!--class组合选择器-->
103     <div class="c3">aaa</div><br>
104     <div class="c4">bbb</div><br>
105     <div class="c5">ccc</div>
106 
107     <!--属性选择器-->
108     <div name="dsx">大师兄</div>
109 </body>
110 </html>

二、引入css样式的三种方式

1、在head标签当中写一个style标签，在style标签里面可以进行css样式的编写

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             height: 100px;
 9             width: 100px;
10             border: 1px red solid;
11             text-align: center;
12             line-height: 100px
13         }
14     </style>
15 </head>
16 <body>
17 
18     <div class="c1">c1</div>
19 
20 </body>
21 </html>

2、在标签中直接增加style属性，在style属性当中增加增加css样式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div class="c1" style="height: 100px; 100px;border: 1px red solid;font-size: xx-large;font-weight: bolder;">c1</div>
 9 
10     <!--class选择器，通过色差使文字不显示-->
11     <div class="c2" style="height: 100px; 100px;border: 1px red solid;color: white">双鱼座</div>
12         <!--color: white：控制文字颜色-->
13 </body>
14 </html>

3、通过link标签引入写好的css样式表

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="black.css">
 7     <link rel="stylesheet" href="green.css">
 8 </head>
 9 <body>
10     <div class="c1">c1</div>
11 </body>
12 </html>

文件black.css中的内容

1 .c1{
2     height: 100px;
3     width: 100px;
4     background-color: black;
5 }

文件green.css中的内容

1 .c1{
2     height: 100px;
3     width: 100px;
4     background-color: green;
5 }

三、引入css的优先级

标签中style优先级最高，其次在代码中就近找，也就是从下往上找

 1 <!--标签中style优先级最高，其次在代码中就近找，也就是从下往上找-->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <link rel="stylesheet" href="black.css">
 8     <style>
 9         .c1{
10             height: 100px;
11             width: 100px;
12             background-color: pink;
13         }
14     </style>
15     <link rel="stylesheet" href="green.css">
16 </head>
17 <body>
18     <!--以标签为基准，由下到上依次查找-->
19     <div class="c1" style="height: 100px; 100px;background-color: blue"></div>
20 </body>
21 </html>

四、css属性

height、width、font-size、font-weight、text-align、line-height、float、display、margin、padding等

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <link rel="stylesheet" href="black.css">
  7     <style>
  8         .c1{
  9             height: 100px;
 10             width: 100px;
 11             border: 1px red solid;
 12             text-align: center;
 13             line-height: 100px
 14         }
 15         /*鼠标悬浮到框内则展示背景色和文字*/
 16         .c2:hover{
 17             background-color: red;
 18             color: black;
 19         }
 20     </style>
 21     <link rel="stylesheet" href="green.css">
 22 </head>
 23 <body style="margin: 0 auto">
 24     <!--style="margin: 0 auto":body标签中加上这项，将外边距设为0-->
 25 
 26     <div class="c1">c1</div>
 27 
 28     <div style="height: 100px; 100px;border: 1px red solid;font-size: xx-large;font-weight: bolder;">大师兄</div>
 29         <!--height: 100px：边框高度-->
 30         <!-- 100px：边框宽度-->
 31         <!--border: 1px red solid：1像素 红色边框 实线-->
 32         <!--font-size:larger：大字体-->
 33         <!--font-weight: bolder：字体加粗-->
 34     
 35     <div style="height: 100px; 100px;border: 1px red solid;text-align: center;line-height: 100px;">双鱼座</div>
 36         <!--text-align: center：水平居中-->
 37         <!--line-height: 100px：这个值与边框的height属性的值一样代表垂直居中-->
 38 
 39     <!-- float 浮动 块级标签浮动后 相当于分层 都像左浮动 块级标签会便在一行 如果超过宽度超过100则会换行-->
 40     <div style="height: 48px; 100px;border: 1px red solid;float: left">双鱼座</div>
 41     <div style="height: 48px; 100px;border: 1px black solid;float: left">大师兄</div>
 42         <!--float: left：两个div都向左飘，相当于并排在一起了-->
 43 
 44     <!--块级标签转换为行内标签-->
 45     <div style="height: 100px; 100px;background-color: red;display: inline">aa</div>
 46         <!--display: inline：把块级标签变为了行内标签，但行内标签不能使用宽、高、内边距、外边距等特性-->
 47 
 48     <!--块级标签转换为行内标签-->
 49     <div style="height: 100px; 100px;background-color: red;display: inline-block">aa</div>
 50         <!--display: inline-block：把块级标签变为了行内标签，又能使用宽、高、内边距、外边距等特性-->
 51 
 52     <!--行内标签转换成块级标签-->
 53     <span style="height: 100px; 100px;background-color: red;display: inline-block">bb</span>
 54         <!--display: inline-block：使用这个以后块级标签也不占整行-->
 55 
 56     <!--外边距-->
 57     <div style="height: 100px; 100%;border: 1px red solid;">
 58         <div style="height: 40px; 100%;background-color: red;margin-top: 30px"></div>
 59             <!--margin-top: 30px:外边距-->
 60     </div>
 61         <!--height:只能是数字px-->
 62         <!--width：可以写百分比-->
 63 
 64     <!--内边距-->
 65     <div style="height: 100px; 100%;border: 1px red solid;">
 66         <div style="height: 40px; 100%;background-color: blue;padding-top: 30px"></div>
 67             <!--padding-top: 30px：内边距-->
 68     </div>
 69 
 70     <!--鼠标悬浮的小手-->
 71     <input type="button" value="提交" style="cursor: pointer">
 72         <!--style="cursor: pointer"：点击按钮时箭头变成小手-->
 73 
 74     <!--class选择器，通过色差使文字不显示-->
 75     <div class="c2" style="height: 100px; 100px;border: 1px red solid;color: white">双鱼座</div>
 76         <!--color: white：控制文字颜色-->
 77 
 78     <!--position分层-->
 79     <div style=";background-color: greenyellow;position: fixed;top: 0;left: 0;right: 0;height: 48px"></div>
 80         <!--position: fixed：固定在窗口某个位置不会动-->
 81     <div style="height: 10000px; 100%;border: 1px red solid;margin-top: 48px">双鱼座</div>
 82 
 83     <!--position组合定位-->
 84     <!--position: relative与position: absolute连用-->
 85     <div style="height: 100px; 100px;border: 1px red solid;position: relative">
 86         <div style="height: 20px; 20px;background-color: red;position: absolute;bottom: 0;right: 0"></div>
 87             <!--bottom: 0;right: 0：右下角-->
 88         <div style="height: 20px; 20px;background-color: blue;position: absolute;bottom: 0;left: 0"></div>
 89             <!--bottom: 0;left: 0：左下角-->
 90         <div style="height: 20px; 20px;background-color: pink;position: absolute;top: 0;right: 0"></div>
 91             <!--top: 0;right: 0：右上角-->
 92         <div style="height: 20px; 20px;background-color: green;position: absolute;top: 0;left: 0"></div>
 93             <!--top: 0;left: 0：左上角-->
 94     </div>
 95 
 96     <!--position分层排序-->
 97     <div style="height: 200px; 200px;border: 1px red solid;position: relative">
 98         <div style="height: 200px; 200px;background-color: red;position: absolute;z-index:999"></div>
 99             <!--z-index:999：最高层-->
100         <div style="height: 200px; 200px;background-color: blue;position: absolute;z-index:888"></div>
101             <!--z-index的值小于等于888，显示为蓝色-->
102     </div>
103 
104     <!--overflow-->
105     <div style="height: 100px; 100px;border: 2px red solid;overflow: hidden">
106         <!--overflow: hidden:超过div的范围则隐藏掉-->
107         <img src="http://ui.imdsx.cn/static/image/dsx.jpg">
108     </div>
109 
110     <div style="height: 800px; 800px;border: 2px red solid;overflow: scroll">
111         <!--overflow: scroll:超过div的范围则加滚动条-->
112         <!--overflow: scroll:如果div范围大于图片也会加滚动条-->
113         <img src="http://ui.imdsx.cn/static/image/dsx.jpg">
114     </div>
115 
116     <div style="height: 800px; 800px;border: 2px red solid;overflow: auto">
117         <!--overflow: auto:超过div的范围则加滚动条-->
118         <!--overflow: scroll:如果div范围大于图片不会加滚动条-->
119         <img src="http://ui.imdsx.cn/static/image/dsx.jpg">
120     </div>
121 
122     <!--background-->
123     <div style="height: 500px; 500px;border: 2px red solid;background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat: no-repeat"></div>
124         <!--background-image: url:div大小大于图片大小，会出现堆叠现象-->
125         <!--background-repeat: no-repeat：div大小大于图片大小也不会出现堆叠现象-->
126 
127     <div style="height: 500px; 500px;border: 2px red solid;background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat: repeat-x"></div>
128         <!--background-repeat: repeat-x:横向堆叠-->
129 
130     <div style="height: 500px; 500px;border: 2px red solid;background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat: repeat-y"></div>
131         <!--background-repeat: repeat-x:纵向堆叠-->
132 
133     <div style="height: 20px; 20px;border: 1px red solid;background-image: url('http://ui.imdsx.cn/static/image/icon.png');background-repeat: no-repeat;background-position: 0 0"></div>
134         <!--background-position: 0 0：第一个值改变可以左右移动图片（x轴），第二个值上下移动图片（y轴）-->
135 </body>
136 </html>

相关阅读:
第五次程序4+（结对开发）
敏捷开发方法综述
 第四周学习进度情况
 第四次程序（结对开发）
第三周学习进度情况
 第三次程序-四则运算（结对开发）
RIGHT-BICEP测试第二次程序
 敏捷开发方法综述
 最大子数组之和 2
《构建之法》阅读笔记2
原文地址：https://www.cnblogs.com/L-Test/p/9308070.html