【前端】CSS基础

3种html中设置css的方法：

head中style标签
head中link标签rel属性、href后跟css文件目录
在需要使用css样式的标签添加style属性

1.CSS选择器

#id值
.class值

  1 1、id选择器
  2  
  3 2、class选择器
  4  
  5 3、标签选择器
  6  
  7 4、层级选择器（空格）
  8  
  9 5、组合选择器（逗号）
 10  
 11 6、属性选择器（中括号）
 12  
 13 <!DOCTYPE html>
 14  
 15 <html lang="en">
 16  
 17 <head>
 18  
 19     <meta charset="UTF-8">
 20  
 21     <title>Title</title>
 22  
 23     <style>
 24  
 25 /* id选择器 --> */
 26  
 27         #i1{
 28  
 29         height: 48px;
 30  
 31         background-color: red;
 32  
 33         }
 34  
 35 /* class选择器 最常用 */
 36  
 37         .div{
 38          
 39         height: 48px;
 40          
 41         background-color: aqua;
 42          
 43         }
 44  
 45 /* 标签选择器 所有标签都适用 */
 46  
 47         span{
 48          
 49         color: red;
 50          
 51         background-color: blue;
 52          
 53         }
 54          
 55  
 56  
 57 /* 层级选择器 组合选择器  span标签下面所有div标签颜色改变 层级通过空格区分*/
 58  
 59         span div{
 60          
 61         color: aqua;
 62          
 63         background-color: red;
 64          
 65         }
 66  
 67  
 68  
 69 /* class层级选择器 c1下面的div标签适用 层级通过空格区分*/
 70  
 71         .c1 div{
 72          
 73         background-color: #336699;
 74          
 75         height: 48px;
 76          
 77 }
 78  
 79  
 80  
 81 /* id层级选择器 i2下面的div标签适用 层级通过空格*/
 82  
 83         #i2 div{
 84          
 85         background-color: black;
 86          
 87         height: 48px;
 88          
 89         }
 90  
 91  
 92  
 93 /* 组合选择器 id z1 z2 z3 共用一套css样式 组合之间用逗号分隔*/
 94  
 95         #z1,#z2,#z3{
 96          
 97         background-color: chocolate;
 98          
 99         height: 48px;
100          
101         }
102          
103  
104  
105 /* 组合选择器 class s1 s2 s3 共用一套css样式 组合 通过逗号*/
106          
107         .s1,.s2,.s3{
108          
109         background-color: darkmagenta;
110          
111         height:48px;
112          
113         }
114  
115  
116  
117 /* 属性选择器 对选择到的标签,在通过属性进行筛选 可以和层级选择器连用*/
118  
119         div[s='dsx']{
120          
121         background-color: darkred;
122          
123         height: 48px;
124          
125         }
126  
127     </style>
128  
129 </head>
130  
131 <body>
132  
133 <!-- css style: 里面的写的就叫做css 每一个样式的间隔用； 全部相同的时候引用class-->
134  
135     <div style="height: 48px;background-color: #6699CC"></div>
136      
137     <div style="height: 48px;background-color: #6699CC"></div>
138      
139     <div style="height: 48px;background-color: #6699CC"></div>
140      
141  
142  
143 <!-- css class引用-->
144  
145     <div id="i1"></div>
146      
147     <div class="div"></div>
148      
149     <div class="div"></div>
150  
151  
152  
153 <!-- 全局标签选择器 -->
154  
155     <span>标签选择器</span>
156  
157  
158  
159 <!-- 层级选择器 组合标签选择器 -->
160  
161     <span>
162      
163         <div>组合标签选择器</div>
164      
165     </span>
166  
167  
168  
169 <!--层级选择器 class选择器下的div标签 -->
170  
171     <div class="c1">
172      
173         <div></div>
174      
175     </div>
176  
177  
178  
179 <!--层级选择器 id选择器下的div标签-->
180  
181     <div id="i2">
182      
183         <div></div>
184      
185     </div>
186  
187  
188  
189 <!-- id组合选择器 -->
190  
191     <div id="z1"></div>
192      
193     <div id="z2"></div>
194      
195     <div id="z3"></div>
196  
197  
198  
199 <!-- class组合选择器 -->
200  
201     <div class="s1"></div>
202      
203     <div class="s2"></div>
204      
205     <div class="s3"></div>
206  
207  
208  
209 <!-- 属性选择器 -->
210  
211     <div s="dsx"></div>
212      
213     <div name="nn"></div>
214  
215 </body>
216  
217 </html>

2.CSS优先级

由内到外由近到远

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <!--第三种引入css样式表-->
 8     <link rel="stylesheet" href="s.css">
 9 
10     <!--head中style是第一处写css样式的地方-->
11     <style>
12         .c1{
13             background-color: red;
14         }
15     </style>
16 </head>
17 <body>
18     <!--第二种通过属性的方式对标签增加css样式-->
19     <div class="c1" style="background-color: black">1</div>
20     <!--优先级-->
21     <!--由内而外 由近到远-->
22 
23 </body>
24 </html>

优先级如下

3.常见属性

边框设置如border
文字大小、粗细、浮动等
display display:inline把块级标签变为行内标签；display:inline-block既是行内，又是块。不会让div沾满整行。同时还会对整个矩形实现样式；display:block行内转换为块
外边距、内边距 margin-top外边距；padding-top内边距
鼠标
图片 overflow、background-repeat（no-repeat不重复堆叠显示;repeat-x横向堆叠;repeat-y纵向堆叠）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7     </style>
 8 </head>
 9 <body>
10     <!--font-size 大小 font-weight 粗细-->
11     <div style="font-size: xx-large;font-weight: bolder">金牛座</div>
12 
13     <!--浮动-->
14     <div class="f1" style="background-color: black">没有float</div>
15     <div class="f1" style="background-color: green;float: right">float元素的浮动</div>
16 
17     <!--宽度可以使用百分比的方式 高度 不可以 写百分比-->
18     <div style=" 30%;height: 48px;background-color:red"></div>
19 
20     <!--display 可以让标签在行内 和 块级之间 自由转换
21     块转行内display: inline 显示为内联元素，元素前后没有换行符; 
22     行内转块display: block 显示为块级元素，此元素前后会带有换行符;
23     即是块 又是 行内display:inline-block;
24     -->
25     <div style="display: inline;">金牛座inline</div>
26     <span style="display: block;">金牛座block</span>
27     
28     <!--行内标签不可以应用 宽、高 外边距 内边距的样式-->
29     <span style=" 100px;height: 100px">123</span>
30     <span style="background-color: red;display:inline-block; 100px;height: 100px;">456</span>
31     <div style="display:none;border:1px red solid;100px;height: 100px;">789</div>
32 
33     <!--外边距
34     不改变自身，针对外侧进行像素移动 margin、margin-bottom、margin-left、margin-right、margin-top
35     -->
36     <div style=" 100%;height: 100px;border: 1px red solid">
37         <div style="margin-top:30px; 100%;height: 48px;background-color: blue"></div>
38     </div>
39 
40     <!--内边距
41     改变自身 padding、padding-bottom、padding-left、padding-right、padding-top
42     -->
43     <div style=" 100%;height: 100px;border: 1px red solid">
44         <div style="padding-top:30px; 100%;height: 48px;background-color: blue"></div>
45     </div>
46 
47     <!-- cursor 光标样式 -->
48     <input type="button" value="登录" style="cursor: pointer">
49    
50     <!--overflow滚动条
51     overflow: hidden 当图片或内容大于外层div时，自动 截取左上角图片
52     overflow: auto 当内容或图片小于外层div则自动隐藏滚动条
53     overflow: scroll 无论大小 都在增加滚动条
54     -->
55 
56     <div style="overflow: scroll;border: 1px black solid; 200px;height: 200px">
57         <img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg">
58     </div>
59     <div style="overflow: auto;border: 1px black solid; 200px;height: 200px">
60         <img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg">
61     </div>
62         <div style="overflow: hidden;border: 1px black solid; 200px;height: 200px">
63         <img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg">
64     </div>
65 
66     <!-- background-repeat 设置是否及如何重复背景图像 -->
67     <div style="background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat:repeat-y; 200px;height: 200px;border: 1px black solid"></div>
68     <!--background-position 属性设置背景图像的起始位置 -->
69     <div style="background-position: 1px 1px;background-repeat: no-repeat;background-image: url('http://ui.imdsx.cn/static/image/icon.png'); 20px;height: 20px;border: 1px red solid;"></div>
70 
71 </body>
72 </html>

分层及层次分级

postion分层

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。不会随浏览器窗口的改变而改变。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。定位的层相对于离他最近的父元素。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             height: 48px;
 9             background-color: green;
10             position: fixed;
11             top:0;
12             left: 0;
13             right: 0;
14         }
15     </style>
16 </head>
17 
18 <!--postion 分层 fixed 绝对定位-->
19 <!--position: fixed 绝对定位 相对于浏览器窗口进行定位，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定-->
20 <!-- margin 外边距 top right bottom left -->
21 <body style="margin: 0">
22     <div class="c1">position: fixed</div>
23     <div style="background-color: black;height: 48px; 48px;position: fixed;right: 0;bottom: 0;"></div>
24     <!-- margin-top 上外边距 -->
25     <div style="margin-top:48px;height: 100px; 100%;border: 1px red solid;background-color: pink">
26         金牛座 真厉害
27     </div>
28     <!--position：absolute 绝对定位 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定，不会随浏览器的窗口变化-->
29     <!--position：relative 相对定位 定位的层总是相对于其最近的父元素，对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素-->
30     <div style="position: relative;500px;height:500px;border:1px black solid;">
31         <div style="position: absolute; 100px;height: 100px;background-color: red"></div>
32         <div style="position: absolute; 100px;height: 100px;background-color: black"></div>
33         <div style="position: absolute; 100px;height: 100px;background-color: blue"></div>
34         <div style="right: 0;bottom:0;position: absolute; 100px;height: 100px;background-color: pink"></div>
35     </div>
36     <!--z-index 层次分级，数值大的显示在上层-->
37     <div style="position: relative; 200px;height: 200px;border: 1px red solid">
38         <div style="z-index: 10;position: absolute; 200px;height: 200px;background-color: red"></div>
39         <div style="z-index: 9;position: absolute; 200px;height: 200px;background-color: blue"></div>
40     </div>
41 
42 </body>
43 </html>

4.快速查看标签、id、类

Chrome查看标签、id、class

标签名#id值.class值