前端学习之CSS

作者: 阿饼six | 来源:发表于2021-08-02 10:30 被阅读0次

前言：HTML-页面结构，负责从语义的角度搭建页面结构；CSS-页面样式表现，负责从审美的角度美化页面；JavaScript-交互行为，负责从交互的角度提升用户体验。HTML+CSS是为了实现Web标准的样式和结构分离。

一、CSS的定义

CSS英文全名 Cascading Style Sheets ，中文名-层叠样式表，它主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

二、CSS代码语法

CSS 样式由选择器和声明组成，而声明又由属性和值组成，例如：

/* CSS注释内容 */，注意HTML注释是这样的：<!-- HTML注释内容 -->
p {
  font-size: 16px;
  color: green;
}
// 其中 'p' 就是选择器，'font-size: 16px'整体就是一个声明，'font-size'就是属性
// '16px'就是值

三、CSS应用到元素样式

1、内联式

inline style 内联样式，把CSS代码直接写在现有的HTML标签中，通常用于特殊场合的特殊元素。代码如下：

<p style="color:red">这是超神卡卡罗特</p>

2、嵌入式

document style sheet 也叫文档样式表，把CSS样式代码写在 <style type="text/css"></style> 标签之间，并且一般情况下嵌入式CSS样式写在 <head></head> 之间，通常用于单个page特有的样式。代码如下：

<head>
    ...
    <style type="text/css">
    p {
      color: red;
    }
    </style>
</head>

3、外部式

external style sheet 外部样式表，把CSS代码写一个单独的外部文件中，这个CSS样式文件以 .css 为扩展名，在 <head> 标签内（不是在 <style> 标签内），使用 <link> 标签将CSS样式文件链接到HTML文件内。代码如下：

<head>
    ...
    <link href="base.css" rel="stylesheet" type="text/css" />
</head>

注意：内联式、嵌入式、外部式样式表中CSS样式在相同权值的情况下，优先级为 内联式 > 嵌入式 > 外部式 ，但是 嵌入式 > 外部式 有一个前提：嵌入式CSS样式的位置一定在外部式的后面。其实总结来说，就是就近原则（离被设置元素越近优先级别越高）。

四、选择器分类

1、标签选择器

标签选择器其实就是HTML代码中的标签，比如常见的 <html>、<body>、<h1>、<p>、<img> ，代码如下：

// 在HTML中
<p>这是超神卡卡罗特</p>

// 在CSS中
p {
  font-size: 16px;
  color: red;
}

2、类选择器

类选择器在CSS样式编码中是最常用到的，格式是 .类选器名称 {css样式代码;} ，代码如下：

// 在HTML中，属性是class
<p class="myColor">这是超神卡卡罗特</p>

// 在CSS中
.myColor {
    color: red;
}

3、ID选择器

在很多方面，ID选择器都类似于类选择器，但是ID选择器格式是 #ID选择器名称 {css样式代码;} ，代码如下：

// 在HTML中，属性是id
<p id="myColor">这是超神卡卡罗特</p>

// 在CSS中
#myColor {
    color: red;
}

类和ID选择器的区别：

1）ID选择器只能在文档中使用一次，而类选择器可以使用多次；

2）可以使用类选择器词列表方法为一个元素同时设置多个样式，而ID选择器是不可以的。

比如如下代码：

// 在HTML中，设置多个类选择器myColor和myFont
<p class="myColor myFont">这是超神卡卡罗特</p>

// 在CSS中
.myColor {
    color: red;
}
.myFont {
    font-size: 40px;
}

4、通用选择器

通用选择器是功能最强大的选择器，它使用一个 * 号指定，它的作用是匹配HTML中所有标签元素。在企业开发中一般不会使用通用选择器，因为通用选择器穿透力很强，其优先级高于继承的样式，会覆盖继承的样式，而且在设置之前会遍历所有的标签如果当前界面上的标签比较多，那么性能就会比较差。代码如下：

// 在CSS中
* {
    color: red;
}

5、后代选择器

使用空格用于选择指定标签元素下的后代元素，后代选择器是作用于所有子后代元素（包含间接子元素）。代码如下：

// 在HTML中
<div class="myColor">
    <strong>龙珠超</strong>
    <span>这是超神卡卡罗特</span>
    <div><span>这是第二层嵌套</span></div>
</div>

// 在CSS中
.myColor span {
    color: red;
}

运行结果：两个 span 元素都是红色的。

6、子选择器

使用大于符号(>)选择指定标签元素的第一代子元素(只有直接子元素)。代码如下：

// 在HTML中
<div class="myColor">
    <strong>龙珠超</strong>
    <span>这是超神卡卡罗特</span>
    <div><span>这是第二层嵌套</span></div>
</div>

// 在CSS中，这里是大于号>
.myColor>span {
    color: red;
}

运行结果：只有第一个直接子元素 span 是红色的，其他都是默认黑色的。

注意一个细节：p标签不能包含div标签。

7、伪类选择器

伪类选择器允许给HTML不存在的标签（标签的某种状态）设置样式，比如说我们给HTML中一个标签元素的鼠标滑过的状态来设置字体颜色：

// 在HTML中
<a href="https://www.baidu.com" target="_blank">百度一下</a>

// 在CSS中
a:hover{color:red;}

常见的动态伪类：

1）link：未访问的链接；

2）visited：已经访问的链接；

3）hover：鼠标移动到链接上，hover必须在link、visited之后，顺序很重要；

4）active：鼠标点击未松手，类似于高亮状态，active必须放在hover之后；

5）focus：输入当前焦点的元素，比如键盘输入；

链接伪类记忆顺序：女朋友看到LV后，ha ha大笑；

8、其他选择器

1）兄弟选择器：比如div元素后面紧挨着p元素，CSS代码 div+p {color: red;} ；

比如div元素后面所有的p元素：div~p {color: red;} 。

2）交集选择器：同时符合两个条件的元素，比如div元素、class值有myColor：div.myColor {color:red;} 。

3）属性选择器：语法 元素选择器[属性名称="属性值"]，可在其他选择器上，再添加对属性的匹配。

五、CSS文字排版

1、字体：font-family，比如为段落中的文字设置字体为宋体：

p {font-family: "宋体";}

2、字号：font-size，比如：

p {font-size: 12px;}

3、颜色：color，比如：

p {color: #666;}

4、粗体：font-weight，再也不用为了实现粗体样式而使用h1-h6或strong标签。比如：

p {font-weight: bold;}

// font-weight可以设置具体的数字
1）100、200、…900：每个数字表示一个粗细；
2）normal：等于400；
3）bold：等于700；

5、斜体：font-style，比如：

p {font-style: italic;}

// font-style常见值
1）normal：常规；
2）italic：斜体，需要字体本身支持斜体；
3）oblique：文本倾斜显示；

6、下划线：text-decoration，比如：

p {text-decoration: underline;}

// text-decoration有4个值
1）none：无任何装饰线
2）underline：下划线；
3）overline：上划线；
4）line-through：中划线（删除线）；

7、缩进：text-indent，中文文字中的段前习惯空两个文字的空白，比如：

// 2em的意思就是文字的2倍大小
p {text-indent: 2em;}

8、行高：line-height，设置了行高也就设置了行间距，比如：

p {line-height: 1.5em;}

9、文字或者字母间距：letter-spacing，可以设置中文或者英文字母之间的间距，比如：

p {letter-spacing: 50px;}

10、单词间距设置：word-spacing，比如：

p {word-spacing: 50px;}

11、对齐方式：text-align，比如：

p {text-align: left;}

// text-align有五个值
1）left：左对齐；
2）right：右对齐；
3）center：中间对齐；
4）justify：两端对齐，对最后一行文本没有效果；
5）text-align-last：可以设置最后一行文本justify效果；

六、CSS三大特性

1、继承性

继承是一种规则，它允许样式不仅应用于某个特定HTML标签元素，而且应用于其后代。比如：

// 在HTML中
<p>这是<span>超神</span>卡卡罗特</p>

// 在CSS中
p {color: red;}

运行结果：不仅 p 元素内容是红色的，span 元素内容也是红色的，这里就是继承作用。

注意：有一些CSS样式是不具有继承性的，比如：

// 在HTML中
<p>这是<span>超神</span>卡卡罗特</p>

// 在CSS中
p {border: 1px solid red;}

运行结果：p 元素是有边框的，但是 span 元素没有边框。

2、层叠性

在HTML文件中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些CSS样式的前后顺序来决定，处于最后面的CSS样式会被应用。比如：

// 在HTML中
<p>这是<span>超神</span>卡卡罗特</p>

// 在CSS中
p {color: red;}
p {color: green;}

运行结果：p 元素内容都是绿色的。

所以前面的CSS样式优先级就不难理解了： 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

3、优先级

也叫做特殊性，有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?比如：

// 在HTML中
<p class="myColor">这是<span>超神</span>卡卡罗特</p>

// 在CSS中
p {color: red;}
.myColor {color: green;}

这个时候 p和.myColor 都匹配到了p这个标签上，那么会显示哪种颜色呢？结果是显示green绿色，因为类选择器权重比标签选择器权重更高。

常见优先级：

1）!important：10000；

2）行内样式：1000；

3）ID选择器：100；

4）类选择器、属性选择器：10；

5）标签选择器：1；

七、CSS盒子模型

如果不了解块级元素、内联元素(又叫行内元素)和内联块级元素，请戳这里前端学习之HTML。

1、外边距

元素与其它元素之间的距离可以使用边界 margin 来设置，设置的顺序是上、右、下、左(顺时针)。

比如：

div {margin:20px 10px 15px 30px;}

// 也可以分开写
div {
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

如果上右下左的边界都为10px，可以这么写：

div {margin:10px;}

如果上下边界一样为10px，左右一样为20px，可以这么写：

div {margin:10px 20px;}

2、边框

盒子模型的边框 border 就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

// 为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框
div {border:2px solid red;}

// 也可以分开写
div {
    border-width:2px;
    border-style:solid;
    border-color:red;
}

注意：

1）border-width(边框宽度)中的宽度也可以设置为： thin | medium | thick (但不是很常用)，最常还是用像素(px)；

2）border-style(边框样式)常见样式有： dashed（虚线）| dotted（点线）| solid（实线）；

3）border-color(边框颜色)中的颜色可设置为十六进制颜色；

如果想单独设置某个边框，可以：

// 单独设置下边框
div {border-bottom:1px solid red;}

// 还有border-top、border-right、border-left

3、内边距

元素内容与边框之间是可以设置距离的，称之为内边距 padding，设置内边距的顺序是上、右、下、左(顺时针)。

div {padding:20px 10px 15px 30px;}

// 也可以分开写
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

如果上右下左的内边距都为10px，可以这么写：

div {padding:10px;}

如果上下内边距一样为10px，左右一样为20px，可以这么写：

div {padding:10px 20px;}

4、宽度和高度

盒子模型宽度、高度和我们平常所说的物体的宽度和高度理解是不一样的，CSS内定义的宽(width)和高(height)指的是内容本身的宽高，因此一个元素实际宽度：

盒子宽度 = 左外边距 + 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框 + 右外边距

元素的高度也是同理。代码如下：

// 在HTML中
<div>文本内容</div>

// 在CSS中
div{
        margin:10px;
        border:1px solid red;
        padding:20px;
    width:200px;   
}

八、CSS布局模型

布局模型与盒子模型一样都是 CSS 最基本、最核心的概念。CSS包含3种基本的布局模型：流动模型(Flow)、浮动模型 (Float)和层模型(Layer)。

1、流动模型(Flow)

流动模型是默认的网页布局模型，也就是说网页在默认状态下的HTML网页元素，都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：

1）块级元素都会在所处的包含元素内，自上而下按顺序垂直延伸分布，因为在默认状态下，块级元素的宽度都为100%，块级元素都会以行的形式占据位置；

2）内联元素都会在所处的包含元素内从左到右水平分布显示；

如果不了解块级元素、内联元素(又叫行内元素)和内联块级元素，请戳这里前端学习之HTML。

// 在HTML中
  <div><span>第一行文本</span></div>
  <div>
    <span>第二行文本，第一句话。</span>
    <span>第二句话。</span>
  </div>

// 在CSS中
div {
    border:2px solid red;
}

运行结果：两个 div 元素都是占满一行的，div 元素是自上而下按顺序排布；第二个 div 元素中两个 span 元素，从左到右水平分布显示。

2、浮动模型(Float)

块级元素都是独占一行，如果现在我们想让两个块级元素并排显示，那么可以使用元素浮动。任何元素在默认情况下，都是不能浮动的，但可以用CSS定义为浮动。

// 在HTML中
  <div><span>第一行文本</span></div>
  <div>
    <span>第二行文本，第一句话。</span>
    <span>第二句话。</span>
  </div>

// 在CSS中
div {
    float: left;
    border:2px solid red;
}

运行结果：两个 div 元素从左到右水平分布显示，两个 div 元素在同一行，并没有占据一整行。

3、层模型(Layer)

层模型有三种形式：

1）相对定位：position:relative；

2）绝对定位：position:absolute；

3）固定定位：position:fixed；

a、相对定位

如果想为元素设置层模型中的相对定位，需要设置 position:relative ，它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。注意：相对于以前的位置移动，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是它仍然占据着它没偏移前的空间。

// 在HTML中
  <div class="firstDiv"><span>第一行文本</span></div>
  <div class="secondDiv">
    <span>第二行文本，第一句话。</span>
    <span>第二句话。</span>
  </div>

// 在CSS中
div {
    width: 200px;
    height: 200px;
    border:2px solid red;
}
.firstDiv {
    left: 100px;
    top: 50px;
    position: relative;
}

运行结果：第一个 div 元素相对偏移前的位置距离左边 100px，距离顶部 50px，但是第二个 div 元素仍然在原来的位置没有变动，所以第一个 div 元素仍然占据着它没偏移前的空间。

b、绝对定位

如果想为元素设置层模型中的绝对定位，需要设置 position:absolute，将元素从文档流中拖出来，然后使用left、right、top、bottom属性，相对于其最接近的一个具有定位属性的父元素包含块进行绝对定位。如果不存在这样的包含块（就是它前面的div并没有设置定位的属性），则相对于body元素，即相对于游览器窗口。注意：被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除。

// 在HTML中
  <div class="firstDiv"><span>第一行文本</span></div>
  <div class="secondDiv">
    <span>第二行文本，第一句话。</span>
    <span>第二句话。</span>
  </div>

// 在CSS中
div {
    width: 200px;
    height: 200px;
    border:2px solid red;
}
.firstDiv {
    left: 100px;
    top: 50px;
    position: absolute;
    background-color: grey;
}
.secondDiv {
    background-color: green;
}

运行结果：第一个 div 元素在文档流中不占据空间，距离左边100px，距离顶部50px，第二个 div 元素在文档流中最顶部的位置。

c、固定定位

如果想为元素设置层模型中的固定定位，需要设置 position:fixed，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

// 在HTML中
  <div class="firstDiv"><span>第一行文本</span></div>
  <div class="secondDiv">
    <span>第二行文本</span>
  </div>
  
// 在CSS中
div {
    width: 200px;
    height: 200px;
    border:2px solid red;
}
.firstDiv {
    right: 100px;
    bottom: 50px;
    position: fixed;
}

运行结果：第一个 div 元素一直在浏览器窗口的右下角。

注意：相对定位可以和绝对定位混着使用，原则是：只要父div定义了定位属性，子div就会跟着父div的位置去再定位。

4、z-index的使用

利用z-index，可以改变元素相互覆盖的顺序。显示器所显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念，如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。注意点：

1）z-index属性适用于定位元素（position属性值为relative或absolute或fixed的对象），用来确定定位元素在垂直于显示屏方向（称为z轴）上的层叠顺序，也就是说如果元素是没有定位的，对其设置的z-index会是无效的；

2） z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index值为正数的对象会在其之上，而z-index值为负数的对象在其之下；

// 在HTML中
<div class="firstDiv"></div>
<div class="secondDiv"></div>

// 在CSS中
.firstDiv {
    width: 200px;
    height: 200px;
    background-color: red;
}
.secondDiv {
    top: -50px;
    position: relative;
    width: 100px;
    height: 100px;
    background-color: green;
    z-index: -5;
}

运行结果：第一个 div 红色元素挡住了第二个 div 绿色元素，也就是第一个 div 元素在第二个 div 元素上面。如果不设置 z-index ，那么第二个 div 元素在第一个 div 元素之上。

Flex布局可以参考阮一峰老师博客：Flex 布局教程。