笔记二、初识前端-CSS |青训营

Zer0day
205 阅读6分钟

什么是CSS?

所谓CSS即是层叠样式表，是为web内容添加样式的代码，CSS也不是真正的一门编程语言，而是一门样式表语言。在了解CSS之前，为了编写代码方便，我们可以先自己创建一个style.css文件，然后再通过<link>元素来链接该文件，如下：

<link href="style.css" rel="stylesheet">

rel属性表示“关系 (relationship) ”，它可能是<link>元素其中一个关键的特性——属性值表示<link>项的链接方式与包含它的文档之间的关系。

我们可以选择性的用CSS来给HTML元素添加样式，以此来更好的设计网页，使得网页更加丰富完美。

剖析CSS

CSS的规则集详解如下图：

1690532152106.png

上述图片的整个结构称之为规则集，接下来具体解释各个部分：

选择器(Selector)

HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 <p> 元素）。要给不同元素添加样式，只需要更改选择器。

声明(Declaration)

一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

属性（Properties）

改变 HTML 元素样式的途径（本例中 color 就是 <p> 元素的属性）。CSS 中，由编写人员决定修改哪个属性以改变规则。

属性的值（Property value）

在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

注意其他重要语法：
  • 除了选择器部分，每个规则集都应该包含在成对的大括号里（{}）。
  • 在每个声明里要用冒号（:）将属性与属性值分隔开。
  • 在每个规则集里要用分号（;）将各个声明分隔开。

若要添加或修改多个属性时，比如添加元素<p>的属性，如下代码：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

若要给多个元素添加同一个声明，也可以这样写：

p,
li,
h1 {
  color: red;
}

在css中，选择器不仅仅只有HTML的元素选择器，还有其他种类的选择器，如下图：

1690532872016.png

在了解的CSS的基本结构语法以后，开始正式的学习。

CSS的选择器特异度(优先级)：所谓选择器的特异度，是用来确定多个选择器应用于同一个元素时，哪个选择器的规则会被应用，我们可以通过统计一个选择器包含id选择器、类选择器和标签选择器的个数来判断优先级别的高低，如下图：

1690636997323.png

上述图中第一行的特异度要比第二行的特异度高，其实不同的选择器有他对应的特异度大小：

  1. ID选择器的特异度为 100。
  2. 类选择器、属性选择器和伪类选择器的特异度为 10。
  3. 元素选择器和伪元素选择器的特异度为 1。

继承：所谓继承即是某些属性会自动继承父元素的计算值，除非显示指定一个值。看如下代码：

<p>This is a <em>test</em> of <strong>inherit</strong></p>

<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>

运行结果：

1690694892090.png

在该代码中，我们并没有指定<strong>元素的样式，但是在此例代码中，由于父元素<p>的颜色样式为蓝色，因此在浏览器计算的过程中,<strong>元素包含的inherit为蓝色，因此继承了父元素的计算值。

显示继承：有些属性不能够被继承，我们可以通过修改属性的属性值来将其变成可以继承的属性，如下代码：

*{
  box-sizing: inherit;
}
.some-widget{
  box-sizing: content-box;
}

将box-sizing属性修改为可以继承的属性。

CSS布局

常见布局相关技术：常规流、浮动和绝对定位。

常规流：

  • 行级
  • 块级
  • 表格布局
  • FlexBox
  • Gird布局

基本的布局方式如下图:

1690701169888.png

width属性：

1690701249708.png

height属性：

1690701283622.png

padding属性： padding在盒子中的具体布局

1690701378813.png

该属性还具体划分了四个属性： padding-top、padding-left、padding-right、padding-bottom。该四个属性主要用来指定元素四个方向的内边距。 padding可以直接设置4个值分别对于上、左、右四个方向。

border属性： 指定容器边框样式、粗细和颜色

1690702116973.png

margin属性： 指定元素四个方向的外边距，margin属性和padding属性一样也有四个方向的属性，使用margin：auto 水平居中。如下代码：

<div></div>
<style>
  div {
    width: 200px;
    height: 200px;
    background: coral;
    margin-left: auto;
    margin-right: auto;
  }
</style>

overflow属性： 当元素溢出时所需要的一个行为，即元素的内容太大而无法适应他的会计格式化上下文的一种属性。常用overflow：auto；

块级与行级：

块级盒子不和其他盒子并列摆放，与其他行级盒子一起放在一行或拆成多行。

1690703222939.png

行级排版上下文，即IFC（Inline Formatting Context）：

1690703648981.png

块级排版上下文，即BFC（Block Formatting Context）：

1690703784969.png

<span>
  This is a text and
  <div>block</div>
  and other text.
</span>

<style>
  span {
    line-height: 3;
    border: 2px solid red;
    background: coral;
  }

  div {
    line-height: 1.5;
    background: lime;
  }
</style>

代码效果：

1690703922240.png

Flex Box

Flexbox 的关键特性是 flex 布局中的项目可以增大和缩小。可以将空间（Space）分配到项目本身、项目之间或项目周围。Flexbox的属性比较多，下图是justify-content属性的一种：

1690705021024.png

justify-content: center; /* 居中排列 */
justify-content: start; /* Pack items from the start */
justify-content: end; /* Pack items from the end */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end; /* 从行尾位置开始排列 */
justify-content: left; /* Pack items from the left */
justify-content: right; /* Pack items from the right */

Grid布局

grid 是一个 CSS 简写属性，可以用来设置以下属性： 显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas， 隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow， 间距属性 grid-column-gap 和 grid-row-gap。

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

结果：

1690705306894.png

具体Grid属性可以参考：developer.mozilla.org/zh-CN/docs/…

flow浮动布局

引入 float 属性是为了能让 Web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。如下代码：

<section>
  <img src="https://p4.ssl.qhimg.com/t017aec0e7edc961740.jpg" width="300" alt="mojave" />
  <p>莫哈韦沙漠不仅纬度较高，而且温度要稍微低些，是命名该公园的短叶丝兰——约书亚树的特殊栖息地。约书亚树以从茂密的森林到远远间隔的实例等各种形式出现。除了约书亚树森林之外，该公园的西部包括加州沙漠里发现的最有趣的地质外观。
  </p>
</section>

<style>
  img {
    float: left;
  }

  p {
    font-size: 20px;
    line-height: 1.8;
  }
</style>

定位布局

使用绝对定位常用来将某一元素置于网页中间

  <div class="login">
    <div>
      用户名：
      <input type="text" placeholder="输入用户名">
      <br>
      密码：
      <input type="password" placeholder="输入密码">
      <br>
      &nbsp;&nbsp;&nbsp;<button>登 陆</button>
    </div>
  </div>

学习总结

  • 这次主要学习了CSS的基本语法以及学会如何去使用CSS的一些布局盒子来布局。
  • 刚刚接触CSS感觉很多东西要记的，例如不同的属性如何使用，感觉学起来还是比较复杂。
  • 不同的盒子类型使用在不同情况也还是需要学习，感觉刚刚接触思绪有点混乱，还是需要多学习学习。
avatar
文章
阅读
粉丝