根据慕课网零基础前端体系课程总结笔记。这是第二周的内容总结笔记。这里主要是基本CSS知识，移动端的适配需要到第17周。文章可能略显简单或者纰漏，之后慢慢修改。

CSS入门基础

CSS简介

CSS(cascading style sheet，层叠式样式表)是用来给HTML标签添加样式的语言，允许对网页进行美化和布局设计。CSS3作为CSS的最新版，引入了更多高级样式动画、3D特效和移动设备优化等功能。前端开发通常涉及HTML（构建结构）、CSS（定义样式）和JavaScript（实现交互），这三层共同构成了现代Web应用的基础。

CSS样式和结构分离
CSS样式和结构分离，样式和结构不用“杂着写”，而是彼此分开:HTML就负责结构，CSS负责样式
HTML和CSS怎么结合呢? 选择器就是两者的纽带

CSS的本质
CSS没有加减乘除、与或非、循环、选择、判断，CSS不是“编程”，就是简单直接的罗列样式，背诵CSS属性是非常重要的，属性背诵熟练程度决定了做网页的速度

CSS的书写位置

内嵌式
在学习CSS时，最最常使用内嵌式，顾名思义，就是内嵌在.html文件中，在<head></head>标签对中，书写<style></style>标签对，里面书写CSS语句

外链式
可以将CSS单独存为.css文件，然后使用link标签引入它

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

导入式
导入式是最不常见的样式表导入方法

1
<style>@import url(css/css.css);</style>

使用导入式引入的样式表，不会等待css文件加载完毕，而是会立即渲染HTML结构，所以页面会有几秒中的“素面朝天的时间

行内式
样式可以直接通过style属性写在标签身上

1
<h2 style="color:red;">我是一个二级标题</h2>

行内式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用

CSS的基本语法

CSS3选择器

简介

全面介绍CSS3选择器，分为两部分。

第一部分讲解了CSS2.1中的经典选择器，包括标签选择器、ID选择器、class选择器、复合选择器和伪类，这些选择器在CSS3中仍然被广泛使用。

第二部分重点介绍了CSS3新增的选择器，如元素关系选择器、序号选择器、属性选择器，以及一些特殊的尾位和相邻兄弟选择器。

此外，还涵盖了层叠性与选择器权重计算的重要概念。掌握这些选择器是学好CSS的基础，对提升网页设计和开发能力具有重要意义。

标签选择器和id选择器

标签选择器
标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签

标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅

标签选择器“覆盖面”非常大，所以通常用于标签的初始化

认识id属性
标签可以有id属性，是这个标签的唯一标识；

id的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母；

同一个页面上不能有相同id的标签

id选择器
CSS选择器可以使用井号#前缀，选择指定id的标签

复合选择器

主要分三种：

后代选择器允许你选择一个元素的任何后代元素，通过在两个选择器之间用空格分隔。例如，要选中所有<p>元素作为.box元素的后代，可以使用.box p。

交集选择器只选取同时满足多个条件的元素，比如li.spec会选取那些既是<li>标签又有spec类的元素。

并集选择器通过逗号分隔多个选择器，表示至少匹配其中一个，如ul, ol会选择<ul>和<ol>元素。

这些选择器使得开发者能更精细地控制页面元素的样式，增强了CSS的灵活性和表达能力。

class选择器

class类名

  • class属性表示“类名”
1
<p class="warning">我是段落</p>

  • 类名的命名规范和id的命名规范相同

  • 使用点.前缀选择指定class的标签

  • 多个标签可以为相同类名

  • 同一个标签可以同时属于多个类，类名用空格隔开

原子类：HTML标签就可以“则需选择”它的类名了，这样可以非常快速的添加一些常见样式

伪类

伪类
伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊状态

CSS伪类用于设置不同状态下元素的样式，包括未访问过的超链接(:link)、已访问过的超链接(:visited)、鼠标悬停时的元素(:hover)和用户点击但未释放鼠标按钮时的元素(:active)。这些伪类帮助开发者根据用户的交互行为为页面元素添加动态样式，使网页更加生动和响应用户操作。

a标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效
LOVE HATE
:link→:visited→:hover → :attive

元素关系选择器(CSS3新增)

元素关系选择器分三种：

子选择器
当使用 >符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系

相邻兄弟选择器
相邻兄弟选择器(+)介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中

通用兄弟选择器
通用兄弟选择器()，ab 选择a元素之后所有同层级b元素

序号选择器（CSS3新增)

序号选择器能够实现对HTML元素的精确定位和样式应用。通过在不同编号的元素上应用特定的样式

属性选择器（CSS3新增)

伪类（CSS3新增）

伪元素（CSS3新增)

伪元素
CSS3新增了“伪元素”特性，顾名思义，表示虚拟动态创建的元素
伪元素用双冒号表示，IE8可以兼容单冒号

::before和::after
::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置 content 属性表示其中的内容

::after 创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置 content 属性表示其中的内容

1
2
3
a::before {
    content:"★"
}

::selection
::selection css伪元素应用于文档中被用户高亮的部分(使用鼠标圈选的部分)

::first-letter和::first-line
::first-letter会选中某元素中(必须是块级元素)第一行的第一个字母
::first-line会选中某元素中(必须是块级元素)第一行全部文字

层叠性和选择器权重计算

CSS全名叫做“层鲁式样式表”，层叠性是它很重要的性质;

层叠性:多个选择器可以同时作用于同一个标签，效果叠加;

CSS的选择器权重根据选择器类型的不同而变化，ID选择器的权重最高，然后是类选择器，最后是标签选择器;

复杂选择器权重计算
复杂选择器可以通过(id的个数，class的个数，标签的个数)的形式，计算权重

!important提升权重
如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important

文本与字体属性

简介

讲解CSS3中关于文本与字体处理的关键属性，涉及文本样式设置、字体选项选取、段落及行的排版规则，并着重讨论了这些属性之间的继承性。通过对这些内容的学习，能够有效提升设计各类样式的网页文本的能力。重点讲解了如何利用CSS3来控制文本的外观和布局，包括字体大小、颜色、风格以及对齐方式等方面，同时还探讨了如何通过合理的布局使文本在不同设备上呈现出最佳效果。此外，课程还特别强调了了解和应用CSS3文本与字体属性的继承性对于提高网站开发效率的重要性

常用文本样式属性

color属性
color 属性可设置文本内容的前景色,主要可以用英语单词、十六进制、rgb()、rgba0)等表示法

color属性-十六进制表示法
十六进制表示法是所有设计软件中都通用的颜色表示法，设计师给我们的设计图上面标注的颜色，通常为十六进制表示

1
color: #ff0000;

比如十六进制ff就是十进制的255，每种颜色分量都是0~255的数字，

如果颜色值是#aabbcc的形式，可以简写为#abc

color属性-rgb()表示法
颜色也可以用rgb()表示法

1
color:rgb(255，0,0)

color属性-rgba()表示法
颜色也可以用rgba()表示法，最后一个参数表示透明度，介于0到1之间，0表示纯透明，1表示纯实心

1
color:rgba(255,0,0,.65);

font-size属性
font-size属性用来设置字号，单位通常为px。今后还会介绍em、rem单位:

1
font-size: 30px;

网页文字正文字号通常是16px，浏览器最小支持10px字号

font-weight属性
font-weight属性设置字体的粗细程度，通常就用norma1和bold两个值

font-style属性

设置字体的倾斜

text-decoration属性
text-decoration属性用于设置文本的修饰线外观的(下划线、删除线)

字体属性详解

font-family属性
font-family属性用于设置字体

1
font-family:"微软雅黑”

字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体

1
font-family:serif,"Times, New Roman","微软雅黑”,

字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体较多，设置成其他字体较少

定义字体
字体文件根据操作系统和浏览器不同，有eot、woff2、woff、ttf、svg文件格式，需要同时有这5种文件

当我们拥有字体文件之后，就可以用@font-face定义字体

阿里巴巴普惠体
阿里巴巴提供了一套免费商用授权的普惠字体，网址https://www.iconfont.cn/webfont
使用阿里巴巴普惠字体也省去了下载字体的麻烦

段落和行相关属性

text-indent属性
text-indent属性定义首行文本内容之前的缩进量，缩进两个字符应该写作

1
text-indent: 2em;

line-height属性
line-height属性用于定义行高，文本垂直居中。

line-heigh属性的单位可以是以px为单位的数值

line-heigh属性也可以是没有单位的数值，表示字号的倍数这是最推荐的写法

单行文本垂直居中
设置行高=盒子高度，即可实现单行文本垂直居中

设置text-align:center，即可实现文本水平居中

font合写属性
font属性可以用来作为font-style，font-weight,font-size,line-height和font-family属性的合写

继承性

继承性
文本相关的属性普遍具有继承性，只需要给祖先标签设置即可在后代所有标签中生效

  • color

  • font- 开头的

  • list- 开头的

  • text-开头的

  • line- 开头的

就近原则
在继承的情况下，选择器权重计算失效，而是“就近原则“

盒模型

简介

着重讲解了核模型在CSS中的重要性，涵盖了其基本概念、常见的CSS属性如display、padding、margin及box-sizing属性，以及区分行内元素与块级元素的方法及其相互之间的转换。

认识盒模型

什么是盒模型

  • 所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”

padding属性详解

padding是盒子的内边距

  • padding是盒子的内边距，即盒子边框内壁到文字的距离

padding是四个方向的

  • 四个方向的padding，可以分别用小属性进行设置

padding的四数值写法
padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding

1
padding:10px 20px 30px 40px;

padding的三数值写法

  • padding属性如果用三个数值以空格隔开进行设置，分别表示上、左右、下的padding
1
padding: 10px 20px 30px;

padding的二数值写法

  • padding属性如果用二个数值以空格隔开进行设置，分别表示上下、左右的padding
1
padding: 10px 20px;

margin属性详解

margin是盒子的外边距

  • margin是盒子的外边距，即盒子和其他盒子之间的距离

margin也有四个方向

小属性 意义
margin-top 上margin，“向上踹”
margin-right 右margin，“向右踹”
margin-bottom 下margin，“向下踹”
margin-left 左margin，“向左踹”

margin的塌陷

  • 竖直方向的margin有塌陷现象:小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准

盒子的水平居中

  • 将盒子左右两边的margin都设置为auto，盒子将水平居中
1
2
3
.box {
	margin: 0 auto;//上下是0，左右自动
}文本居中是`text-align: center;` 和盒子水平居中是两个概念
  • 盒子的垂直居中，需要使用绝对定位技术实现

盒模型计算

一个盒模型的一般要分为可用宽度和可用高度、实际宽度和实际高度，这是因为盒模型中有padding和border组成，这些都是占用盒模型的宽度的。

示例：

1
2
3
4
5
6
.box{
    width:100px;
    height:100px;
    padding:10px;
    border:1px solid red;
}

这个示例中，box的实际宽高为100+1+1+10+10 = 122px

box-sizing属性

box-sizing属性

  • 将盒子添加了box-sizing: border-box;之后，盒子的width、height数字就表示盒子实际占有的宽高(不含margin)了，即padding、border变为“内缩”的，不再“外扩
  • box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，在PC页面开发中使用较少
  • box-sizing属性兼容到IE9

display属性

行内元素和块级元素

行内元素和块级元素的相互转换

行内元素和块级元素的相互转换

  • 使用display:block;即可将元素转为块级元素
  • 使用display:inline;即可将元素转为行内元素，将元素转为行内元素的应用不多见
  • 使用display:inline-block;即可将元素转为行内块

元素的隐藏

  • 使用display:none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
  • 使用visibility:hidden;可以也可以将元素隐藏，但是元素不放弃自己的位置