0x02 CSS快速入门

最新推荐文章于 2024-08-13 17:13:54 发布

Nefu_qky

最新推荐文章于 2024-08-13 17:13:54 发布

阅读量619

点赞数

分类专栏： Web开发文章标签： css html css3 web 前端

本文链接：https://blog.csdn.net/Qiuker_jl/article/details/121977417

版权

Web开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS布局，包括传统布局的盒子模型、浮动、定位，以及弹性布局的原理和使用。重点讨论了CSS的层叠性、继承性和优先级，并展示了如何通过font属性设置字体、颜色、大小等文本样式。同时，讲解了背景图片、过渡和变换等动画效果。

摘要由CSDN通过智能技术生成

前言：CSS内容较杂，建议只看前五节，对CSS有一定的认识；后面需要用到对应的样式再去检索；另，本篇文章涉及的知识肯定不全，毕竟这块知识太杂了，后续应该会更新

一.CSS简介

1.概述

CSS：Cascading StyleSheet，层叠样式表/级联样式表，是一门用来表现HTML文档样式的计算机语言

CSS的发展历程：

HTML语言被发明之初，并不考虑页面长得好不好看。

随着时代的发展，为了满足页面设计者的需求HTML中增加了许多用于设置样式的属性、标签等

<hr width="500" color="red">
<!--设置水平线的长度、颜色-->
<h1>
    <font color="red"> 我是标题 </font>
</h1>
<!--font标签是专门为了设置文本的字体大小、颜色等样式而设置出来的标签-->
<!--还有粗体标签<strong>斜体标签<em>等等在有了CSS后都没啥用了-->

随着功能的增加，HTML语言本身得越发臃肿，于是CSS便诞生了，CSS实现了网页内容和样式的分离，即HTML语言专门写网页的内容，CSS调整网页的样式。

当HTML语言不再考虑元素的样式时，就变得非常简洁明了：
```
<hr>
<h1>我是标题</h1>

```

主要功能：

设置HTML页面中的文本内容：字体、大小、对齐方式等
设置HTML页面中图片的外形：宽高、边框样式、边距等
设置HTML页面中版面的布局等外观显示样式。

总而言之，CSS用来改变HTML所编写网页的样式，可以将HTML理解为网页的骨架，CSS负责装饰与渲染

2.语法

CSS由若干组选择器和声明块组成

选择器{
	声明1;  // 属性:值;
	声明2;  //多个声明间用 ; 间隔
	声明3;
	...
}

选择器： 用来说明一下要修改谁的样式，即指向要修改样式的HTML元素

选择器后跟着的是{声明块}，声明块中为具体要修改的样式，包括一条或多条用分号分隔的声明。每条声明包含一个CSS属性名称和值，二者通过冒号分隔。

属性： 用来说明要改什么方面，比如要修改字体大小就用 font-size 属性，要修改颜色就用 color 属性

例：

h1{ 
	color:red; 
}

h1指向HTML文档中的<h1>元素，color表示要修改的属性为颜色，red表示要将颜色修改为红色

综上，这条语句的作用是将HTML文档中所有<h1>元素的颜色修改为红色

3.导入方式

CSS既然是作用于html文档的，那么一定要通过某种方式使它们连接起来。

行内样式

在HTML标签中，用style属性编写CSS语句，例：

<h1 style="color:red"> 标题 <h1>

但这种写法是不推荐的

内部样式

在html文档的head部分，利用style标签来定义样式信息

在style标签中可以写CSS语句

例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS</title>  		<!--网页标题-->
    <style type="text/css">		
    h1 {						/*选择h1元素*/
        color: blue; 			/*修改元素的颜色为蓝色*/
        text-align: center;		/*修改元素的对齐方式为居中对齐*/
    }
    p {							/*选择p元素*/
        color: red;				/*修改元素的颜色为红色*/
    }
    </style>
</head>

<body>
    <h1>我是标题</h1>
    <p>我是文章的内容，为了水字数需要不停的复制粘贴。我是文章的内容，为了水字数需要不停的复制粘贴。我是文章的内容，为了水字数需要不停的复制粘贴。我是文章的内容，为了水字数需要不停的复制粘贴。我是文章的内容，为了水字数需要不停的复制粘贴。我是文章的内容，为了水字数需要不停的复制粘贴。我是文章的内容，为了水字数需要不停的复制粘贴。我是文章的内容，为了水字数需要不停的复制粘贴。</p>
</body>

</html>

效果如下：

标题为蓝色且居中对齐，段落为红色

在这里插入图片描述

外部样式

最好的写法是将CSS代码独立放在一个文件（以.css为扩展名）中，再通过link标签将其连接到html文档中：

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

rel是relation的缩写，该属性规定文档与被链接文档间的关系，stylesheet表示链接一个样式表

href的值是url，规定被链接文档的位置

既然有多种导入方式，就有可能存在冲突的风险。代码是从上往下顺序执行的，后执行的语句会覆盖先执行的语句，所以行内样式必然是优先度最高的。

4.注释

注释用于解释代码，是给开发者看的

浏览器在渲染网页时会忽略注释中的内容
CSS代码中注释格式为：/*注释内容*/
在HTML的<style>标签和CSS文件中的注释都采用上述格式

注释能横跨多行：

/*
这是一条
注释
*/

二.选择器

选择器的作用是选择/定位到要设置样式的HTML元素（或是一些元素）

1.简单选择器

1）标签选择器：

根据HTML元素的标签来选择元素

p{
	text-align: center;
	color: red;
}

效果：页面中所有的<p>元素都将居中对齐，且文本呈红色

2）id选择器：

根据HTML元素的id来选择特定的元素

由于元素的id在页面中是唯一的，所以id选择器只针对特定的元素

选择器语法： #id{}

#p3{
	text-align: center;
	color: #a13d30;
}

tips：颜色除了用颜色名表示外，也可以用一个十六进制的颜色值来表示

3）类选择器：

元素选择器作用于所有标签相同的元素，范围太宽；id选择器作用于单个元素，范围又太小

以<p>标签为例，如果想修改第3、4、5、6、7段话，用元素选择器无法实现，id选择器要操作五次又过于麻烦。

因此我们可以利用class属性对HTML元素进行分类

注：类名不能以数字开头

<p class="center"> a paragraph </p>

在CSS文件中

**选择器语法： ** .class{}

.center{
	text-align: center;
}

一个HTML元素可以同时属于多个类，例：

<p class="red center"> 这个段落属于两个类 </p>

上例中<p>元素将根据red和center进行样式设置

4）通用选择器：

通用选择器作用于页面上所有的HTML元素

* {
  text-align: center;
  color: blue;
}

2.样式优先级

在一个样式表中，由于多个选择器可以作用于同一个HTML元素，因此有可能存在不同选择器的样式发生冲突的情况。选择器的优先级如下：

id选择器>类选择器>标签选择器>通用选择器

在选择器优先级相同时，靠后的样式会覆盖靠前的样式，例：

一个HTML元素可以拥有多个class，这些class中样式有可能发生冲突

这时候优先级将根据CSS文件中class的位置确定，位置靠后的会覆盖位置靠前的

一个HTML文件可以导入多个样式表，不同样式表可能为同一个HTML元素制定了样式，优先级如下：

行内样式>内部样式、外部样式>浏览器默认样式

内部样式和外部样式优先级相同，二者都在<head>标签内，代码在后面的将覆盖代码在前面的

3.HTML元素的结构

HTML元素内可以包含其他HTML元素，即HTML元素的嵌套。

我们将嵌套在内部的元素称为子元素、外部的元素称为父元素。例：

<html>
	<head>
        
    </head>
    <body>
        <h1>
            我是标题
        </h1>
        <p>
            我是一段文字
        </p>
    </body>
</html>

<head>和<body>是<html>的子元素

<h1>和<p> 是<body> 的子元素

我们可以用树形结构来展示元素间的父子关系：
在这里插入图片描述

4.伪类选择器

伪类选择器用于向选择器添加特殊效果，如：

对于某个HTML元素在特殊状态（如鼠标悬浮在上面时）下的样式进行设置
选择第 i 个子元素

为什么叫伪类呢？因为它的效果和类相似，是从HTML中，选出符合某个条件的一部分元素。

**选择器语法： ** :伪类名{}

伪类选择器是比较多的，下面介绍的只是常用的伪类，剩余的可查询W3school

链接伪类选择器

链接伪类选择器是针对链接（即<a>元素）的选择器

:link{} ：未被访问过的链接
:visited{} ：被访问过的链接
:hover{} ：鼠标悬停时的链接
:active{} ：已经选择的链接，即鼠标点击链接但还没松开时的状态

注意：

a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！
a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
伪类名称对大小写不敏感。

最常用的写法是只指定hover的样式：

a {
    color: grey;		
    text-decoration: none;  //去掉下划线
}
a:hover {
    color: red;
}

即只指定了鼠标悬浮在链接上时的样式

结构伪类选择器

结构伪类选择器是CSS3中的新特性，可以根据元素在文档中所处的位置，来动态选择元素

最常用的就是一个:nth-child(n) ，其它了解即可

语法	实例	实例说明
:first-child	p:first-child	选择所有是父元素最后一个子元素的<p>元素
:last-child	p:last-child	选择所有是父元素第一个子元素的<p>元素
:nth-child(n)	p:nth-child(2)	选择所有是父元素第二个子元素的<p>元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有是父元素倒数第二个子元素的<p>元素
:first-of-type	p:first-of-type	选择所有父元素下第一个<p>元素
:last-of-type	p:last-of-type	选择所有父元素下最后一个<p>元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有父元素下第二个<p>元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有父元素下倒数第二个<p>元素
:only-child	p:only-child	选择所有是父元素唯一一个元素的<p>元素
:only-of-type	p:only-of-type	选择所有父元素下唯一的<p>元素

nth-child() 的参数可以是数字、关键字或一个公式

nth-child(odd) ：选出所有第奇数个孩子
nth-child(even)：选出所有第偶数个孩子
nth-child(n) : 这里可以将 n 理解为一个自然数组成的数列： $\cdot\cdot\cdot \cdot$ ，所以效果是选出所有孩子
nth-child(2n) ：当n为自然数时，2n表示的就是偶数，所以等价于even
nth-child(2n+1) ：同理，等价于奇数
nth-child(3n) ：选出第 $3,6,9,12,15\cdot\cdot\cdot\cdot$ 个孩子

目标伪类选择器

目标选择器是针对具有id的元素而设置的

锚点跳转是一个很常见的功能，它的实现步骤如下：

给一个元素设置 id = new
将一个链接设置为 <a href="#new">点击跳转</a>

这样一来，点击链接后就会跳转到 id为 new 的元素所在的位置

如果仔细观察地址栏，可以发现在地址的末端出现了#new

目标选择器语法： :target { }

选择当前正在活动的元素，正在活动指的是用户通过<a> 标签跳转到了该元素所在位置

可以尝试一下下面这个小案例

<!DOCTYPE html>
<head>
    <title>目标选择器</title>
    <style type="text/css">
    a {
        color: grey;
        text-decoration: none;
    }
    a:hover {
        color: red;
    }
    h2 {
    	color: red;
    }
    :target {
        color: blue;
        font-size: 40px;
    }
    #text4:target{
    	color: green;
    }
    </style>
</head>

<body>
    <p id="menu">
        <a href="#text1">示例1</a>|
        <a href="#text2">示例2</a>|
        <a href="#text3">示例3</a>|
        <a href="#text4">示例4</a>|
        <a href="#text5">示例5</a>
    </p>
    <h2 id="text1">示例1</h2>
    <br><br><br><br><br><br><br>
    <h2 id="text2">示例2</h2>
    <br><br><br><br><br><br><br>
    <h2 id="text3">示例3</h2>
    <br><br><br><br><br><br><br>
    <h2 id="text4">示例4</h2>
    <br><br><br><br><br><br><br>
    <h2 id="text5">示例5</h2>
</body>

</html>

5.复合选择器

多个选择器，可以通过一定的方式组合成复合选择器

交集选择器

交集选择器由标签选择器和类选择器构成，例：

h3.special{}   /*选择类名为special的h3元素*/
p.one{}    /*选择类名为one的p元素*/

注：两个选择器之间不能有空格！

这个用得很少，不建议使用

并集选择器

又称分组选择器，可以同时选择多个选择器，选择器间用逗号隔开，例：

h1,h2,h3,h4,h5,h5{} /*选择所有的标题元素*/
.one, p , #test { /*同时选择三个元素*/
    color: red;
}

若有多个HTML元素的样式相同，或部分相同，就可以通过分组选择器来大幅度地缩减代码

后代选择器

又称包含选择器，例：

p strong {} /*选择p元素内的所有strong元素*/

子代和子代的子代都是后代，也就是说该选择器是选择所有包含在内的元素

后代选择器也可以写很多层：

.prar .one p strong {}

子代选择器

子代选择器，只选择子元素，例：

p > em{} /*选择所有父元素是p元素的em元素*/

以上的选择器，大都是基于HTML元素的关系来选择元素的，除此之外还有：

element + element：相邻弟弟选择器，两个element必须在同一层级且必须紧紧相邻
element ~ element：所有弟弟选择器，两个element必须在同一层级

6.属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

语法	实例	实例解释
[attribute]	[class]	选择所有带有class属性的HTML元素
[attribute=value]	[target=_blank]	选择所有target属性为_blank的HTML元素
[attribute~=value]	[title~=flower]	选择所有title属性中包含flower的HTML元素
[attribute\|=value]	[lang\|=en]	选择所有lang属性以en开头的HTML元素
$\cdot\cdot\cdot$	$\cdot\cdot\cdot$	$\cdot\cdot\cdot$

剩余部分可看选择器

7.伪元素选择器

伪元素选择器语法：::伪元素名{}

伪元素选择器用来选择一个元素的指定部分

选择器	描述
::first-letter	只能应用于块级元素。设置文本的首字母样式
::first-line	只能应用于块级元素。设置文本的首行样式
::selection	设置被用户选择的文本的样式

用户在浏览页面时，可以选择文本，默认情况下被选择的部分会显示为蓝底白字：

使用::selection 选择器就可以改变被选择时的样式

除了上面三个针对文本的选择器，还剩两个非常重要的伪元素选择器：

::before选择器在被选元素的内容前面插入内容。
::after选择器在被选元素的内容后面插入内容。

具体插入什么内容，由content属性来指定

例：

p:before { 
	content:"台词：";
}

在p元素的最前面插入 台词：

**注：**被插入的内容仍然处于p元素的内部！！！这个选择器是在内部的最前面插入内容

三.传统布局

CSS中的样式其实不需要怎么学的，要用到啥去搜索对应的样式就可以了

但是页面布局部分是需要理解的，比较重要

传统布局基于盒装模型，依赖 display + position +float 属性来实现

1.常用标签

①span标签

span标签用于组合行内样式，以便通过样式来格式化它们

注：span标签本身没有任何格式表现，应用样式后才会产生视觉上的效果

比如在一行话内想要将某几个字变为橘红色，就可以用span标签将这几个字放起来，例：

<p>
	ABCDEFGHIJKLMOPQRSTUVWXYZ<br>
	<span id="promote">提示：</span>少了一个字母
</p>

#promote{
	color: orange;
	font-size: 20px;
}

②div标签

div标签和span标签类似，没有特定含义，区别在于div元素是块级元素，独占一行。

div标签的作用在于组合块级元素，为它们设置样式；另一个用途是用于文档布局

③其他

ul标签、p标签等等，在HTML中已经介绍过了

2.浮动

float属性可以令元素变为浮动元素

语法：float:none/left/right

none/left/right分别表示不浮动、左浮动、右浮动，默认值为none

浮动元素的特性：

排除在普通文档流之外，不在页面中占据空间
浮动元素间不会互相重叠
浮动元素会生成一个块级框，一行可以有多个块级框
浮动元素不会超过父元素的边缘

在HTML的标准流中，行内元素从左向右排列；块级元素独占一行，从上到下排列；

在标准流中，是无法实现在一行中显示多个块级元素（如两个标题没法在同一行显示）的。

浮动可以理解为令元素漂浮在标准流之上，即浮动元素和非浮动元素可以互相重叠。在HTML的正常布局中，元素之间是不会有覆盖情况的，但是浮动元素可以覆盖在普通元素之上。

即便是一个行内元素，被设置为浮动元素后也会具有宽、高属性，并且不会独占一行

一言以蔽之，浮动可以使元素脱离文档标准流，按照指定的方向移动，直到碰到相邻浮动元素或父级的边界

clear属性可以清除浮动

语法：clear:left/right/both/none

left/right/both/none分别表示元素左边不允许有浮动元素、元素右边不允许有浮动元素、元素两边不允许有浮动元素、允许两边有浮动元素，默认值为none

清除浮动的意义：

如果父元素没有设置高度，则其高度将会随着子元素高度的增加而增加；但如果父元素中存在浮动元素，由于浮动元素脱离标准流，使得容器高度无法自动伸长，导致内容溢出
也可以用来实现浮动元素的换行

常见清除浮动做法有：

在末尾加一个空的div元素，设置clear属性为both：代码中存在许多无意义的空div，可读性差
对父元素设置高度：只适合高度固定的布局
对父元素定义overflow:hidden

overflow属性和height属性不能共存，且必须存在width属性

清除浮动后父元素可以感知到浮动子元素的高度

3.定位

定位通过position属性来实现

语法：position:absolute/fixed/relative/static

absolute：元素使用绝对定位，相对于 static定位以外的第一个父元素进行定位
fixed：元素使用绝对定位，相对于浏览器窗口进行定位（即使拖动页面，也始终保持在屏幕的固定位置）
relative：元素使用相对定位，相对于其正常位置进行定位
static：默认值，没有定位，元素按照标准流出现在正常的位置

由于static即不定位元素，所以absolute就是相对于最近的已定位的祖先进行定位

定位需要配合top/bottom/left/right四个属性来控制元素所处位置

top控制当前元素的上边缘和定位对象的上边缘之间的竖直距离
bottom控制当前元素的下边缘和定位对象的的下边缘之间的竖直距离
left控制当前元素的左边缘和定位对象的左边缘之间的水平距离
right控制当前元素的右边缘和定位对象的右边缘之间的水平距离

top和bottom中选一个用，left和right选一个用就可以了

注：当position属性值为static时，这四个属性全部无效

relative 是以当前位置为参照物，移动指定的距离。需要注意的是，在使用 position:relative 改变元素的位置后，元素原位置是仍然被占用的，这样设置的目的应该是为了不影响其他元素的布局

absolute 的参照对象较为复杂。需要注意的是使用 position:absolute 的元素将脱离文档流。但它和使用float属性脱离文档流不同，主要区别在于float只是半脱离，其他文本仍然会避开float元素；而absolute则不会被避开

relative元素原有物理位置仍被占用，absolute不会占据原有物理位置！

在这里插入图片描述

fixed 是以浏览器的窗口为参照对象进行定位的。当浏览器的窗口大小发生改变、或者用户滚动页面时position:fixed 的元素始终将出现在固定的位置

position属性设置的是元素的平面位置，z-index可以用于设置元素在z轴上的位置

当若干个元素重叠时，z-index属性可以决定谁在上面、谁在下面

语法：z-index:number

z-index 默认值为auto（和父元素的z-index值相等） IE浏览器下则z-index默认为0

对于两个z-index值相同的元素，后定义的元素将覆盖先定位的元素（子元素覆盖父元素）

注：z-index属性只支持对定位元素使用！（即非static元素）

4.display属性

根据CSS规范，每一个网页元素都有display属性，用于确定元素的类型。如div元素的默认值为block（块级元素），span元素的默认值为inline（行内元素）

display常见属性值：

none：被隐藏的元素
inline：行内元素/内联元素
block：块级元素
inline-block：行内块元素/内联块元素

inline 为行内元素，不具备宽高属性，且不独占一行；

block为块级元素，具备宽高属性且独占一行

inline-block元素则具备宽高属性，但不独占一行，和浮动元素（使用的更多）比较像

display:none可以隐藏元素，需要注意的是与其类似的两个属性

visibility:hidden/visible：使元素不可见/可见
opacity:0：设置元素透明度为0

使用这两种方法来隐藏元素，即便元素看不见了仍然占据原有的物理空间

display:none 则不占据原有物理空间。

5.盒子模型

在CSS中，可以将所有HTML元素看作盒子：

在这里插入图片描述

Margin(外边距) - 边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

在设置元素的width、height属性时，只是在对盒子的内容区域设置宽高；

HTML元素的实际宽度是比width要宽的，因此在制作页眉时可以发现，如果不令元素的margin为0，元素和浏览器窗口的边缘始终还是隔着一段距离

Margin：

margin属性设置的是元素的外边距，默认值为0，没有继承性

取值可以是auto，%，负值

设置方式：

margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;

↑分别设置元素的上边距、下边距、左边距、右边距

margin:10px 5px 15px 20px

↑四个参数分别设定元素的上边距、右边距、下边距、左边距（顺时针顺序）

margin:10px 5px 15px;

↑上边距为10px，左右边距为5px，下边距为15px

margin:10px 5px;

↑上边距和下边距都是10px，左右边距为5px

margin:10px;

↑所有外边距都是10px

margin属性可以用来实现块状元素的居中：

margin: 0 auto;

上下居中无法自动实现，只能利用top属性来调整

块状元素内的文本、行内元素、行内块元素的居中，可以通过text-align:center声明来调整；

外边距的特点：

盒子的上下外间距存在合并问题

例：一个元素的下边距为100px，下面的一个元素上边距为50px，则二者的实际距离只有100px（取最大值）
行内元素没有上下外边距，只有左右外边距（且不会合并）
浮动元素的外边距不会合并
允许使用负的外边距

Border：

盒子的边框具有三要素：宽、样式、颜色

分别用 border-width、border-style 和 border-color 属性来指定

也可以统一用style属性来指定，一般以宽度、样式、颜色的顺序来写，例：border:1px solid red;

边框的样式：默认值为none

dotted：点状
solid：实线
double：双线（需要设置宽度至少为3px，否则显示不下）
dashed：虚线
none：无边框

边框的宽度：默认值为3px

边框的颜色：默认值为黑色

令，可以单独设置某一边的边框：

border-right:5px solid red;
border-left-style:solid; border-left-width:5px;

Padding：

内边距和外边距的写法是一样的，不再赘述

需要注意的是，Padding、Border 都是盒子的一部分，Margin则不是

比如：

div{
	background-color:red;
	height:200px;
    width:200px;
	border:5px;
	padding:20px;
}

则这个红色的div元素，实际宽度是200+2*5+2*20=250px

换言之，background-color这一属性可以作用于内边距和边框

怪异盒模型：

IE浏览器中的盒子模型，宽(width属性)包括了width和padding

我们可以利用box-sizing属性来改变元素的盒模型

box-sizing:content-box 标准盒模型
box-sizing:border-box 怪异盒模型

怪异盒模型中width为多少，盒子的宽就是多少

标准盒模型中盒子的宽为width+padding+border

四.弹性布局

1.概述

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，提供了一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

通过将display属性值设置为flex或inline-flex可以使得HTML元素变为弹性容器

flex容器中存在两根轴：主轴（main axis）和侧轴（cross axis）

在这里插入图片描述

flex容器中所有项目（子元素）按照主轴排列成一行

这个效果和float比较像，但是更加灵活

2.flex

传统布局将一个盒子三等分的写法：

section div { /*父元素为section 三个子元素为div*/
    width: 33.33%;
    height: 100%;
    float: left; 
}

如果要求改变三个子元素的间距，则需要重新计算width值，很麻烦

弹性布局写法：

将父元素变为弹性容器： display:flex;
子元素设置： height:100%;flex:1;

flex属性值定义每个子元素所占空间，因为所有子元素都为1，和为3，所以每个元素占 $\frac{1}{3}$

此时即便再给子元素增加间距：margin: 0 5px，依然能维持三等分的状态

若子元素1设置为flex:1 ，子元素2设置为flex:2，子元素3设置为flex:3，则三个元素分别占 $\frac{1}{6}$ 、 $\frac{1}{3}$ 、 $\frac{1}{2}$

若子元素1设置为固定宽度width:300px，则剩下两个元素会根据还剩的空间按比例分配

和用百分比给元素宽度赋值相同，这种写法也是响应式的。但是为了不让元素太窄导致看不出内容，可以利用属性min-width限制元素的最小宽度，同理max-width限制最大宽度

3.flex-direction

flex-direction属性可以改变弹性容器主轴的方向

值	描述
row	默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	灵活的项目将垂直显示，正如一个列一样。
column-reverse	与 column 相同，但是以相反的顺序。

借鉴大漠孤魂的图片，来更直观地感受：

row（默认值）：主轴为水平方向，起点在容器的左端。
row-reverse：主轴为水平方向，起点在容器的右端。
column：主轴为垂直方向，起点在容器的上沿。
column-reverse：主轴为垂直方向，起点在容器的下沿。

4.flex-wrap

默认情况下弹性容器里的所有项目（子元素）都排在一条线上，flex-wrap定义如果一行排不下该如何换行

注：给元素设置最小宽度、固定宽度都可能导致一行放不下所有子元素

值	描述
nowrap	默认值。不换行，直接溢出
wrap	溢出部分另起一行
wrap-reverse	溢出部分占据第一行

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

flex-direction属性和flex-wrap属性可以简写为flex-flow属性，默认值为row nowrap。

5.justify-content

justify-content 定义了项目在主轴上的对齐方式。

值	描述
flex-start	默认值。行首和主轴的起始位置对齐
flex-end	行尾和主轴的结束位置对齐
center	居中排列
space-between	间隔均匀地排列
space-around	每个项目两侧间隙相同

flex-start:向主轴的起始位置对齐，也就是从主轴的起始位置开始排列。

flex-start

flex-end：向主轴结束位置对齐，也就是从主轴结束的位置开始排列。

flex-end

center：居中

center

space-between：如果有两个以上的项目，则容器主轴的开始和结束位置各一个，其他的项目均匀排列，项目之间的间隔相等。如果只有一个项目则只在容器主轴的开始位置排列
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。排列顺序同样和flex-direction有关。如果只有一个项目则排列在中间。

6.align-items

弹性容器中的所有项目沿着主轴排列，align-items则定义项目在纵轴上的位置

值	描述
flex-start	项目和侧轴的起点对齐。
flex-end	项目和侧轴的终点对齐。
center	项目位于侧轴的中点。
baseline	项目的第一行文字的基线对齐。
stretch	默认值，若项目未设置高度或设为auto，拉伸子元素至占满整个容器的高度。

flex-start：项目和侧轴的起点对齐。
flex-end：项目和侧轴的终点对齐。
center：项目位于侧轴的中点。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

7.align-content

弹性容器中是可能存在多条主轴的，这在flex-wrap属性中进行定义

align-content属性可以定义不同轴的排列方式，在只有一条轴时不起作用

值	描述
flex-start	与侧轴的起点对齐。
flex-end	与侧轴的终点对齐。
center	位于侧轴的中点。
space-between	与侧轴两端对齐，轴线之间的间隔平均分布。
stretch	默认值，多行拉伸至占满整个侧轴。
space-around	每根轴线两侧的间隔都相等。

stretch（默认值）：多行占满整个侧轴。
flex-start：与侧轴的起点对齐。
flex-end：与侧轴的终点对齐。
center：与侧轴的中点对齐。
space-between：与侧轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

五.CSS三大特性

1.层叠性

层叠性指多种CSS样式叠加

样式冲突：当某个元素的一个属性，同时被两种样式指定时，其中一个样式就会覆盖掉另一个样式

样式冲突时，采取就近原则，因此：

行内样式>内部样式、外部样式>浏览器默认样式

外部样式是通过<link href="...">引进的，内部样式是通过<style>标签书写的，二者谁在HTML文档中离目标元素近，谁就能覆盖掉对方。而因为样式书写都是在元素之前的，所以谁写在后面谁就能覆盖对方

而如果同为行内样式/内部样式/外部样式，则依然采取就近原则，例：

<style>
	p {
		color:red;
	}
	p {
		color:blue;
	}
</style>

最终p标签中的文字呈现蓝色

当然就近原则不是绝对的，同处一个样式表中的不同选择器，还需要服从另一个定律

id选择器>类选择器>标签选择器>通用选择器

<head>
	<style type="text/css">
		#t {
			color: red;
		}
		p {
			color: blue;
		}
	</style>
</head>
<body>
	<p id="t">
		啦啦啦啦
	</p>
</body>

最终p标签中的文字呈现红色

因此，我们可以这么认为：浏览器是依次按行执行HTML文档的，所以后来者会覆盖前者；而同一个样式表中的样式，会被统一处理，因此id选择器即便是写在最前面优先级也高于其它选择器

2.继承性

继承性，指的是HTML子元素会继承父元素的某些样式，例：

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

虽然p标签没被指定任何样式，但其中的文字仍然会呈现红色

继承性的情况较为复杂，有些属性可能具有继承性有些没有；同样的属性有些标签可以继承而其他标签不会继承

一个经典的例子就是a标签，不会继承父元素的color值

从父元素处继承的属性值，发生样式冲突一定会被覆盖。

3.优先级

优先级规定的主要是选择器之间的优先级，也就是说当同一个样式表内发生了样式冲突时的解决方案

id选择器>类选择器>标签选择器>通用选择器 这个优先级排序是较为粗糙的，因为样式表中很可能存在多个选择器组合形成的样式，例：

<head>
    <style type="text/css">
    div p a{
        color: red;
    }
    p a {
    	color: black;
    }
    </style>
</head>
<body>
    <p>
        <a class="more">ttt</a>
    </p>
</body>

最后的执行情况是呈现红色

继承自父元素的样式，贡献为0.0.0.0

标签选择器和伪元素选择器的贡献为：0.0.0.1

类选择器和伪类选择器的贡献为：0.0.1.0

id选择器的贡献为：0.1.0.0

行内样式的贡献为：1.0.0.0（行内样式相当于一个选择器嘛）

这一串四个数字，相当于四个位：如0.1.0.0优先级大于0.0.1000.0

每个选择器都可能是由多个选择器组合而成的，此时不同选择器的贡献值会叠加，如：

a{ color:red;} /* 0.0.0.1 */
p a{ color:blue;} /* 0.0.0.2 */
div p a{color:red;}  /*0.0.0.3*/
p a.more{ color:green;} /* 0.0.1.2 */

此外还有!important命令表示极为重要，一定会被执行，例：

h1{ color:red!important;}

当不同选择器的权重/贡献相同时，采用就近原则

例1 ：
在这里插入图片描述

答案：蓝色

解释：虽然有!important，但是继承的权重为0，故#father #son的权重为0.2.0.0最高

例2：

在这里插入图片描述

答案：黄色

解释：首先三个选择器都能定位到文字所在容器，不需考虑继承；计算权重得div #box3和#box1 div并列最高，此时采用就近原则，故最终为黄色

六.字体

Chrome中字体的默认格式是微软雅黑、16号字体：

在这里插入图片描述

font-family：字体

在 CSS 中，我们使用 font-family 属性规定文本的字体。例：

font-family: "microsoft_yahei";   //设置字体属性为微软雅黑

我们也能用中文来指定字体：

font-family: "微软雅黑";

但是中文编码有两个缺陷：

文件编码方式可能不匹配
在较早的系统中这种写法不被支持

所以更建议使用对应的英文名来指定字体

font-family 属性中可以同时包含多个字体，字体名称间应以逗号分隔：

font-family: "SimSun","microsoft_yahei","Serif";

这么操作是为了确保网页和浏览器/操作系统之间的兼容性。位于前面的优先级高，如果浏览器无法识别前面的字体会自动往后找合适的字体。

在 CSS 中，有五个通用字体族：

衬线字体（Serif）
无衬线字体（Sans-serif）
等宽字体（Monospace）
草书字体（Cursive）
幻想字体（Fantasy）

所有不同的字体名称都属于这五个通用字体系列之一。这五个字体名称是不需要考虑兼容性的，所以建议在font-family的最后放上通用字体。

font-family属性具有继承性，即默认和父元素字体相同

font-style：斜体

font-style主要用来定义斜体文本，可能的取值有：

normal：默认值，由浏览器显示一个标准的字体样式
italic：斜体字
oblique：倾斜，与斜体非常像
inherit：规定从父元素处继承样式

font-weight：字体粗细

font-weight用于定义字体的粗细，可能的取值有：

normal：默认值，标准字符
lighter：更细的字符
bold：粗字符
bolder：更粗的字符
{100，200，，，900}：由数字来定义，400等于normal，700等于bold
inherit：规定从父元素处继承样式

font-size：字体大小

font-size是用来设置字体大小的属性

font-size的值可以是绝对尺寸或相对尺寸：

绝对尺寸将文本设置为指定大小，不允许用户更改文本大小（可访问性差）
相对尺寸是相对周围元素的大小

文本的默认大小是16px

①以像素设置字体大小

像素是绝对单位，例：

h1 {
  font-size: 40px;
}

②用em设置字体大小

em是一个相对的单位，是当前元素相对于父元素字体的大小而言的；

例如：父元素font-size: 32px ，子元素font-size: 1em ，则子元素的字体大小也是32px

若父元素中没有设置字体大小，即等价于使用了默认大小16px，例：

body{
	font-size: 25px;
}
p{
	font-size: 1em;
}
span{
	font-size: 2em;
}

③用百分比设置字体大小：

百分比也是一个相对单位，和em效果相同

虽然网上说em和百分比有区别，但没有特别明确的说法

最好的写法是在body中用百分百设置字体大小，其他地方都用em：

body{
	font-size: 100%;
	font-family: KaiTi,NSimSun,SimHei,SimSun;
}
p:first-of-type{
	font-size: 0.5em;
}
p:nth-of-type(2){
	font-size: 2em;
}
p:last-of-type{
	font-size: 1.3em;
}

④响应式字体大小：

我们可以使用单位vw（viewport width，视口宽度）来设置文本大小

文本大小会遵循浏览器窗口大小进行相应缩放

1vw等于当前视口宽度的百分之1

font：字体属性简写

为了缩短代码，可以在font属性中指定其他所有属性的值

顺序依次是 font-style、font-weight、font-size、font-family （顺序不能更改）

body{
	font:italic bolder 32px KaiTi;
}

font-style 和 font-weight可以省略

body{
	font: 32px KaiTi;	
}

七.文本

color：文本颜色

color 属性用于规定文本的颜色。可能的取值如下：

值	描述
color_name	颜色名称，如 red、blue、purple、orange等
hex_number	十六进制值，如： #ff0000、#000000（黑色）、#ffffff（白色）
rgb_number	rgb 代码，如： rgb(255,0,0)
inherit	从父元素继承颜色。

rgb是工业界的一种颜色标准，通过R(红色)、G(绿色)、B(蓝色)的叠加，可得到几乎包括了人能感知的所有颜色。

RGB各有256级亮度，从0、1、2…直到255。共能组合出约1678万种色彩，即 $256 \times 256 \times 256 = 16777216$

十六进制值是对RGC颜色的一种表示，每两个十六进制位能表示RGB中的一个参数

如红色可以表示为rgb(255,0,0)，也可以表示为#FF0000

颜色半透明：

这是CSS3中新增的特性

语法：color: rgba(r,g,b,a);

其中 $a$ 表示透明度，取值为0到1之间。当 $a$ 为0时，透明度最高，文本透明不可见了。

text-align：水平对齐方式

text-align 属性规定元素中的文本的水平对齐方式。

值	描述
left	把文本排列到左边。
right	把文本排列到右边。
center	居中对齐，把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

两端对齐：文本行的左右两端都放在父元素的内边界上。然后调整单词和字母间的间隔，使各行的长度恰好相等。

line-height：行间距

line-height 属性设置行间的距离（行高）。

这个属性的具体设置比较复杂，就不过多展开了。使用的时候用像素值来设定，在根据效果调整行高的大小就行了

text-indent：首行缩进

text-indent 属性规定文本块中首行文本的缩进。

在实际生活中，一个段落的第一行都需要空几格，这就是首行缩进。

一般这个值设置为2em，即text-indent:2em，2em就是两个汉字的宽度

letter-spacing：字间距

letter-spacing 属性用于定义字符间距，即在文本字符框之间插入多少空间。

这个属性的默认值为0

注：允许使用负值，让字符间更加紧密

word-spacing：单词间距

这是一个针对英文的属性，因为中文中没有单词的概念，中文的段落就是由字组成的。

所以这个属性对中文不生效。

text-shadow：文字阴影

text-shadow 属性向文本设置阴影，用于增加文字的立体感

语法：text-shadow: h-shadow v-shadow blur color;

需要设置四个参数的值：

参数	值
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

前三个参数的值都以px为单位，color参数的值和color属性的值设置方式相同

八.背景

为网页添加背景图片、颜色

属性	描述
background-color	添加背景颜色
background-image	添加背景图片
background-repeat	指定背景图片的填充方式
background-position	指定背景图片的位置
background-attachment	指定背景图片是否随页面滚动

background-image

background-image 属性可以为元素增添背景图像。

语法：background-image: url("图片所在路径");

默认情况下，图片会平铺来覆盖整个元素。

如：图片高300px ，宽300px；将其添加到一个高300px，宽400px的div元素中，为了能铺满整个元素，图片会重复，类似这种效果：

在这里插入图片描述

background-repeat

background-repeat属性指定背景图片的填充方式

可能的值	描述
repeat-x	横向平铺
repeat-y	纵向平铺
repeat	默认值，横向、纵向都平铺
no-repeat	不平铺

background-position

不平铺，背景图片就无法覆盖整个元素，没覆盖到的区域就显示为背景颜色

在这里插入图片描述

background-position可以在此时指定背景图片的位置

语法：

用两个方位名词来指定位置，如：left top；right bottom；center bottom等
用百分比或像素值来指定位置，如：10px 30px、10% 20px，前者表示距离父元素左端的位置，后者表示距离父元素顶端的位置

background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

当值为fixed时，背景图片不会随着页面的滚动而滚动

默认值为scroll ，表示背景图片会滚动

background：属性简写

如需缩短代码，也可以在一个属性background中指定所有背景属性。它被称为简写属性。

在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。例：

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

background-size

CSS3中新增的特性，用于对背景图片进行缩放

语法：

background-size: 80% 将图片等比缩放至原图的百分之八十
backgournd-size:100px 指定背景图片宽度，并进行等比缩放，若原图宽度是300px则相当于缩小为1/3
background-size:400px 500px 指定背景图片宽、高，可能导致图片失真扭曲
**background-size:cover**自动调整缩放比例使得图片铺满背景，是等比缩放所以不失真，溢出部分被隐藏。（因为宽度和高度都满足盒子需要，势必导致其中一维超出盒子）
background-size:contain 也是等比缩放，但保证图片被完整显示

background:size和background-size:contain都是对图片进行等比缩放，前者在宽度和高度都达到盒子需要时才停止缩放，并隐藏溢出部分；后者在宽度和高度中的一个达到盒子需要后就停止缩放，所以不会有溢出部分被隐藏，但会导致无法铺满背景

九.动画

transition：过渡

过渡：在元素从一种样式切换到另一种样式时添加效果。

当元素属性发生变化时，如width从100px变化为300px：

在这里插入图片描述

这种变化是很具有突兀感的，transition属性可以使得元素的状态变化更加平滑

属性	描述
transition	四个过渡属性的简写
transition-property	定义过渡属性，定义哪个属性要实现过渡效果，默认值为all
transition-duration	定义过渡效果花费的时间，默认值为0。单位是 s 或 ms
transition-delay	定义等待多少时间后开始过渡，默认值为0
transition-timing-function	定义过渡效果的速度曲线，默认值为ease

将transition-duration设为2s后：

在这里插入图片描述

transition-timing-function的可能取值：

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition属性的语法：transition: property duration timing-function delay;

transform：2D变形

transform 属性可以实现元素的位移、旋转、倾斜、缩放

语法：transform: none|transform-functions; 通过不同的 transform-function来实现不同的变化效果

注：transform 属性需要借助 transition 来实现动画效果，否则同样会有“突兀”感

元素的位移

值描述
translate(x,y) 实现元素的位移、移动
translateX(x) 只在 x 轴方向移动。
translateY(y) 只在 y 轴方向移动
例：transform:translate(100px,100px)

注1：若只写一个参数则只在 x 轴方向移动

注2：若 x、y 值为负则向左、上位移；若为正则向右、下位移

注3：若移动距离不以 px 为单位，而是以 % 为单位，则这个指的是自身宽度的百分比

所以出现一个很妙的居中写法：left:50%;top:50%;transform:translate(-50%,-50%);
元素的缩放

值描述
scale(x,y) 实现元素的缩放转换。
scaleX(x) 实现水平缩放
scaleY(y) 实现垂直缩放
例：transform:scale(1.2,1.5) //水平缩放1.2倍，垂直缩放1.5倍

注1：若只写一个参数则水平、垂直缩放相同倍数

注2：如放大一张照片，并减去溢出部分，则能实现拉近镜头的效果：
- div{overflow:hidden;}以及div:hover img{transform:scale(1.2);}
元素的旋转

值描述
rotate(angle) 实现元素的旋转
例：transform:rotate(90deg) //顺时针旋转90度
**transform-origin：**设置元素变形的基点

比如在旋转中，定义元素绕着哪个点进行旋转（默认是中心点）

语法：transform-origin: x-axis y-axis z-axis;

默认值：transform-origin: 50% 50% 0;

可能的取值：
- x-axis：left、right、center、像素、百分比（后两者即基于左上角的距离）
- y-axis：top、bottom、center、像素、百分比
例：transform-origin: left top;以左上角为基点

值	描述
translate(x,y)	实现元素的位移、移动
translateX(x)	只在 x 轴方向移动。
translateY(y)	只在 y 轴方向移动

值	描述
scale(x,y)	实现元素的缩放转换。
scaleX(x)	实现水平缩放
scaleY(y)	实现垂直缩放

值	描述
rotate(angle)	实现元素的旋转

transform：3D变形

鸽ing

Nefu_qky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0x02 CSS快速入门

前言：CSS内容较杂，建议只看前五节，对CSS有一定的认识；后面需要用到对应的样式再去检索；另，本篇文章涉及的知识肯定不全，毕竟这块知识太杂了，后续应该会更新文章目录一.CSS简介1.概述2.语法3.导入方式行内样式内部样式外部样式4.注释二.选择器1.简单选择器2.样式优先级3.HTML元素的结构4.伪类选择器链接伪类选择器结构伪类选择器目标伪类选择器5.复合选择器交集选择器并集选择器后代选择器子代选择器6.属性选择器7.伪元素选择器三.传统布局1.常用标签2.浮动3.定位4.display属性5..
复制链接

扫一扫

专栏目录