【前端】CSS基础（学习笔记）

一、简介

1、HTML局限性

HTML只关注内容的语义，但是丑！

2、CSS概要

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。

CSS 是也是一种标记语言

CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式( CSS ) 相分离

3、CSS语法规范

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

h1 {
    color: red;
    font-size: 25px;
}

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;”进行区分

所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方。

<head>
    <style>
        h4 {
            color: blue;
            font-size: 100px;
        }
    </style>
</head>

4、CSS代码风格

样式格式书写：展开格式

样式大小写风格：样式选择器，属性名，属性值关键字全部使用小写字母

样式空格风格：属性值前面，冒号后面，保留一个空格、选择器（标签）和大括号中间保留空格

二、基础选择器

1、选择器作用

区分并选择标签

2、选择器分类

选择器分为基础选择器和复合选择器两个大类

基础选择器是由单个选择器组成的

3、标签选择器

标签选择器是用 HTML 标签名称作为选择器，按标签名称分类

h1 {
    color: red;
}

4、类选择器

类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。一个标签可以有多个名字，空格隔开。

<div class=‘red’> 变红色 </div>

.red {
    color: red;
}

样式点定义，结构类调用。一个或多个，开发最常用

5、id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。

<div id=‘red’> 变红色 </div>

#red {
    color: red;
}

id 属性只能在每个 HTML 文档中出现一次。

样式#定义，结构id调用，只能调用一次，别人切勿使用

6、通配符选择器

通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

* {
    margin: 0;
    padding: 0;
}

三、字体属性

1、字体系列

CSS 使用 font-family 属性定义文本的字体系列

div {
    font-family: Arial,"Microsoft Yahei", "微软雅黑";
}

各种字体之间必须使用英文状态下的逗号隔开

一般情况下,如果有空格隔开的多个单词组成的字体，加引号。

尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

2、字体大小

CSS 使用 font-size 属性定义字体大小。

px（像素）大小是我们网页的最常用的单位

谷歌浏览器默认的文字大小为16px。不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小（可以给 body 指定整个页面文字的大小）

3、字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

属性值	描述
normal	默认值
bold	粗体
100~900	normal：400；bold：700

4、文字样式

CSS 使用 font-style 属性设置文本的风格

属性值	描述
normal	默认值
italic	斜体

很少使用斜体，反而要给em,i改为不倾斜

5、字体复合属性

字体属性可以把以上文字样式综合来写, 这样可以更节约代码

body { 
    font: [font-style] [font-weight] font-size[/line-height] font-family;
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开

不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用。

四、文本属性

1、文本颜色

color 属性用于定义文本的颜色。

表示方式	属性值
预定义的颜色	red、green、blue、pink
十六进制	#FF0000
RGB代码	rgb(255,0,0) 或者 rgb(100%,100%,100%)

开发中最常用的是十六进制

2、对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式。

属性值	解释
left	左对齐（默认）
right	右对齐
center	居中对齐

3、装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

属性值	描述
none	无（默认）
underline	下划线
overline	上划线（？）
line-through	删除线

4、文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

em 是一个相对单位，就是当前元素（font-size）1 个文字的大小，如果当前元素没有设置大小，则会按照父元素的 1 个文字大小

div { 
    text-indent: 10px;
}

p { 
    text-indent: 2em;
}

5、行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.

五、CSS引入方式

1、内部样式表

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中

<style>
h4 {
    color: blue;
    font-size: 100px;
}
</style>

<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中。代码结构清晰，但是并没有实现结构与样式完全分离

使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是练习时常用的方式

2、行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

style 其实就是标签的属性，在双引号中间，写法要符合 CSS 规范

可以控制当前的标签设置样式

由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用使用行内样式表设定 CSS，通常也被称为行内式引入

3、外部样式表

新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
在 HTML 页面中，使用<link> 标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

使用外部样式表设定 CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式

六、浏览器调试工具

Ctrl+滚轮可以放大开发者工具代码大小。

左边是 HTML 元素结构，右边是 CSS 样式。

右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。

Ctrl + 0 复原浏览器大小。

如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。

如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。

七、复合选择器

1、后代选择器

后代选择器：选择父元素里面子元素

写法：把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */

元素1 和元素2 中间用空格隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和元素2 可以是任意基础选择器

2、子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。（亲儿子元素）

div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

元素1 和元素2 中间用大于号隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子

3、并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明。通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */

元素1 和元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

4、链接伪类选择器

伪类选择器用于向某些选择器添加特殊的效果

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

链接伪类选择器注意事项

为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
记忆法：love hate 或者 lv 包包 hao 。
因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

/* a 是标签选择器 所有的链接 */ 
a { 
     color: gray;
}

/* :hover 是链接伪类选择器 鼠标经过 */
a:hover { 
    color: red; 
    /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}

6、`:focus` 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素

input:focus { 
    background-color:yellow;
}

八、元素显示模式

1、块元素

常见的块元素有h1~h6、p、div、ul、ol、li等，其中 div 标签是最典型的块元素

特点

比较霸道，自己独占一行。
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内或者块级元素。

注意

文字类的元素内不能使用块级元素
p 标签主要用于存放文字，因此 p 里面不能放块级元素，特别是不能放div
h1~h6等都是文字类块级标签，里面也不能放其他块级元素

2、行内元素

常见的行内元素有 a、strong、b、em、i、del、s、ins、u、span等，其中span标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

特点

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意

链接里面不能再放链接
特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

3、行内块元素

在行内元素中有几个特殊的标签： <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。称它们为行内块元素。

特点

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

4、元素显示模式转换

一个模式的元素需要另外一种模式的特性

转换为块元素：display:block;

转换为行内元素：display:inline;

转换为行内块：display: inline-block;

5、单行文字垂直居中

让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中

九、背景

1、背景颜色

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

p {
    background-color: pink;
}

div {
	background-color: transparent;
}

2、背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置

div {
	background-image : none;
}

p {
	background-image : url(https://rexhao.work/medias/logo.png);
}

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

3、背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

参数	作用
repeat	背景图像在纵向和横向上平铺（默认）
no-repeat	背景图便不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

4、背景图片位置

利用 background-position 属性可以改变图片在背景中的位置

background-position: x y;

参数代表的意思是：x 坐标和 y 坐标。可以使用方位名词或者精确单位

参数	说明
length	百分数 \| 长度值
position	top \| center \| bottom \| left \|right 方位名词

参数是方位名词
1. 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
2. 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
参数是精确单位
1. 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
2. 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
参数是混合单位
1. 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y

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

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动，后期可以制作视差滚动的效果

background-attachment : scroll | fixed

参数	作用
scroll	背景图随着对象滚动
fixed	背景图像固定

6、背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中，节约代码量。

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

background: transparent url(image.jpg) repeat-y fixed top;

7、背景色半透明

CSS3 为我们提供了背景颜色半透明的效果。

background: rgba(0, 0, 0, 0.3);

最后一个参数是 alpha 透明度，取值范围在 0~1之间
习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
背景半透明是指盒子背景半透明，盒子的内容不受影响
CSS3 新增属性， IE9+ 版本浏览器才支持的。但现在实际开发，我们不太关注兼容性写法了，可以放心使用

十、CSS三大特性

1、层叠性

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

相同优先级，后来居上

2、继承性

子标签会维承父标签的某些样式，如文本颜色和字号。（子承父业）

text-,font-,line-,color属性

行高的继承

body {
	font: 12px/1.5 Microsoft YaHei;
}

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

如果子元素没有设置行高：继承父元素的行高为 1.5，此时子元素的行高是：当前子元素的文字大小 * 1.5

优势就是里面的子元素可以根据自己文字大小自动调整行高

3、优先级

选择器	权重
继承、*	0,0,0,0
元素选择器	0,0,0,1
类选择器、伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内元素	1,0,0,0
`!important`	无穷大

权重是有4组数字组成，但是不会有进位。
等级判断从左向右，如果某一位数值相同，则判斯下一位数值
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。