CSS 基础使用

一、CSS介绍

CSS全称为： Cascading Style Sheets ，意为层叠样式表 ，与HTML相辅相成，实现网页的排版布局与样式美化

二、CSS使用方式

1. 行内样式/内联样式

借助于style标签属性，为当前的元素添加样式声明

<标签名 style="样式声明">

CSS样式声明 : 由CSS属性和值组成

例：

style="属性:值;属性:值;"

常用CSS属性 :

• 设置文本颜色 color:red;
• 设置背景颜色 background-color:green;
• 设置字体大小 font-size:32px;

2. 内嵌样式

借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式

示例:

<style>
   	选择器{
   	 	属性:值;
    		属性:值;
   	}
</style>

选择器 : 通过标签名或者某些属性值到页面中选取相应的元素，为其应用样式

示例：

/*标签选择器 : 根据标签名匹配所有的该元素*/  
p{
  color:red;
}

3. 外链样式表

• 创建外部样式表文件 后缀使用.css
• 在HTML文件中使用标签引入外部样式表

<link rel="stylesheet" href="URL" type="text/css">

• 样式表文件中借助选择器匹配元素应用样式

三、样式表特征

1. 层叠性

多组CSS样式共同作用于一个元素

2. 继承性

后代元素可以继承祖先元素中的某些样式

例 : 大部分的文本属性都可以被继承

3. 样式表的优先级

优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。

• 行内样式的优先级最高
• 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
• 浏览器默认样式和继承样式优先级较低

四、CSS 选择器

1. 作用

匹配文档中的某些元素为其应用样式

2. 分类 :

1. 标签选择器

根据标签名匹配文档中所有该元素

语法 :

标签名{
  属性:值;
}

2. id选择器

根据元素的 id 属性值匹配文档中惟一的元素，id具有唯一性，不能重复使用

语法 :

  #id属性值{
  	
  }

注意 :

id属性值自定义,可以由数字，字母，下划线，- 组成，不能以数字开头;

尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示

3. class选择器/类选择器

根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用

语法 :

.class属性值 {
 	
}

特殊用法 :

1. 类选择器与其他选择器结合使用
   注意标签与类选择器结合时,标签在前,类选择器在后
       	例 : a.c1{ }
2. class属性值可以写多个,共同应用类选择器的样式
   例 : 
       	.c1{  }
       	.c2{  }						

<p class="c1 c2"></p>

4. 群组选择器

为一组元素统一设置样式

语法 :

selector1,selector2,selector3{	         
}

5. 后代选择器

匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)

语法 :

selector1 selector2{
}

匹配selector1中所有满足selector2的后代元素

6. 子代选择器

匹配满足选择器的所有直接子元素

语法 :

selector1>selector2{
}

7. 伪类选择器

为元素的不同状态分别设置样式,必须与基础选择器结合使用

分类 :

:link 	 超链接访问前的状态
:visited 超链接访问后的状态
:hover	 鼠标滑过时的状态
:active  鼠标点按不抬起时的状态(激活)
:focus	 焦点状态(文本框被编辑时就称为获取焦点)

使用 :

a:link{
}
a:visited{
}
.c1:hover{ }

注意 :

1. 超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写

:link
:visited
:hover
:active

2. 超链接常用设置 :

a{
	/*统一设置超链接默认样式(不分状态)*/
}
a:hover{
	/*鼠标滑过时改样式*/
}

3. 选择器的优先级

使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高

选择器	权重
标签选择器	1
(伪)类选择器	10
id选择器	100
行内样式	1000

复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和

群组选择器权重以每个选择器单独的权重为准，不进行相加计算

例 :

/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{ /*标签选择器权重为 1 */
 color:red;
}
.c1 a{ /*当前组合选择器权重为 10+1  */
 color:green;
}
#d1>.c2{ /*当前组合选择器权重为 100+10 */
 color:blue;
}

五、标签分类及嵌套

1. 块元素

独占一行,不与元素共行;可以手动设置宽高,默认宽度与与父元素保持一致

例 : body div h1~h6 p ul ol li form, table(默认尺寸由内容决定)

2. 行内元素

可以与其他元素共行显示;不能手动设置宽高,尺寸由内容决定

例 : span label b strong i s u sub sup a

3. 行内块元素

可以与其他元素共行显示,又能手动调整宽高

例 : img input button (表单控件)

4. 嵌套原则

1. 块元素中可以嵌套任意类型的元素
   p元素除外,段落标签只能嵌套行内元素,不能嵌套块元素
2. 行内元素中最好只嵌套行内或行内块元素

六、尺寸单位

• px 像素单位
• % 百分比，参照父元素对应属性的值进行计算
• em 字体尺寸单位，参照父元素的字体大小计算，1em=16px
• rem字体尺寸单位,参照根元素的字体大小计算，1rem=16px

七、颜色单位

• 英文单词：red，green，blue
• rgb(r,g,b) 使用三原色表示，每种颜色取值0~255
• rgba(r,g,b,alpha) 三原色每种取值0_{255，alpha取值0（透明）}1（不透明）
• 十六进制表示：以#为前缀，分为长十六进制和短十六进制。
  • 长十六进制：每两位为一组，代表一种三原色；每位的取值范围0_9，af
    例：red rgb(255,0,0) #ff0000
  • 短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十六进制解析
    例：#000 #fff #f00

八、背景属性

1. 背景颜色

background-color: red;

2. 背景图片相关

1） 设置背景图片

background-image : url("路径");

设置背景图片，指定图片路径，如果路径中出现中文或空格，需要加引号

2） 设置背景图片的重复方式

默认背景图片从元素的左上角显示，如果图片尺寸与元素尺寸不匹配时，会出现以下情况：

1. 如果元素尺寸大于图片尺寸，会自动重复平铺，直至铺满整个元素
2. 如果元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见

background-repeat:repeat/repeat-x/repeat-y/no-repeat

取值 ：
	repeat  默认值，沿水平和垂直方向重复平铺
	repeat-x 沿X轴重复平铺
	repeat-y 沿Y轴重复平铺
	no-repeat 不重复平铺

3） 设置背景图片的显示位置

默认显示在元素左上角

background-position:x y;

取值方式 ：

1. 像素值
	设置背景图片的在元素坐标系中的起点坐标
2. 方位值
	水平 ：left/center/right
	垂直 ：top/center/bottom
	注：如果只设置某一个方向的方位值，另外一个方向默认为center
3. 百分比
	类似于方位值，根据百分比计算背景图片的显示坐标。
	计算方式：
		横坐标 = (元素宽度 - 背景图片宽度）* x%
		纵坐标 = (元素高度 - 背景图片高度) * y %
	特殊值：
		0% 0%     左上角
		100% 100% 右下
		50% 50%   居中显示

精灵图技术 ：为了减少网络请求，可以将所有的小图标拼接在一张图片上，一次网络请求全部得到；借助于background-position进行背景图片位置的调整，实现显示不同的图标

4）设置背景图片的尺寸

background-size:width height;

取值方式 ：

1. 像素值
	1. 500px 500px; 同时指定宽高
	2. 500px;  指定宽度，高度自适应
2. 百分比
	百分比参照元素的尺寸进行计算
	1. 50% 50%; 根据元素宽高,分别计算图片的宽高
	2. 50%; 根据元素宽度计算图片宽高,图片高度等比例缩放

3. 背景属性简写

background:color url("") repeat position;

• 注意 ：

1. 如果需要同时设置以上属性值，遵照相应顺序书写
2. background-size 单独设置

九、文本属性

1. 字体相关

1） 设置字体大小

font-size:20px;

2）设置字体粗细程度

font-weight:normal;

• 取值 ：

normal（默认值）等价于400
bold   (加粗) 等价于700

3）设置斜体

font-style:italic;

4） 设置字体名称

font-family:Arial,"黑体"; 

• 取值 :
  1. 可以指定多个字体名称作为备选字体,使用逗号隔开
  2. 如果字体名称为中文,或者名称中出现了空格,必须使用引号
  例 :

font-family:Arial;
font-family:"黑体","Microsoft YaHei",Arial;

5）字体属性简写

font : style weight size family;

注意 :

1. 如果四个属性值都必须设置,严格按照顺序书写

2. size family 是必填项

2. 文本样式

1）文本颜色

color:red;

2） 文本装饰线

text-decoration:none;

取值 :

underline		下划线
overline		上划线
line-through 	 删除线
none			取消装饰线

3）文本内容的水平对齐方式

text-align:center;

取值 :

left(默认值)	左对齐
center		  居中对齐
right		  右对齐
justify		  两端对齐

4）行高

line-height:30px;

使用 :

文本在当前行中永远垂直居中,可以借助行高调整文本在元素中的垂直显示位置

line-height = height 设置一行文本在元素中垂直居中

line-height > height 文本下移显示

line-height < height 文本靠上显示

特殊 :

line-height可以采用无单位的数值,代表当前字体大小的倍数,以此计算行高

5） font属性简写2

font : size/line-height family;