CSS学习笔记（pink）

1、CSS简介

• 层叠样式表，也称CSS样式表，是一种标记语言
• CSS最大价值:由HTML专注去做结构呈现,样式交给CSS ,即结构(HTML)与样式(CSS)相分离。
  使用场景：美化HTML，布局网页

CSS语法规范：

• 由两个部分组成：选择器（给谁修改样式）+ 一条或者多条声明（修改什么样式）
• 选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式
• 属性和属性值以“键值对”的形式出现
• 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
• 属性和属性值之间用英文";" 分开
• 多个“键值对”之间用英文“:“进行区分

2、CSS基础选择器

作用：选择标签使用
分类：基础选择器和复合选择器

1、标签选择器

用HTML标签做选择器，把某一类标签全部选出
语法

2、类选择器

• 样式点定义，结构类定义，一个或多个，开发最常用
  语法：
  ①类选择器使用"."(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
  ②可以理解为给这个标签起了一个名字,来表示。
  ③长名称或词组可以使用中横线来为选择器命名。
  ④不要使用纯数字、中文等命名,尽量使用英文字母来表示。
  ⑤命名要有意义,尽量使别人-眼就知道这个类名的目的。
  ⑥命名规范:见附件( Web前端开发规范手册.doc )

多类名，一个标签class 属性可以添加多个类，每个类名之间要有空格

3、id选择器

• 样式"#"定义，结构id调用，别人不能使用
• id选择器和类选择器区别
  
• 类选择器( class )好比人的名字，一个人可以有多个名字,同时一个名字也可以被多个人使用。
• id 选择器好比人的身份证号码,全中国是唯一-的 ,不得重复。
• id 选择器和类选择器最大的不同在于使用次数上。
• 类选择器在修改样式中用的最多 ,id选择器-一般用于页面唯一性的元素上,经常和 JavaScript搭配使用。

4、通配符选择器

• 通配符" * " 表示选取页面所有元素

• 通配符选择器不需要调用，自动就给所有的元素使用样式
• 通常在css样式表开头取消所有元素的内外边距

3、CSS字体属性

3.1 字体系列 font-family

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下，如果有空格隔开的多个单词组成的字体加引号.
• 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
• 最常见的几个字体: body {font- family: 'Microsoft YaHei,tahoma,arial,
  ‘Hiragino Sans GB’;}

3.2 字体大小 font-size

• px(像素)大小是我们网页的最常用的单位
• 谷歌浏览器默认的文字大小为16px
• 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小 ,不要默认大小
• 可以给body指定整个页面文字的大小,标题标签比较特殊必须单独设置大小

3.3 字体粗细 font-weight

学会让字体不加粗或者加粗

3.4 文字样式 font-style

注意:平时我们很少给文字加斜体,反而要给斜体标签( em , i)改为不倾斜字体。

3.5 CSS字体属性之复合代码

• 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
• 不需要设置的属性可以省略(取默认值) , 但必须保留font-size和font-family属性,否则font属性将不起作用

4 .CSS文本属性

CSS Text (文本)属性可定义文本的外观,比如文本的颜色、对挤文本、装饰文本、文本缩进、行间距等。

4.1 文本颜色 color

开发中用的最多的16进制

4.2 对齐文本 text-align

4.3 装饰文本 text-decoration

重点记住如何添加下划线?如何删除下划线?

4.4 文本缩进 text-indent

文本的第一行首行缩进多少距离（px或者em）

4.5 行间距 line-height(文字行与行之间距离）

5 .CSS的引入方式

按照CSS样式书写的位置(或者引入的方式) , CSS样式表可以分为三大类:

1.行内样式表(行内式)

• style其实就是标签的属性
• 在双引号中间，写法要符合CSS规范
• 可以控制当前的标签设置样式
• 由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简
• 单样式的时候,可以考虑使用
• 使用行内样式表设定CSS ,通常也被称为行内式引入

2.内部样式表(嵌入式)

• 标签理论上可以放在HTML文档的任何地方,但一般会放在文档的标签中
• 通过此种方式,可以方便控制当前整个页面中的元素样式设置
• 代码结构清晰,但是并没有实现结构与样式完全分离
• 使用内部样式表设定CSS ,通常也被称为嵌入式引入,这种方式是我们练习时常用的方式

3.外部样式表(链接式)

• 实际开发都是外部样式表.适合于样式比较多的情况.核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用.

引入外部样式表分为两步:

• 1.新建一个后缀名为.Css的样式文件,把所有CSS代码都放入此文件中。
• 2.在HTML页面中,使用标签引入这个文件。

6.复合选择器

6.1 分类

1.后代选择器

写法把外层标签写在前面，内层标签写在后面，中间用空格分隔

• 元素1 和 元素2 中间用空格隔开 元素1 是父级，元素2 是子级，最终选择的是元素2

• 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可

• 元素1 和 元素2 可以是任意基础选择器

2.子选择器

只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素

• 元素1 和 元素2 中间用 大于号 隔开

• 元素1 是父级，元素2 是子级，最终选择的是元素2

• 元素2 必须是亲儿子，其孙子、重孙之类都不归他管,你也可以叫他 亲儿子选择器

3.并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式

• 约定语法规则，我们并集选择器喜欢竖着写

• 元素1元素2中间用逗号隔开

• 最后一个元素后面不需要加逗号

4. 伪类选择器

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child

1.链接伪类选择器

• 1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来

• 2.a:visited 选择点击过的(访问过的)链接

• 3.a:hover 选择鼠标经过的那个链接

• 4.a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接
  

• 为了确保生效请按照LVHA顺序声明:link -:visited -:hover -:active(love hate)

• 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

2.:focus 伪类选择器

• :focus 伪类选择器用于选取获得焦点的表单元素。
• 焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

7.CSS 的元素显示模式

1. 什么是元素的显示模式
   元素标签以什么方式进行显示
2. 元素显示模式的分类

1.块元素

常见的块元素有
块元素块级元素的特点：
① 比较霸道，自己独占一行。
② 高度，宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器（父级宽度）的100%
④ 是一个容器及盒子，里面可以放行内或者块级元素。
文字类的元素内不能使用块级元素

2.行内元素

行内元素的特点：
① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他行内元素。
a链接里面不能再放链接,但可以放块级元素

3.行内块元素

行内块元素的特点：
① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

3. 元素显示模式的转换
   特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性比如想要增加链接 <a>的触发范围。
   转换为块元素：display:block;
   转换为行内元素：display:inline;
   转换为行内块：display: inline-block;

8.CSS 背景

背景图片

注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。

背景平铺

背景图片位置

背景图像固定（背景附着）

背景复合写法

背景色半透明

9.CSS 的三大特性

层叠性、继承性、优先级。

1 层叠性（长江后浪推前浪，前浪死在沙滩上）

• 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。
• 层叠性主要解决样式冲突的问题

层叠性原则：

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

• 样式不冲突，不会层叠
  

2 继承性（龙生龙，凤生凤，老鼠生的孩子会打洞）

• 子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
  

• 恰当地使用继承可以简化代码，降低 CSS 样式的复杂性

• 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

• 继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞

1.2.1 行高的继承性

• 行高可以跟单位也可以不跟单位

• 如果子元素没有设置行高，则会继承父元素的行高为 1.5

• 此时子元素的行高是：当前子元素的文字大小 * 1.5

• body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

3 优先级

• 当同一个元素被多个选择器指定，就会有优先级的产生。

• 选择器相同，则执行层叠性

• 选择器不同，则根据选择器权重执行

优先级注意点:

1. 权重是有4组数字组成,但是不会有进位。
2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…
3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值
4. 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为1000, !important 无穷大.
5. 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。