css

CSS

CSS（英⽂全称：Cascading Style Sheets）层叠样式表, 是⼀种⽤来表现HTML（标准通⽤标记语⾔的⼀ 个应⽤）或XML（标准通⽤标记语⾔的⼀个⼦集）等⽂件样式的计算机语⾔。

基本语法

​ CSS 样式由选择器和⼀条或多条以分号隔开的样式声明组成。每条声明的样式包含着⼀个 CSS属性和属性值。

选择器名 { 

 属性 : 属性值; 

 ...... 

}
div { 

 background-color : red; 

}

注意：

1. css声明要以分号;结束，声明以{}括起来

2. 建议⼀⾏书写⼀个属性

3. 若值为若⼲单词，则要给值加引号，如 font-family: “agency fb”;

css的使用

行内式

​ ⾏内样式将样式定义在具体html元素的style属性中。以⾏内式写的CSS耦合度⾼，只适⽤于当前元素， 在设定某个元素的样式时⽐较常⽤。

<p style="color:red;font-size:50px;">这是⼀段⽂本</p>

嵌入式

​ 嵌⼊式通过在html⻚⾯内容开辟⼀段属于css的代码区域，通常做法为在 head 标签中嵌套 style标签， 在 style 中通过选择器的⽅式调⽤指定的元素并设置相关 CSS。

<style type="text/css">p {color: blue;font-size: 40px;}</style>

外联式

​ 在实际开发当中，很多时候都使⽤引⼊外联样式⽂件，这种形式可以使html⻚⾯更加清晰，⽽且可以 达到更好的重⽤效果。

css文件代码:

p { 

 color: green; 

 font-size: 30px; 

}

html引入代码:

<link rel="stylesheet" type="text/css" href="文件名">

css选择器

基本选择器

通用选择器

*{…}

元素选择器

元素名称 {…}

ID选择器

#id属性值{…}

类选择器

.class属性值{…}

分组选择器

选择器1,选择器2,…{…}

组合选择器

后代选择器

.food li { 

 border: 1px solid red; 

}

<h1>⻝物</h1> 
<ul class="food"> 
​			 <li>⽔果 				
    			<ul>
​						 <li>⾹蕉</li>  						
                    	 <li>苹果</li> 
​						 <li>梨</li> 
​				</ul> 
​			 </li> 
​			 <li>蔬菜 
​					 <ul> 
​						 <li>⽩菜</li> 
​				 		 <li>油菜</li> 
​						 <li>卷⼼菜</li>  					
    				</ul> 
​		 </li> 
</ul>

子元素选择器

⽤于选择指定标签元素的所有第⼀代⼦元素，以⼤于号分隔

选择器1 > 选择器2 {

…

}

相邻兄弟选择器

可选择紧接在另⼀元素后的元素，且⼆者有相同⽗元素。以加号分隔

选择器1 + 选择器2 {

…

}

普通兄弟选择器

选择紧接在另⼀个元素后的所有元素，⽽且⼆者有相同的⽗元素，以波浪线分隔

选择器1 ~ 选择器2 {

…

}

css常用属性设置

背景

background-color 设置背景颜色

background-image 设置元素的背景图像，默认情况下，背景图像进⾏平铺重复显示，以覆盖整个元素实体。

background-repeat 设置是否及如何重复背景图像 一般情况: no-repeat(不平铺)

⽂本

color 颜色

text-align 对齐方式 center（居中），left（左对⻬），right（右对⻬）

text-decoration

规定添加到⽂本的修饰属性值：none(关闭所有装饰)、underline(下划线)、overline(上划线)、line-through(中划线)

text-indent 设置⽂本⾸⾏缩进

字体

font-family

⽂本字体，该属性设置⽂本的字体。

​ font-family属性应该设置⼏个字体名称作为⼀种"后备"机制，如果浏览器不⽀持第⼀种字体，他将尝试 下⼀种字体，所以尽量将不常⻅的字体靠前，将最常⻅的字体放置在最后，作为替补。

font-size 文本大小

font-style 字体⻛格,该属性最常⽤于规定斜体⽂本. 属性值：normal、italic、oblique

1）normal：⽂本正常显示；

2）italic：⽂本斜体显示；

3）oblique：⽂本倾斜显示，oblique是将⽂字强制倾斜。

font-weight 字体加粗，该属性设置⽂本的粗细。

100 ~ 900：为字体指定了 9 级加粗度。如果⼀个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别。

对齐方式

text-align left right center justify inherit(继承父元素的 text-align 属性值)

dispaly display 属性规定元素应该⽣成的框的类型。这个属性⽤于定义建⽴布局时元素⽣成的显示框类型。

浮动 float的属性值有none、left、right。

盒子模型

border、padding、margin三个属性构成了盒⼦模型。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NTkfZAaq-1596339705792)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\1596339230191.png)]

boder: 设置所有的边框属性

可同时设置边框的宽度、样式、颜⾊

table, th, td { 

 border: 1px solid black; 

} 

table { 

 width:100%; height:50px; 

}

使⽤border-width、border-style、border-color单独设置

table,td { 

 border-width: 1px; 

 border-style: dotted; 

 border-color: green; 

}

border-style的属性

dotted 点线边框

dashed 虚线边框

solid 实线边框

double 双实线边框

groove 3D沟槽边框

ridge 3D脊边框

inset 3D嵌入框

outset 3D突出框

border-collapse

设置是否将表格边框折叠为单⼀边框。

属性值：separate（默认，单元格边框独⽴）、collapse（单元格边框合并）

table { 

 border-collapse : collapse; 

}

padding

设置元素所有内边距的宽度，或者设置各边上内边距的宽度。

如果在表的内容中控制⽂本到边框的内边距，使⽤td和th元素的填充属性：

td { 

 padding:15px; 

}

单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right

默认顺序: 上右下左

注意：通过padding属性设置元素内边距时，会使元素变形。若不想影响格式效果，可以⽤margin属性设置元素外边距。

margin

设置⼀个元素所有外边距的宽度，或者设置各边上外边距的宽度。

p.margin { 

 margin: 2px 4px 3px 4px; 

}

性：

td { 

 padding:15px; 

}

单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right

默认顺序: 上右下左

注意：通过padding属性设置元素内边距时，会使元素变形。若不想影响格式效果，可以⽤margin属性设置元素外边距。

margin

设置⼀个元素所有外边距的宽度，或者设置各边上外边距的宽度。

p.margin { 

 margin: 2px 4px 3px 4px; 

}

单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right