Web前端——css

1.什么是css

CSS是指层叠样式表 (Cascading Style Sheets)，通过引入样式表，从而极大的提高了工作效率。

---

2.作用

html：搭建网页的结构，承载页面的数据
css:美化页面，修饰标签 (亚洲4大邪术)

---

3.基础语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

css的使用方式
每个样式属性之间用分号连接，例：
color:red; 字体颜色
background-color:yellow; 背景颜色
font-size: 50px; 字号大小

①行内样式，内联样式

在元素中，写style属性，在style属性中编写样式

<元素 style="样式声明;样式声明....."></元素>

<p style="color:red;background-color:yellow;font-size: 50px;">

只对当前元素生效，代码没有可重用性
内联样式默认优先级最高
内联样式只在学习和测试中使用，项目基本不用

②内部样式

在head标签中，编写style标签，在style标签内部，编写属性
选择器{样式声明;样式声明…}
选择器：定义页面中使用这个样式的元素条件

p{
 color:purple;
 background-color: pink;
}

只能在当前页面中使用，项目中使用较少，
学习和测试使用较多

③外部样式

创建一个.css文件，在html中的head标签里，使用link引入

<link rel="stylesheet" href="my.css"/>

必须有rel=“stylesheet”，代表当前文件和引入文件的关系
项目中大量使用
 

---

4.选择器

1.通用选择器
{样式声明} （匹配所有元素，但是的效率非常低，不建议使用）
例：*{margin:0；padding:0}

2.元素选择器
标签关键字{样式声明;}
div{} p{}

3.ID选择器
<元素 id=“id值”>
#id值{样式声明}
id在一个页面中不能重复，所有id选择器只被一个元素应用

4.类选择器
使用.定义样式，哪个元素想用，用class都能调用
<元素 class=“类名”>
.类名{样式声明}

类选择器的其它用法

①.多类选择器

<元素 class="类名1 类名2 类名3.......">

②.分类选择器

元素选择器.类选择器{样式声明}
.类选择器.类选择器{样式声明}
.tooltip.show{}

③.类名的定义规范

①必须有.
②不能以数字开头
③只能包含- 或者_
v④尽量见名知意

5.群组选择器
选择器1,选择器2,选择器3.....{样式声明} #d1,.c1,div,p.c2{color:red;background-color:yellow}

6.后代选择器
通过元素的后代关系，来匹配元素
后代关系：一层嵌套或者多于一层嵌套称为后代
选择器1 选择器2 选择器3{样式声明}

7.子代选择器
通过元素子代关系，来匹配元素
子代关系，一层嵌套为子代
选择器1>选择器2>选择器3{样式声明}
子代和后代选择器可以混合使用
#d1>p span{color:red;}

8.伪类选择器
匹配元素在某一个状态时的样式
只适用于a标签的伪类
①未被访问:link a:link{color:red}
②已被访问:visited a:visited{color:green}
所有元素都能用的伪类
:hover 鼠标悬停的状态
:active 激活状态
:focus 元素获取焦点时的状态（input button）

9. 选择器权值
选择器权值，代表选择器的重要程度
重要程度高，优先显示
!import >1000
内联样式 1000
id选择器 100
类选择器 10
伪类选择器 10
元素选择器 1
通用选择器 0
继承的样式 无
权值的特点

当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加值最大的显示
有多个选择器的权值一样大，按照就近原则
添加了!important当前css样式直接获取最高优先级
群组选择器，不相加，个算个的
选择器权值的计算，不会超过本选择器权值的最大数量级
 

---

5.CSS设置背景(background)

背景颜色 background-color
背景图片 background-image
背景重复 background-repeat:repeat-x/repeat-y
背景位置 background-position:bottom/left/top/right/center
背景关联 background-attachment:fixed/scroll

综合写法：
.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}

---

6.CSS设置文本格式

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

文本缩进 ：Text-indent:2em
文本对齐方式：Text-align:left/right/center/ justify
文本修饰：Text-decoration:underline/line-through/overline/none
字符间距：Word-spacing:px/em 英文单词之间的间隔；
Letter-spacing:px/em汉字和英文字母之间的间隔；
文本转换：Text-transform:uppercase/lowercase/ capitalize
行与行间距：Line-height:px/%
垂直对齐图像： vertical-align：text-top/text-bottom
文本阴影：text-shadow:水平偏移，垂直偏移 颜色

---

7.字体

字体类型:font-family:”sans-serif”;
字体样式:font-style:normal ;
字体大小:font-size:20px/3.75em/100%;默认大小为16px,字体为宋体
字体加粗:font-weight:normal;
字体的转变:font-variant:normal/smallcaps;