HTML学习笔记之CSS（CSS基础篇(部分)）

HTML学习笔记之CSS（CSS基础篇(部分)）

---

CSS简介（备注：一个标签还有很多能用的属性，这里只讲常用的，可以下去自行研究）

那在我们学习HTML的过程中，CSS也是必不可少的，可以说是两者相辅相成，那什么叫CSS呢?
CSS简单理解可以理解为是一种选择器，比如一件事情要做，是要做对还是做错呢？ 那这个过程就是选择，在CSS中也是如此，我们需要根据不同的需要选择那个对的标签

选择器的分类

CSS也就是所说的选择器，那CSS选择器大致可以分为

基础选择器
复合选择器

基础选择器就是由单个选择器组成。
复合选择器则有标签选择器，类选择器，id选择器，通配符选择器组成。
下面我们一一讲解：

复合选择器1-标签选择器

语法格式：
标签名：{属性1:属性值1;属性2:属性值2…}
优点：可以快速把一个页面中一个标签都设置为一个样式

缺点：指定全局定义样式，不能自定义样式
举例：

注意啊：HTML中CSS样式一定要写在style标签里面，而style标签需要写在body里面
CSS样式写在style标签里面！
CSS样式写在style标签里面！
CSS样式写在style标签里面！
重要的事情说三遍！！！
那这种呢，就是基础选择器，图片上的参数后续会讲到如何使用

复合选择器2-类选择器

类选择器就是一个或多个标签，标签中通过class属性来调用，class属性后面的值可以自定义，但是一般来说起码要能写成别人能看懂的东西
错误实例：(因为下面那个我class是叫no2，但是你上面不用.属性值我就不认识你no2是什么，故而不生效，改过来就好啦，跟上面一样)

还有一种扩展就是多类目选择器，说白了就是给一个标签多个类名，提供选择，比方说一个类型给一种属性

复合选择器3-id选择器

ID选择器是为特定的ID的HTML元素设置样式

语法：
css中id选择器需要配置#使用，即#id

注意：HTML中ID选择器只能出现一次，这里不知道是不是bug，可以用好多次，但是但是，ID选择器就像我们的身份证一样，每个人的都是唯一的，不能重复

复合选择器4-通配符选择器：

通配符选择器用定义，也就是全部的意思，那我定义了一个类型，我上面写，我下面再写一个标签但是不定义类型，就算这样那我还是一个页面所有东西都会被改成*里面的样式

CSS文字属性设置

这个文字属性就是我们常说加粗，倾斜，字体大小等，下面我们就来学习一下CSS里面如何设置文字属性吧！：

定义文字类型：font-family

各个属性间用逗号隔开，别忘记用引号如果你记得有什么类型，比如宋体，那后面参数就可以用中文

定义文字大小:font-size

谷歌浏览器的默认文字大小为16px，文字大小基本单位是px

定义文字加粗:font-weight

可以把属性设置为bold只加粗，也可以设置为normal默认不加粗，范围是100-900，然后如果设置为400其实就是normal，700就是bold，这里font-weight是不需要带单位的

定义文字样式:font-style

normal是系统默认的，可以设置为italic，表示倾斜，
上面那个font-weight也有normal，可以联合记忆。

虽然说这里是文字样式，但是那个加粗是不能在这里用的，不可以想当然哦

文字复合属性：

格式：font：font-style font-weight font-size/line-height font-family

但是这里有个很大的缺点，就是顺序是固定的，不能乱换

##文本属性：
刚刚介绍完文字属性，下面一起来看看文本属性吧：

文本属性1-颜色:color

color还可以写成十六进制形式，如#FF00，还可以写成rgp模式(100%,0%,0%)

文本属性2-对齐方式:text-align

分为左对齐（left），右对齐(right)，居中对齐(center)

##文本属性3-装饰:text-decoration
可以为文本添加上划线，下划线，删除线等
none表示没有修饰，默认的也是最常用的
underline表示下划线，不常用，因为a标签自带下划线
overline表示上划线，也不常用
line-through表示删除线，几乎不用

##文本属性4-文本缩进:text-indent
em是基本单位，如果不设置单位，默认是1个像素，这里缩进可以是负值，也可以为正值

##文本属性5-行间距:line-height
用来控制行和行之间的距离

##CSS引入方式

CSS的引入方式分为内部样式表（行内式），行内样式表（嵌入式），外部样式表（链接式）
下面我们来一一介绍：
##内部样式表：
所谓的内部样式表就是说写在html页面内部，把所有CSS代码提取出来，放在stylle标签里面，理论上说i可以放在任何一个位置，但是一般是在head标签里面的，这个也就是上面文本或文字属性那种

##行内样式表：
行内样式表就是在元素标签的内部style中设置CSS属性，适合修改的方式，style就相当于是标签的属性，在双引号中符合CSS属性，来控制当前的格式，但是不推荐大量使用，只要精简美化即可

##外部样式表：
说白了就是单独写一个CSS文件，后缀名是.css，然后通过链接的形式引入我们想引入的地方

使用方法：
1.创建.css文件，把所有代码写在里面（不需要style，直接写）

2.在html中，使用link标签来引入link属性，rel表示定义当前文本和被链接文档的关系，这里要指定为stylesheet，表示被链接的是一个样式表文件，url可以指定外部文件url地址，注意这里可以是相对路径也可以是绝对路径

语法:< link rel=“stylesheet” href=“css文件路径” >

现在去调用就能生效了

###CSS偷懒篇：

这里我们介绍一下emment语法，它呢，前身是Zen coding，它使用缩写可以来提高html样式和css的缩写苏速度，在我们的Vscode内部已经集成了
HTML:
1.生成标签，例如输入p可以按回车(Enter)或者tab生成完整的p标签，这里我喜欢按回车

2.想要批量生成标签可以加上*，例如需要3个div标签，div*3，然后回车即可

3.如果父子关系可以使用>,例如ul > li即可

4.如果兄弟关系，可以用+，例如div+p即可

5.如果生成带有类名或者id名字的，可以直接写.demo或者#two tab键就可以了

6.如果生成的div类名是有顺序的，可以用自增符号$

7.如果想要在生成的标签内部写内容可以用{}

CSS:
1.使用w可以快速生成宽度，例如w26，回车即可生成width:26px;

2.生成行高可以使用lh，例如lh26，即可生成line-height:26px;
#CSS复合选择器：

CSS复合选择器分为基础选择器，复合选择器，后代选择器，子元素选择器，并集选择器，伪类选择器。下面一一介绍：

##1.后代选择器：
它可以提高效率选择目标元素，由两个或多个选择器通过不同方式组合

常用的复合选择器又包括：后代选择器，子选择器，并集选择器，伪类选择器

首先后代选择器也叫包含选择器，可以选择父元素里面子元素，写法就是外层标签写在前面，内层标签写在后面，中间用空格，标签发生嵌套时1，内层标签就被称为外层标签的后代

语法：元素1 元素2 {样式声明}
这个写法表示选择元素1里面的所有元素2

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

它选择了后者，那这就是后代选择器

##2.子元素选择器：
子元素选择器只能选择某元素最近的一级子元素，说白了就是弟弟和哥哥之间，优选弟弟

语法：元素1>元素2{样式声明}
这个写法表示选择元素1，中间是>隔开，而不是空格了

##3.并集选择器:
可以选择多组标签，为他们定义相同样式，常用于集体声明，并集选择器是通过连接日程，任何形式的选择器都可以称为并集选择器的一部分

语法：元素1，元素2{样式声明}
这样写是两个元素都能改成一样的属性，更高效。注意中间是逗号了

##4.伪类选择器:
简单来说，伪类选择器就是向某些选择器中添加特殊的效果，如给链接颜色修改一下，或者选择第1个，第N个

伪类选择器最大的一个书写特点就是用冒号表示，比如:hover

伪类选择器其实有很多种，这里拿链接伪类选择器来举例

链接伪类选择器参数介绍：
a:link 表示选择所有未被访问的链接
a:visited 表示选择已被访问的链接
a:hover 表示选择鼠标指针位于其上的链接
a:active 表示选择活动链接(鼠标按着不放的效果)

a:link说白了就是改成没点之前的颜色，如果你点了就变颜色了，代表你访问过了

a:visted就是点击之后之后的颜色

a:hover表示鼠标停留在百度上的颜色

a:active表示鼠标按着不放的颜色

注意这几个只能按顺序来循环，循环的顺序为：
link-visited-hover-active(LVHA)，因为a链接在浏览器有默认的样式了

##扩展:focus 伪类选择器：
它用来选取获得焦点的表单元素，焦点就是光标，一般input类表单元素才能获取，故focus主要针对表单元素来说的

语法：

#CSS元素的显示模式：
##1.定义：
元素的显示模式通常来说就是元素或者标签以什么样的形式显示，例如我们之前提到过的div独占一行，比如一行可以放很多的span

作用无非就是更好布局页面

##2.分类：
分为块元素和行内元素，行内块元素以及特殊的行内块元素

（1）常见的块元素有标题标签h1-h6，段落标签p，div标签，ul，ol，li等。div标签就是很典型的块元素

特点:
一.独占一行
二.高度，宽度，内外边距都可以控制
三.宽度是默认容器(父级宽度)的%100
四.相当于一个容器，内部可以放行内或块级元素

注意：
文本类的元素内不能使用块级元素；
p标签主要用于存放文字，因此p标签里面不能放块级元素，特别是不能放div，其他的都是一样的道理

（2）常见的行内元素有：a，strong，b，em，i，del，s，ins，u，span等，span就是最典型的行内元素，行内元素也被称为内联元素

特点：
一.相邻行内元素在一行上，一行可以显示多个
二.高宽直接设置无效
三.默认宽度就是它本身内容的宽度
四.行内元素只能放文本或者其他行内元素

注意：
链接里面不能再放链接，不允许套娃；
特殊情况链接a里面可以放块级元素，但是给a转换块级元素更安全一些

（3）特殊的行内块元素有img，input，td等，他们同时具有块元素和行内块元素的特点，有些资料把他们称为行内块元素

特点：
1.和相邻行内元素(行内块)在一行，但是他们会有空白间隙，一行可以显示多个(行内元素特点)
2.默认宽度是它本身内容的宽度（行内元素的特点）

#元素之间的转换：
简单来说就是一个模式的元素需要另外一个模型的特性进而来触发，比如a标签

##转换为块元素:display:block

##转换为行内元素:display:inline
这个一般使用较少

##转换为行内块元素:display:inline-block

##单行文字垂直居中：
CSS中并没有直接提供这种代码，但是可以通过让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直剧中

原理：行高的上空隙和下空隙把文字挤到中间了，如果行高小于盒子宽度，会偏上，大于会偏下，所以就要等于

#CSS背景：
背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等

##背景色:background-color
一般情况下背景颜色默认是透明的(transparent)，也可以手动指定

##背景图片：background-image
语法:background-image:none | url( )
none表示默认没背景图片
url可以使用相对和绝对路径来指定背景图像

##背景平铺：
background-repeat：repeat | no-repeat |repeat-x | repeat-y
repeat表示默认平铺

no-repeat表示表示默认不平铺

repeat-x表示沿着x轴平铺，横向

repeat-y表示沿着y轴平铺，纵向

##背景图片位置：
background-position:x y

可以用方位名词或者精确单位，顺序不影响
length 百分数 | 由浮点数字和单位标识符组成的长度值
语法:
position:top | center | bottom | left | center| right 方位名词

注意：
如果只指定一个方位名词，另一个省略，第二个是默认居中对齐;如果是精确单位，那么第一个一定是x轴，第二个一定是y轴，如果只指定一个数值，那该数值一定是x轴，另一个默认垂直居中

##背景固定：
background-attachment:设置图片是否固定或者随着页面其余i部分滚动

语法：
background-attachment：scroll | fixed scroll表示背景随着对象内容滚动 fixed表示背景图像固定（得需要足够多的内容才能看出来效果）

复合写法（简化代码）：

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

##背景半透明：

background：rgba（0,0,0,0.3）
其中最后一个参数代表的是alpha，范围在0-1之间

这个半透明是背景半透明，不影响盒子内容

#CSS的三大特性
CSS三大特性分别是：层叠性，继承性，优先级

##层叠性：
相同的选择器设置相同的样式，就会出现一个覆盖问题（层叠，叠在一起），然后导致发生冲突

层叠性原则：
1.样式冲突的话，遵循就近原则，哪个样式离结构近，就执行哪个样式
2.样式不冲突，不会层叠

##继承性
比如现实生活中，我们继承的是父亲的姓
而CSS中继承：子标签会继承父标签的某些样式，如文本颜色，字体大小等

子元素可以继承父元素的样式（text，font-，line-这些元素都可以，还有color

继承性之行高继承：
行高可以跟单位也可以不跟单位；
如果子元素没设置行高，则会继承父元素的行高；
子元素行高=当前子元素的文字大小*自定义值;
body行高1.5这样写法最大优点就是里面子元素可根据自己文字大小来自动调整行高;

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

若选择器相同，就执行层叠性

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

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=“”	1,0,0,0
!important 重要的	无穷大

优先级注意点:
1.权重是有4组数字组成，但是不会有进位

2.可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，等等

3.等级判断从左向右，如果某一位数值相同，则判断下一位数值

4.简单记忆就是通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器100，行内样式表为1000，!important无穷大

5.继承的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

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

div ul li ------> 0,0,0,3

.nav ul li ------> 0,0,12

a:hover -------->0,0,1,1

.nav a --------->0,0,1,1

#css盒子模型
网页布局过程：
1.先准备号相关网页元素，网页元素基本都是盒子(Box)
2.先利用CSS设置好盒子样式，然后放到相应位置
3.往盒子里面添加内容
网页布局的核心就是用CSS来摆盒子

##盒子模型(Box Mobile)的组成：
盒子模型也就是把HTML页面的布局堪称一个矩形盒子，装东西用的

CSS盒子模型本质还是一个盒子，封装HTML元素罢了，它包括的有：边框，外边距，内边距和实际内容（有点类似于Excel）

其中border表示变宽，前面已经见过了，content表示盒子里面的内容，padding表示内边距，margin表示外边距

##边框(border):
border可以设置元素的边框，边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色(默认黑色)

语法:
border:border-width || border-style || border-color

border-width代表的是边框粗细，单位是px
border-style代表边框样式，里面可以来个实现边框，用solid实现，dashed表示虚线，dotted点线
border-color代表边框颜色

边框的复合写法：
简写为：border:1px solid red; 没有顺序之分

拆开法：border-top:1px solid red; 只设定上边框，其余的是一样道理

设定下边框那就是bottom

左右就是left和right啦

如果一个完整的边框需要下边框是蓝色的，直接其余的是红色的，可以直接把border的颜色设置为红色的，再单独去改下边框就简单多啦

##表格的细线边框
border-collapse来控制边框表格，控制相邻单元格的边框

语法:
border-collapse:collapse;

collapse是合并的意思

这个语法表示把相邻边框合在一起

##边框会影响盒子实际大小
边框会额外增加盒子的实际大小，解决方案：
1.测量盒子大小的时候，不量边框
2.如果测量的时候包含了边框，则需要width/height减去边框宽度

##内边距：
padding属性用于设置内边框，也就是边框和内容间的举例

padding-left代表左内边框
padding-right代表右内边框
padding-top代表上内边框
padding-bottom代表下内边框

内边距复合写法:
padding:5px; 1个值，代表上下左右都有5像素内边距

padding:5px 10px; 2个值，代表上下内边距是5像素，左右内边距是10像素

padding:5px 10px 20px; 3个值，代表上内边距5像素，左右内边距10像素 下内边距20像素

padding:5px 10 px 20px 30px; 4个值，代表上内边距5像素，右内边距是10像素，下内边距是20像素，左内边距是30像素，顺时针来

然后个padding就像边框一样，也会影响盒子大小
1.内容和边框有了距离，添加了内边距
2.padding影响了盒子实际大小，也就是说盒子已有宽度和高度，此时再指定内边框，会撑大盒子

解决方案:
如果保证盒子大小跟效果图大小一致，则让width/height减去多出来的内边距大小即可

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子

##外边距
margin用来设置外边距，也就是控制盒子和盒子之间的距离

margin-left代表左外边框
margin-right代表右外边框
margin-top代表上外边框
margin-bottom代表下外边框

外边距可以让块级盒子水平居中,但是必须满足两个条件:
外边距可以让块级盒子水平居中，但是必须满足两个条件：
1.盒子必须指定宽度width
2.盒子的左右外边距都设置为auto
.header{ width:960px;margin:0 auto;}

常见的写法，下面三种都可以：
margin-left:auto;margin-right:auto;
margin:auto;
margin:0 auto;

以上方法是块级元素水平居中，行内元素或行内块元素水平居中给父元素添加text-align:center即可

##外边距 合并：
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

1.相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距mrgin-bottom，下面的元素有上外边距margin-top，它们之间的垂直间距就不是二者之和了，去两个值中较大者的现象被称作相邻块元素垂直外边距的合并

解决方案：尽量只给一个盒子添加margin值

2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案：
1.可以为父元素定义上边框
2.可以为父元素定义上内边框
3.可以为父元素覅你家overflow:hidden

##清除内外边框：
很多元素都有默认的内外边框，而且不同浏览器支持的也不同，所以布局前需要清除下网页元素的内外边距
*{ padding:0; 清除内边框
margin:0清除外边框}

**注意:**行内元素为了能照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了