Web学习之CSS

最新推荐文章于 2024-08-02 12:09:11 发布

on the moon

最新推荐文章于 2024-08-02 12:09:11 发布

阅读量220

点赞数

文章标签： css 前端学习

本文链接：https://blog.csdn.net/weixin_48268385/article/details/124997083

版权

一. 什么是CSS

CSS是级联样式表（Cascading Style Sheets）的缩写。
HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
CSS涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等。
HTML的内容和CSS的表现是分离的，便于代码的撰写与维护。

准备工作：
要想逻辑清楚、条理清晰的构建CSS，需要在VS Code上安装Live Sass Compiler插件。
之后我们直接在工作区创建一个后缀为.scss的文件，点击底部的Watch Sass，插件会生成并随时更新你的.css文件。
本文均在.scss文件中撰写代码。

二. CSS语法

一条CSS样式规则由两个主要的部分构成：①选择器 ②以{}包裹的一条或多条声明。

h1 {color:rgb(17, 77, 240);font-size:50px;text-align:center;}

其中：
h1是选择器；
color、front-size,text-align为属性；
rgb(17,77,240)、50px、center为值；
color:rgb(17, 77, 240)为一个声明，font-size:50px为一个声明，text-align:center为一个声明；
这条规则表明，页面中所有的一级标题都显示为rgb(17, 77, 240)颜色，字体大小为50像数，且居中。

选择器是您需要改变样式的对象(上面的规则就一级标题生效)；
每条声明由一个属性和一个值组成。(无论是一条或多条声明，都需要用{}包裹，且声明用;分割)；
属性（property）是您希望设置的样式属性(style attribute)；每个属性有一个值；属性和值被冒号分开。

三. CSS选择器

一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除我们前面的元素选择器外，还有id和class选择器，其中class选择器使用非常普遍。

（1）id选择器

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

以下的样式规则应用于元素属性 id=“para1”:

#para1
{
    text-align:center;
    color:red;
}

上述代码意思为id为para1的元素文本居中且为红色。

在HTML中，元素的id值必须唯一；因此id 选择器适用范围只有一个元素。

（2）class选择器

class 选择器用于描述一组元素的样式，class 选择器可以在多个元素中使用；
CSS 中，class选择器以一个点"."号显示；

.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}

以上代码定义了三条规则，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色。
如下所示的页面：

<p class="center">我会居中显示的</p>
<p class="red">我是红色的</p>
<p class="center large red">我又红又大还居中</p>
<p class="red">我也可以是红的</p>

四. CSS如何生效

让CSS样式对页面生效，一般有三种方法：外部样式表，内部样式表，内联样式表。

（1）外部样式表

引入外部样式表是使用样式的主流方式，由于众多的样式规则单独放在一个文件中，与 HTML内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。

当样式需要应用于很多页面时，外部样式表将是理想的选择；
在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观；
每个页面使用 < link> 标签链接到样式表。

<link> 标签在头部：

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

说明：
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档；
外部样式表可以在任何文本编辑器中进行编辑；
文件不能包含任何的 html 标签。

示例

1.新建如下内容的一个 HTML文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Duffy and Friends</title>
    <!-- 注意下面这个语句，将导入外部的 mystyle.css 样式表文件 -->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
  <h1>Duffy and Friends</h1>
  <hr>
</body>
</html>

2.在同一目录新建一个样式表文件mystyle.css如下：

body {
    background-color: rgb(250, 219, 225);
    text-align: center;
  }
  h1 {
    margin-top: 20px;
    color:rgb(17, 77, 240);
    font-size: 50px;
  }

在浏览器中看到效果：
在这里插入图片描述

（2）内部样式表

一般而言，只有页面的样式规则较少时可采用内部样式表的方式。

当单个文档需要特殊的样式时，就应该使用内部样式表；
可以使用 <style> 标签在文档头部定义内部样式表。

就像这样：

  <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Duffy and Friends</title>
    <!-- 注意下面这个语句，将导入外部的 mystyle.css 样式表文件 -->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    
    <style>
    body {
    background-color: rgb(250, 219, 225);
    text-align: center;
  }
  h1 {
    margin-top: 20px;
    color:rgb(17, 77, 240);
    font-size: 50px;
  }
    </style>
</head>

<body>
  <h1>Duffy and Friends</h1>
  <hr>
</body>
</html>

该例子与上述例子一样的效果，但注意在<head>元素中引入了<style>标签，放入了样式。

（3）内联样式

所谓内联样式，就是直接把样式规则直接写到要应用的元素中；
内联样式是最不灵活的一种方式，完全将内容和样式合在一起，实际应用中非常少见。

例如：

<h3 style="color:green;">I am a heading</h3>

样式的优先级，从高到低分别是：

内联样式
内部样式表或外部样式表
浏览器缺省样式

其实，可总结为哪个样式定义离元素的距离近，哪个就生效。

五. 颜色, 尺寸, 对齐

（1）颜色

网页选用一种耐看、易用、符合心意的配色是不容易的，但幸运的是，ColorDrop 网站已经提供调配好的配色方案供我们直接使用。

CSS中，颜色值通常以以下方式定义:

十六进制 - 如：“#ff0000”
（十六进制六位数每两位分别表示红、绿、蓝的程度，ff0000表示全红）
RGB - 如：“rgb(255,0,0)”
（rgb中的3个字节分别代表RGB（Red，Green，Blue）的0～255的值 ，rgb（255,0,0）表示全红）
颜色名称 - 如：“red”

🎨补充1：背景颜色

background-color 属性定义了元素的背景颜色；
页面的背景颜色使用在body的选择器中。

实例：

body {background-color:#b0c4de;}

🎨补充2：背景图像

background-image 属性描述了元素的背景图像；
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

实例:

body {background-image:url('bgdesert.jpg');}

🎨补充3：背景图像中的linear-gradient() 函数

CSS中有一个linear-gradient() 函数把线性渐变设置为背景图像；
如需创建线性渐变，必须至少定义两个色标；
色标是您希望在其间呈现平滑过渡的颜色；
还可以在渐变效果中设置起点和方向（或角度）。

语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

值	描述
direction	定义渐变效果的起点和方向（或角度）
color-stop1, color-stop2,…	色标是您要在其间呈现平滑过渡的颜色。该值由一个颜色值组成，其后是一个可选的停止位置（0％到 100％之间的百分比值，或沿渐变轴的长度值）

实例：

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

这个线性渐变从顶部开始。它从红色开始，过渡到黄色，然后过渡到蓝色

🎨补充4：背景图像中的 background-position 属性

background-position 属性用来设置背景图像的起始位置；
这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

（2）尺寸

我们可以用 height 和 width 设定元素内容占据的尺寸。
常见的尺寸单位有：像数 px，百分比 %等。

CSS 尺寸属性

属性	描述
height	设置元素的高度
line-height	设置行高
max-height	设置元素的最大高度
min-height	设置元素的最小高度
width	设置元素的宽度
max-width	设置元素的最大宽度
min-width	设置元素的最小宽度

（3）对齐

1. 元素居中对齐

要水平居中对齐一个元素(如 <div>), 可使用margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配。

2. 文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可使用text-align: center;

3. 图片居中对齐

要让图片居中对齐, 可使用 margin: auto; 并将它放到块元素中
例如:

img {
    display: block;
    margin: auto;
    width: 40%;
}

4. 左右对齐 - 使用定位方式

可使用 position: absolute; 属性来对齐元素
例如:

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

5. 左右对齐 - 使用 float 方式

我们也可以使用 float 属性来对齐元素
例如:

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候可使用 "clearfix(清除浮动)" 来解决该问题。

我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

.clearfix {
    overflow: auto;
}

6. 垂直居中对齐

CSS 中有很多方式可以实现垂直居中对齐, 一个简单的方式就是头部顶部使用 padding

六. 盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子;
从内到外，这个盒子由内容 content, 内边距 padding, 边框 border, 外边距 margin构成;
盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

如下图所示盒子模型结构:
在这里插入图片描述

说明：

Content 内容，显示文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，围绕在内边距和内容外的边框, 默认不显示
Margin 外边距，边框以外与其它元素的区域

实例：
HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Duffy and Friends</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


<body>
    <section class="header">
      <nav>
        <div id="navLinks">
          <a href="#">首页</a>
          <a href="#character">人物简介</a>
          <a href="#story">人物故事</a>
          <a href="#message">留言</a>
        </div>
      </nav>
      <div class="text-box">
        <h1>Duffy and Friends</h1>
        <p>
          如果你是迪士尼的资深粉丝，那么对于迪士尼的大家族一定不会陌生。<br>
          但是你知道吗? 迪士尼大家族又分为很多个小家族，比如迪士尼公主、米奇家族等。<br>
          近几年最受追捧的便是“达菲家族”了，他们人气很高，但还是有不少人不了解他们，就让我们一起来认识达菲和他的朋友们吧！
        </p>
        <a href="#character" class="figure-btn">一起来认识他们吧！</a>
      </div>
    </section>

</body>
</html>

.SCSS文件里的代码如下：

body {
  background-color: rgb(250, 219, 225);
  text-align: center;
}

h1 {
  margin-top: 20px;
  color: rgb(17, 77, 240);
  font-size: 50px;
}

.header {
  height: 100vh;
  background-image: linear-gradient(rgba(161, 199, 230, 0.8), rgba(238, 125, 59, 0.5)), url(./img/p1.jpg);
  background-size: cover;
  background-position: center;
}

.text-box{
  color: rgb(255, 255, 255);
  border: 10px solid rgb(5, 235, 243);
  padding: 10px;
  margin: 25px;
  background-color:rgba(253, 231, 231, 0.445);
}

打开浏览器可以看到如下效果：

在这里插入图片描述

🧐提示：在页面上右击鼠标，选择“检查”，你可清楚看到如下图所示的布局:

Alt

观察上图，你会发现一个元素真正占据的宽度应该是：
左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 +右外边距
因此，我们在用width属性设置元素的宽度时，实际上只设置了其内容的宽度。

边框与边距

无论边框、内边距还是外边距，它们都有上下左右四个方向。

1. 边框

border-style属性用来定义边框的样式

如下图为border-style值:
在这里插入图片描述

在上一步的.scss文件中的代码基础上增加如下代码：

.text-box{
  color: rgb(255, 255, 255);
  border: 10px solid rgb(5, 235, 243);
  padding: 10px;
  margin: 25px;
  background-color:rgba(253, 231, 231, 0.445);

  h1{
    border-bottom: 1px solid blue; /* 只设置底部边框 */
  }
 p{
  border: 1px solid rgb(214, 23, 23);
  border-radius: 15px; /* 边框圆角 */
  }
  .figure-btn{
    border-left: 5px solid purple;
  }
}
#navLinks{
  border: 1px dotted black; /* 上下左右都相同 */
}

打开浏览器可以看到如下四处边框样式的变化：

在这里插入图片描述

2. 边距

下面样式说明了内边距的设置（其他如外边距与此类似）：

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

提示：请留意简写时的顺序为上，右，下，左，或记为顺时针方向。

七. CSS定位

position属性用于对元素进行定位。该属性有以下一些值：

static 静态
relative 相对
fixed 固定
absolute 绝对

设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

（1）static定位

设置为静态定位position: static;，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。

即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

（2）relative定位

设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移。

在上一步的.scss文件中的.text-box{}下的h1{}里增加如下代码：

.text-box {
  h1 {
    border-bottom: 1px solid blue;  /* 只设置底部边框 */
    position: relative;
    left: 60px;
    top: 300px;
    background-color: rgba(248, 239, 190, 0.733);
  }
}

打开浏览器可以看到h1位置的变化：

在这里插入图片描述

（3）fixed定位

设置为固定定位position: fixed;，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）；
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）

增加如下的代码将会在浏览器右下角固定放置一个按钮元素：

<!-- HTML -->
<div class="example-fixed">这个按钮是固定的</div>

<!-- CSS -->
.example-fixed {
  position: fixed;
  bottom: 40px;
  right: 10px;
  padding: 6px 24px;
  border-radius: 4px;
  color: #fff;
  background-color: #9d0f91;
  cursor: pointer;
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}

打开浏览器可以看到按钮固定不动，不随浏览器窗口和滚动条的改变而改变：

在这里插入图片描述

🧐补充学习box-shadow 属性

box-shadow属性用于在元素的框架上添加阴影效果；
你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开；
该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

box-shadow属性详细介绍可以点击box-shadow属性介绍

语法：

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

（4）absolute定位

设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。

注意：绝对定位此处可能有些混淆，请留意其是仍是相对的，不过是相对最近的父元素

例子：

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

结果：
在这里插入图片描述

（5）sticky定位

sticky英文字面意思是粘、粘贴，所以可以把它称之为粘性定位；
position: sticky; 基于用户的滚动位置来定位；
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换；
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置；
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

八. CSS溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。

overflow属性有以下值：

值	描述
visible	默认值，溢出部分不被裁剪，在区域外面显示
hidden	溢出部分会被修剪，并且其余内容是不可见的
scroll	溢出部分会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit	规定应该从父元素继承 overflow 属性的值

注意: overflow 属性只工作于指定高度的块元素上。

关于滚动，我们还可以单独对上下或左右方向进行，如下代码所示：

<!-- HTML -->
    <div class="col">
    <p>姓名：达菲(Duffy) <br>
    性别：男<br>
    特点：脚掌和屁屁上有米奇头形状的可爱印记 <br>
    性格：有点小害羞的时尚达人<br>
    爱好：爱旅游、爱拍照、爱交朋友
    </p>
    </div>

<!-- CSS -->
.col{
  p{
    width: 200px;
    height: 100px;
    background-color: rgb(228, 198, 213);
    overflow-y: scroll;
  }
}

可以看到如下结果：

在这里插入图片描述

九. CSS浮动

在一个区域或容器内，我们可以设置float属性会使元素水平方向上向左或向右移动，其周围的元素也会重新排列；
Float 往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动？

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动；
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止；
浮动元素之后的元素将围绕它；
浮动元素之前的元素将不会受到影响。

如果图像是左浮动，下面的文本流将环绕在它右边：

<!-- HTML -->
<div class="col2">
   <h3>ShellieMay</h3>
   <img style="float:left;" class="img" alt="ShellieMay" src="./img/shelliemay.jpg" width="100px" height="100px">
   <p>达菲有一个心愿，希望能有一个小伙伴，米妮知道后，又为达菲缝制了礼物——粉嫩可爱的雪莉枚。从此以后，达菲与雪莉枚一直相伴彼此，是最好的伙伴。</p>
</div>

可以看到如下效果：

在这里插入图片描述

彼此相邻的浮动元素

把几个浮动的元素放到一起，若有空间的话，它们将彼此相邻。

如下4张图片，如果没加样式的话，这几张图片将会从上到下依次显示。
现在使用左浮动，让它们水平依次显示。

<!-- HTML -->

 <div class="col">
    <img alt="Duffy" src="./img/duffy.jpg" width="200px" height="200px">
 </div>
 <div class="col">
    <img alt=ShellieMay" src="./img/shelliemay.jpg" width="200px" height="200px">
 </div>
 <div class="col">
    <img alt="Gelatoni" src="./img/gelatoni.jpg" width="200px" height="200px">
 </div>
 <div class="col">
    <img alt="StellaLou" src="./img/Stella.jpg" width="200px" height="200px">
 </div>

<!-- CSS -->
.col {
  float: left;
  margin:5px;
}

可以看到如下效果：

在这里插入图片描述
一个元素浮动后，其后的元素将尽可能包围它，或者说出现在这个浮动元素的左或右方；
如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除。

十. CSS不透明度

我们可以用opacity属性对任何元素（常用于图片）设置不透明度；
值在[0.0～1.0]之间，值越低，透明度越高。

实例

<!-- HTML -->
<body>
 <img class="opacity-2" src="./img/linabell.jpg"width="250px" height="250px">
 <img class="opacity-5" src="./img/linabell.jpg"width="250px" height="250px">
 <img class="opacity-10" src="./img/linabell.jpg"width="250px" height="250px">
</body>
        
<!-- CSS -->
img {
  border-radius: 10px;
  float: left;
  margin: 10px;
}
.opacity-2 {
  opacity: 0.2;
}
.opacity-5 {
  opacity: 0.5;
}
.opacity-10 {
  opacity: 1;
}

可以得到如下效果：

在这里插入图片描述

十一. 组合选择器

前面我们学习了 CSS有三种选择器：元素、id 和 class 。同时也可以进行组合，得到简洁精确的选择。

在 CSS 中包含了四种组合方式：

后代选择器(以空格 分隔)
子元素选择器(以大于>号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号～ 分隔）

（1）后代选择器

后代选择器用于选取某元素的后代元素。

例如：.haha p 代表在div元素内有.haha这种类的所有元素。

<!-- HTML -->
<div class="haha">
      <p>Paragraph 1 in the div .haha.</p>
      <p>Paragraph 2 in the div .haha.</p>
      <span>
        <p>Paragraph 3 in the div .haha.</p>
      </span>
</div>
    <p>Paragraph 4. Not in a div .haha.</p>
    <p>Paragraph 5. Not in a div .haha.</p>

<!-- CSS -->
.haha p{
  background-color: yellow;
}

结果如下：

在这里插入图片描述

段落1、2、3都将有黄色的背景，而段落4、5没有。

（2）子元素选择器

也称为直接后代选择器，与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。

例如：.haha > p 代表在有.haha类的元素内的直接<p>元素。

<!-- HTML -->
<div class="haha">
      <p>Paragraph 1 in the div .haha.</p>
      <p>Paragraph 2 in the div .haha.</p>
      <span>
        <p>Paragraph 3 in the div .haha.</p>
      </span>
</div>
    <p>Paragraph 4. Not in a div .haha.</p>
    <p>Paragraph 5. Not in a div .haha.</p>

<!-- CSS -->
 .haha > p{
  background-color: yellow;
}

结果如下：

在这里插入图片描述
虽然段落3在.haha类中，但它的直接父元素是span，不是.haha的直接后代，所以不能选择。只有段落1、2有黄色背景。

（3）相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

实例

<!-- HTML -->
  <div class="haha">
      <p>div内部段落</p>
    </div>
    <p>div之后的第一个P元素</p>
    <p>div之后的第二个P元素</p>
    
<!-- CSS -->
.haha + p{
  background-color: yellow;
}

结果如下：

在这里插入图片描述

（4）后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

实例

<!-- HTML -->
 <div class="haha">
      <p>Paragraph 1 in the div .haha.</p>
      <p>Paragraph 2 in the div .haha.</p>
    </div>
    <p>Paragraph 3. Not in a div .haha.</p>
    <p>Paragraph 4. Not in a div .haha.</p>

<!-- CSS -->
.haha ~ p{
  background-color: yellow;
}

结果如下：

在这里插入图片描述

十二. 伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。

比如我们可能有这样的需求：

鼠标移到某元素上变换背景颜色
超链接访问前后访问后样式不同
离开必须填写的输入框时出现红色的外框进行警示
保证段落的第一行加粗，其它正常

（1）伪类

语法：

selector:pseudo-class {property:value;}

下面是anchor伪类的简单使用：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
p:hover {background-color: rgb(226, 43, 144);} /* 鼠标移到段落则改变背景颜色 */

注意：

在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的；
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的；
伪类的名称不区分大小写。

（2）伪元素

语法：

selector:pseudo-element {property:value;}

下面是常用伪元素的简单使用：

p:first-line{color:blue;}   /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;}   /* 段落的第一个字超大 */
h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

十三. 弹性盒子(Flex Box)

弹性盒（ Flexible Box），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
flexbox 是一种一维的布局，这是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

弹性盒子由弹性容器(Flex container，采用flex布局的元素) 和弹性子元素(Flex item，容器所有子元素自动成为容器成员)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

在这里插入图片描述

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
弹性子元素默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

1. 弹性容器的属性

容器有以下5个属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items

1.1 flex-direction属性

flex-direction 属性可以更改 flex 元素的排列方向。

它有4个值：

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

1.2 flex-wrap属性

默认情况下，项目都排在一条轴线上。
flex-wrap属性控制容器内元素的溢出处理方式，如果一条轴线排不下，则会换行显示。

它有3个值：

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

1.3 flex-flow简写属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式。

1.4 justify-content属性

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

它有5个值，具体对齐方式与轴的方向有关，下面假设主轴为从左到右：

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等

1.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。

它有5个值，具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下：

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

2. flex元素上的属性

为了更好地控制 flex 元素，有3个属性可以作用于它们：

flex-basis
flex-grow
flex-shrink

2.1 flex-basis 属性

flex-basis属性用来设置元素的基础长度，它定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。
它的默认值为auto，即项目的本来大小。

2.2 flex-grow 属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；
它是处理 flex 元素在主轴上增加空间的问题，flex-grow 若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸；
当此属性设置为1时，元素将自动伸展占满容器剩余空间；
flex-grow 属性可以按比例分配空间。如果第一个元素 flex-grow 值为 2，其他元素值为 1，则第一个元素将占有 2/4, 另外两个元素各占有1/4。

2.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，当容器内空间不足时，元素将等比例缩小；
如果容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。

3. 实例

<!-- HTML -->
<body>
    <div class="containter ">
        <div class="box">
            <img alt="Duffy" src="./img/duffy.jpg" width="150px" height="150px">
        </div>
        <div class="box">
            <img alt=ShellieMay" src="./img/shelliemay.jpg" width="150px" height="150px">
        </div>
        <div class="box">
            <img alt="Gelatoni" src="./img/gelatoni.jpg" width="150px" height="150px">
        </div>
        <div class="box">
            <img alt="StellaLou" src="./img/Stella.jpg" width="150px" height="150px">
        </div>
    </div>
</body>

<!-- CSS -->
.box {
    margin: 0;
    border: 10px solid rgb(231, 133, 146);
    padding: 0;
    height: 200px;
    width: 200px;
    background-color: rgb(123, 117, 173);
  }
  .containter{
    background-color: #569e60;
    height: 700px;
    width: 700px;
  }

效果如下：

在这里插入图片描述

现在对容器应用flex样式：

<!-- HTML -->
<body>
    <div class="containter flex">
        <div class="box">
            <img alt="Duffy" src="./img/duffy.jpg" width="150px" height="150px">
        </div>
        <div class="box">
            <img alt=ShellieMay" src="./img/shelliemay.jpg" width="150px" height="150px">
        </div>
        <div class="box">
            <img alt="Gelatoni" src="./img/gelatoni.jpg" width="150px" height="150px">
        </div>
        <div class="box">
            <img alt="StellaLou" src="./img/Stella.jpg" width="150px" height="150px">
        </div>
    </div>
</body>

<!-- CSS -->
.box {
    margin: 0;
    border: 10px solid rgb(231, 133, 146);
    padding: 0;
    height: 200px;
    width: 200px;
    background-color: rgb(123, 117, 173);
  }
  .containter{
    background-color: #569e60;
    height: 700px;
    width: 700px;
  }
  .flex{
    display: flex;
  }
  
//   .flex-item-direction{
//     flex-direction: row;
//   }
  
//   .flex-item-wrap{
//     flex-wrap: nowrap;
//   }
  
//   .flex-item-justify-content{
//     justify-content: center;
//   }
  
//   .flex-item-align-items{
//     align-items: center;
//   }
  
//   .flex-item-grow{
//     flex-grow: 1;
//   }

观察到如下效果：

在这里插入图片描述
可以得出flex默认情况下为横向排列，且不溢出。

十四. CSS响应式设计

针对不同的界面、窗口大小web界面需要自动进行相应的响应和调整，因此需要对web进行响应式设计。

响应式web设计主要为四种：

视窗响应
样式响应
像素响应
图片响应

1. 视窗响应Viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在HTML中，添加上述代码可以保证网页在不同使视口中均可以按照原始大小占据屏幕，不会发生像素缩放。

width：控制 viewport 的大小
device-width：设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放

2. 样式响应

对于不同大小的屏幕提供不同的样式，其实现方式为通过media查询设置屏幕切换点，进行样式切换。

3. 像素响应

通过一个基准像数值，对各类元素大小进行统一大小控制，如rem单位，通过rem单位实现样式表中的相对大小变化。

4. 图片响应

主要通过设置不同视窗宽度下显示不同图片源的方式实现。

十五. 总结

通过对CSS的初步学习，感觉CSS里面的内容太多了，想要学好还是不太容易，需要下硬功夫。

十六. 参考资料

[1] https://developer.mozilla.org/zh-CN/docs/Web/CSS
[2] https://www.runoob.com/css/css-combinators.html
[3] https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

on the moon

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web学习之CSS

本文是对CSS的初步学习
复制链接

扫一扫

Web学习之CSS

文章目录

一. 什么是CSS

二. CSS语法

三. CSS选择器

（1）id选择器

（2）class选择器

四. CSS如何生效

（1）外部样式表

（2）内部样式表

（3）内联样式

五. 颜色, 尺寸, 对齐

六. 盒子模型

边框与边距

七. CSS定位

（1）static定位

（2）relative定位

（3）fixed定位

（4）absolute定位

（5）sticky定位

八. CSS溢出

九. CSS浮动

十. CSS不透明度

十一. 组合选择器

（1）后代选择器

（2）子元素选择器

（3）相邻兄弟选择器

（4）后续兄弟选择器

十二. 伪类和伪元素

（1）伪类

（2）伪元素

十三. 弹性盒子(Flex Box)

十四. CSS响应式设计

十五. 总结

十六. 参考资料