CSS的使用（上） | 青训营

想要变成代码小能手
81 阅读11分钟

CSS是什么

CSS：层叠样式表

  • 用来定义页面元素的样式

    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果

  • 最基础的代码：

    • h1：选择器(Selector)：选中页面中的元素，并给元素决定样式。
    • 属性(Property)color与属性值(Value)white组成了声明(Declaration)。
    • h1{}构成了一条规则
    h1 {
    color : white;
    font-size : 14px;
}

CSS是如何工作的

CSS和HTML单独解析，将解析出的CSS附加到DOM树上，形成渲染树，展示出最终页面。

CSS求值过程

为了布局和渲染页面，需要找到页面上每一个元素对应的所有属性的值，所以，需要遍历到所有元素以及对应的所有属性的值。

每个元素在寻找一个特定的CSS属性所要经过的流程：

  1. filtering：筛选该元素的规则，将所有样式表过一遍，得到一组匹配的选择器（声明值）
  2. cascading：选出优先级最高的一个属性值（层叠值）
  3. defaulting：层叠值可能为空，获取默认值，得到指定值（并不能直接用）
  4. resolving：将一些相对值或者关键字转换，得到计算值（是在浏览器不进行实际布局情况下得到的最具体的值）
  5. formatting：将关键字和相对值转换，得到使用值（不一定能直接用）
  6. constraining：根据约束，将使用值转化为实际值
  • 计算值：单纯分析CSS就能计算出来的值。继承时继承的是父元素的计算值。
  • 使用值：实际布局时才能决定的值在formatting阶段计算。

在页面中使用CSS

外链

  • 通过<link>标签引入CSS代码
  • 外链适用于在整个网站或应用程序的多个页面上共享相同的样式。
  • rel="stylesheet"：用于指定链接的文档是一个外部样式表。 rel：relation

例如：

在 HTML 文档的 <head> 标签中添加以下代码：

<head>
  <link rel="stylesheet" href="styles.css">
</head>

在名为 styles.css 的 CSS 文件中定义样式：

p {
  color: blue;
  font-size: 14px;
}

嵌入

  • 将CSS代码嵌入到<style>标签内

  • 嵌入适用于在同一页面上应用于多个元素的样式。

  • 内部样式表嵌入到 <head> 标签中是推荐的做法，但并非强制要求，可以将样式直接写在 HTML 文档的 <style> 标签中。但好处：

    • 页面加载顺序：将样式表放在 <head> 标签中，可以确保在页面内容加载之前就开始应用样式，从而避免内容闪烁或布局错乱的问题。
    • 分离关注点：将样式与结构和行为分离，使 HTML 结构更加清晰，便于开发人员理解和维护代码。

例如：

在 HTML 文档的 <head> 标签中使用 <style> 标签定义样式。

<head>
  <style>
    p {
      color: blue;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>这是一个示例文本</p>
</body>

内联

  • 直接写在标签的style属性中，不需再写选择器。
  • 内联样式适用于只针对特定元素的个别样式，不推荐在整个页面上广泛使用。

例如：

<p style="color: blue; font-size: 14px;">这是一个示例文本。</p>

三、选择器

3.1 定义

  • 找出页面中的元素，并设置样式

  • 选择方式：

    • 按照标签名、类名、id
    • 按照属性
    • 按照DOM树中的位置

3.2通配选择器（匹配所有）

<h1>
    This is heading
</h1>
<p>
    this is paragraph.
</p>
​
<style>
*{
    color : red;
    font-size : 20px;
}
</style>

image-20230802113336290转存失败，建议直接上传图片文件

使用

  1. 单独使用：通配选择器可以选择文档中的所有元素，并为它们应用相应的样式。例如：

    * {
  margin: 0;
  padding: 0;
}

    * 是一个通配选择器，它选择文档中的所有元素，并将它们的外边距和内边距都设置为0。

  2. 与其他选择器组合使用：通配选择器可以与其他选择器组合使用，以选择特定范围内的元素。例如：

    div * {
  color: red;
}

    div * 是一个组合选择器，它选择位于 <div> 元素内部的所有元素，并将它们的文本颜色设置为红色。

  3. 针对特定属性：通配选择器也可以与属性选择器组合使用，以选择具有特定属性的所有元素。例如：

    *[data-info] {
  font-weight: bold;
}

*[data-info] 是一个组合选择器，它选择具有 data-info 属性的所有元素，并将它们的字体加粗。

3.3 id选择器

根据 HTML 元素的 id 属性值来选择元素。以井号（#）开头。

id的值在页面中需要是唯一的。

选择具有 属性id="logo" 的元素

<h1 id="logo">
  <img src="https://assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48" />
  HTML5 文档
<h1>

<style>
  #logo {
    font-size: 60px;
    font-weight: 200;
  }
</style>

3.4 类选择器

根据 HTML 元素的 class 属性值来选择元素。以点号（.）开头。

比较常用，id不同，class可以出现多次。

<h2>Todo List</h2>
<ul>
  <li class="done">Learn HTML</li>
  <li class="done">Learn CSS</li>
  <li>Learn JavaScript</li>
</ul>
<style>
.done {
  color: gray;
  text-decoration: line-through;
}
</style>

3.5 属性选择器

根据 HTML 元素的属性值来选择元素。

选中某一属性：

<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

选中属性为某一特定的值：

<p>
  <label>密码：</label>
  <input type="password" value="123456" />
</p>

<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

属性值匹配为某一条件：

[href^="#"]：匹配以#开头的href属性值

[href$=".jpg"]：匹配以.jpg结尾的href属性值

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

3.6伪类

不基于标签和属性定位元素，可以通过元素在父结点中的相对位置来选中

状态伪类

根据与用户交互时的状态设置

<a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}
</style>

结构性伪类

根据DOM结点在DOM树中的位置来决定是否选中该元素。

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

3.7 组合

  • 直接组合：AB，满足A同时满足B。例：input : focus
  • 后代组合：A B，选中B，如果它是A的子孙。例：nav a
  • 亲子组合：A>B，选中B，如果它是A的子元素。例：section>p
  • 兄弟选择器：A~B，选中B，如果他在A后且与A同级。例：h2~p
  • 相邻兄弟选择器：A+B，选中B，如果它紧跟在A后面。例：h2+p

3.8 选择器组

即一组选择器，给多个选择器定义相同的样式。

body , h1 , h2 , h3 , h4 , h5 , h6 , ul , ol , li {       margin : 0 ; 
    padding : 0 ; 
} 
[type= "checkbox" ] , [type= "radio" ] { 
    box-sizing : border-box;
    padding: 0;
}

3.9 选择器的特异度

当多个选择器应用到同一个元素上时，特异度决定了哪些规则将被应用。越特殊，选择器的优先级越高。

其中每个部分都有一个特定的权重：

  • 内联样式：特异度为 1000。
  • ID 选择器（#）：特异度为 100。
  • 类选择器、属性选择器和伪类选择器（.)：特异度为 10。
  • 标签选择器：特异度为 1。

特异度的计算是以选择器的各个部分分别相加的方式进行的。例如，对于选择器 h1.title#heading，特异度的计算结果为 111。

例：

选择器 .btn.primary 表示同时具有类名 .btn 和 .primary 的元素。第二个按钮具有 btn 和 primary 两个类名。

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {
    color: #fff;
    background: #218de6;
  }
</style>

.btn.primary优先级更高，将.btn中的color和background覆盖。

3.10 继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。

一般来说，和文字相关的一些属性都是可以继承的，和模型相关的一些属性不可继承。

例：

<strong>继承了<p>的color属性为blue。

<em>的color显式指定了一个值。

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

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

显式继承

并非所有的样式属性都可以被子元素继承。例如，background-color、border、padding 等属性通常不会被子元素继承，需要在子元素上显式设置。

使用 inherit 关键字，显式地让子元素继承父级某个样式属性。

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

* 选择器表示匹配所有元素。这一行的规则是将 box-sizing 属性继承应用到所有元素上。好处：通过一个容器可以改变容器内所有元素的box-sizing。

html { box-sizing: border-box; }：页面上所有元素都是按照border-box规则计算。

.some-widget { box-sizing: content-box; }：.some-widget容器里的元素都是content-box。

初始值

每个元素规范的初始值。

使用到初始值：元素是不可继承的但没有设置属性，或元素是可继承的但一层一层的都没有继承到属性。

可以使用initial关键字显式重置为初始值。

四、属性

4.1 颜色

RGB 光学三原色表示

表示所有颜色：

  • rgb(x,y,z)，例如rgb(0,0,0)为黑色，rgb(255,255,255)为白色
  • #abxxymn，每两位为十六进制分别表示r、g、b
  • alpha（不）透明度，0~1，1为不透明，rgba( , , , )

HSL

Hue：色相，0~360，表示不同的颜色

Saturation：饱和度，0~100%，越高越鲜艳，0为灰色

Lightness：亮度，0~100%，越高越明亮，0为黑色，100为白色

表示：hsl(x,y,z)，hsla( , , , )

4.2 字体 font-family

font-family

  • 给font-family设置多个值：网页会在不同的设备上被访问，不同设备上已安装的字体不同，所以浏览器从前到后匹配字体。

  • 通用字体族：

    • serif：衬线体，如Georgia，宋体
    • sans-serif：无衬线体，如Arial，Helvetica，黑体，微软雅黑
    • cursive：手写体，如Caflisch Script，楷体
    • fantasy：Comic Sans MS，Papyrus
    • Monospace：等宽字体，如Consolas，Courier，中文字体

  • font-family使用建议：

    • font-family字体列表最后一定要加上一个通用字体族
    • 英文字体写在中文字体前面（因为中文字体中也有英文字母，而英文字体中没有中文）

例：

<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的
一座国家公园，位于新墨西哥州东南部。</p>

<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

Web Fonts

想要严格按照设计要求来展示字体，使用Web Fonts（将字体文件放在服务器上）。

会带来性能上的开销。

对于中文字体，可以对原本的字体文件进行裁切，将页面用不到的字符丢掉，保证整个字体文件比较小。

<h1>Web fonts are awesome!</h1>

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

  h1 {
    font-family: Megrim, Cursive;
  }
</style>

4.3 字体大小font-size

指定方法：

  • 关键字：small，medium，large
  • 长度：px，em
  • 百分数：相对于父元素字体大小
<section>
  <h2>A web font example</h2>
  <p class="note">Notes: Web fonts ...</p>
  <p>With this in mind, let's build...</p>
</section>

<style>
  section {
    font-size: 20px;
  }

  section h1 {
    font-size: 2em;
  }

  section .note {
    font-size: 80%;
    color: orange;
  }
</style>

<section>标签内默认为20像素，<section>标签的子元素<h1>标签内为40px，<section> 元素内的 class="note" 的 <p> 元素的字体大小为父元素的 80%，即16px。

  • em 单位更常用于控制字体大小，并且可以嵌套使用，即子元素的 em 大小可以相对于父元素的 em 大小进行计算。
  • 百分数单位则更常用于控制盒模型属性（如宽度、高度等），并且百分数的计算是相对于某个属性的百分比。

4.4 字体效果 font-style

默认值为：font-style: normal

斜体：font-style: italic

4.5 字重 font-weight

即字的粗细

范围：100~900

normal：400；bold：700

需要字体本身设计时有这些字重。

4.6 行高 line-height

两行文字基准线之间的距离。

<section>
  <h1>Font families recap</h1>
  <p> This takes one or more font family names. </p>
</section>

<style>
  h1 {
    font-size: 30px;
    line-height: 45px;
  }

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

当行高不带单位时，表示的是字体本身大小的倍数，即32px

4.7 font

将font-family，font-size，font-style，font-weight，line-height都集中于font属性中，不是必须都要写。

font : style weight size/height family

font : 14px serif

4.8 排版 text-align

  • left，right，center：将文本左，右，中对齐。
  • justify：将文本两端对齐，对最后一行不生效。
  • start：根据文本的书写方向，将文本左对齐或右对齐。
  • end：根据文本的书写方向，将文本左对齐或右对齐。

4.9 文字间距spacing

  • letter-spacing : 字母之间的间距。

    接受长度值、百分比值或正负值作为参数。正值会增加字母间距，而负值会减小间距。默认情况下，letter-spacing 的值为 "normal"。

    p {
  letter-spacing: 2px; /* 使用像素值增加两个像素的间距 */
}

h1 {
  letter-spacing: -0.5em; /* 使用负 em 值减少半个字母的间距 */
}

span {
  letter-spacing: 20%; /* 使用百分比值增加 20% 的间距 */
}

  • word-spacing ：单词之间的间距。

    同上。

4.10 首行缩进 text-indent

通过指定一个长度值或百分比值，可以控制文本块首行相对于左侧边距的偏移量。

若想要取消文本块的首行缩进，可以将 text-indent 设置为0（默认值）或使用 text-indent: initial;。

text-indent 对于行内元素是不起作用的，并且只适用于块级元素和一些特殊的非替换内联元素（如<p>、<h1>等）。

4.11 文本装饰text-decoration

如下划线、删除线、上划线等。

  • none: 默认值，没有任何装饰效果。
  • underline: 给文本添加下划线。
  • overline: 给文本添加上划线。
  • line-through: 给文本添加删除线。
  • underline overline: 同时添加下划线和上划线。
  • underline line-through: 同时添加下划线和删除线。

使用 color 属性来设置装饰线的颜色：

  • text-decoration-color: red;

4.12 white-space

默认情况下，浏览器会将连续的空白符（空格、制表符、换行符）合并为一个。为了规避这个问题，white-space 属性用于控制元素内文本的空白符处理方式。

  • normal：默认值，连续的空白符会合并为一个空格，文本自动换行。
  • nowrap：连续的空白符不会合并，文本不会自动换行，超出容器宽度的部分会被裁剪。
  • pre：连续的空白符不会合并，文本保留原样，遵循源代码中的空白符格式，并且文本不会自动换行。
  • pre-wrap：连续的空白符不会合并，文本保留原样，遵循源代码中的空白符格式，并且文本会自动换行。
  • pre-line：连续的空白符会合并为一个空格，文本保留原样，遵循源代码中的空白符格式，并且文本会自动换行。
avatar
文章
阅读
粉丝