跳至主要內容

基础样式

𝓳𝓭𝔂𝓼𝔂𝓪大约 8 分钟

基础样式

文本属性

文本属性用于定义文本的样式，通过文本属性，可以改变文本的颜色、字间距、对齐方式、文本修饰和文本缩进等。常用文本属性如下表所示：

属 性可 取 值描 述
line-heightnormal、number、length、%设置行高
text-indentlength、%设置文本缩进
text-alignleft、right、center、justify、start、end设置对齐方式
letter-spacingnormal、length设置字符间距
text-decorationline、color、style、thickness设置文本修饰
white-spacenormal、pre、nowrap、pre-wrap、pre-line、break-spaces规定如何处理空白
line-breakauto、loose、normal、strict、anywhere、unset处理如何断开带有标点符号的文本的行

line-height 用于设置多行元素的空间量，可取值具体说明如下：

  • normal：取决于用户端。
  • number：数字乘以元素的字体大小。
  • length：指定长度用于计算高度。
  • %：计算值是给定的百分比值乘以元素计算出的字体大小。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>line-height 的使用</title>
    <style>
      div {
        width: 300px;
        height: 400px;
        border: 1px solid;
        font-size: 15px;
        display: inline-block;
        vertical-align: top;
      }
      .div1 {
        line-height: 2; /*15 * 2*/
      }
      .div2 {
        line-height: 30%; /*15 * 30% */
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <p>“海水呀，你说的是什么？”</p>
      <p>“是永恒的疑问。”</p>
      <p>“天空呀，你回答的话是什么？”</p>
      <p>“是永恒的沉默。”</p>
    </div>
    <div class="div2">
      <p>“海水呀，你说的是什么？”</p>
      <p>“是永恒的疑问。”</p>
      <p>“天空呀，你回答的话是什么？”</p>
      <p>“是永恒的沉默。”</p>
    </div>
  </body>
</html>
image.png
image.png

text-decoration 属性用于设置文本的装饰线，例如给文本加下划线、中划线、波浪线等。可取值具体说明如下：

  • text-decoration-line 设置线的位置，可取值包含：underline（下划线）、overline（上划线）、line-through（中划线）。
  • text-decoration-color 设置线的颜色。
  • text-decoration-style 设置线的样式，可取值包含：wavy（波浪线）、solid（实线）、dashed（虚线）。
  • text-decoration-thickness 设置线的粗细。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>text-decoration 的使用</title>
    <style>
      .item1 {
        text-decoration: underline lime; /*下划线直线*/
      }
      .item2 {
        text-decoration: wavy overline lime; /*上划线波浪线*/
      }
      .item3 {
        text-decoration: line-through lime; /*中划线*/
      }
      .item4 {
        text-decoration: none; /*无样式*/
      }
      .item5 {
        text-decoration: dashed underline overline lime 5px; /*圆点上划线和下划线*/
      }
    </style>
  </head>
  <body>
    <p class="item1">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
    <p class="item2">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
    <p class="item3">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
    <p class="item4">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
    <p class="item5">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
  </body>
</html>
image.png
image.png

字体属性

字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示：

属 性可 取 值描 述
fontfont-style、font-variant、font-weight、font-size（或 line-height）、font-family在一个声明中设置所有的字体属性
font-family字体名称、inherit设置字体类型
font-sizexx-small、x-small、small、medium（默认）、large、x-large、xx-large smaller、larger length、%、inherit设置字体大小
font-weightnormal（默认）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold）设置字体粗细
font-stylenormal、italic、oblique、inherit设置字体风格
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h3 {
        font-size: 20px;
        font-family: 隶书;
        line-height: 28px;
      }
      span {
        font: italic 16px 华文彩云;
      }
    </style>
  </head>
  <body>
    <h3>Web 前端技术</h3>
    <span
      >在当今社会中，Web 已经成为网络信息共享和发布的主要形式。要想开发 Web 应用
      系统，就必须掌握 Web 前端技术。</span
    >
  </body>
</html>
image.png
image.png

文本阴影

某些时候我们想让字体看起来更立体，更具艺术性，让人眼前一亮，可以给文字使用文本阴影属性。

在 CSS3 中，我们使用 text-shadow 属性来给文本内容添加阴影的效果。

文本阴影的语法格式如下：

text-shadow: x-offset y-offset blur color;
  • x-offset 是沿 x 轴方向的偏移距离，允许负值，必须参数。
  • y-offset 是沿 y 轴方向的偏移距离，允许负值，必须参数。
  • blur 是阴影的模糊程度，可选参数。
  • color 是阴影的颜色，可选参数。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        font-size: 50px;
        color: rgb(0, 153, 255);
        text-shadow: 4px 4px 3px rgb(0, 255, 179);
      }
    </style>
  </head>
  <body>
    <div>蓝桥云课</div>
  </body>
</html>
image.png
image.png

文本溢出

text-overflow 属性可以设置超长文本省略显示，其语法如下所示：

text-overflow: clip|ellipsis;
属性值描述
clip修剪文本。
ellipsis显示省略符号来代表被修剪的文本。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        border: 1px solid blue;
        width: 100px;
        height: 50px;
        overflow: hidden; /*隐藏超出文本*/
        white-space: nowrap; /*强制单行显示*/
      }
      .poem1 {
        text-overflow: clip;
      }
      .poem2 {
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <p class="poem1">木落雁南度，北风江上寒。我家襄水曲，遥隔楚云端。</p>
    <p class="poem2">乡泪客中尽，孤帆天际看。迷津欲有问，平海夕漫漫。</p>
  </body>
</html>
image.png
image.png

圆角边框

在 CSS3 中，使用 border-radius 属性来设置圆角边框。

border-radius 属性的值表示圆角的直径，可以设置四个值，其值的顺序为：左上角，右上角，右下角，左下角。

border-radius: 取值;

或者分开设置:

border-top-left-radius: 取值;
border-top-right-radius: 取值;
border-bottom-right-radius: 取值;
border-bottom-left-radius: 取值;

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: rgb(17, 61, 117);
        border-radius: 140px 20px 30px 40px; /*四个圆角直径不同*/
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
image.png
image.png

链接中的伪类

在 CSS 中，伪类是添加到选择器的关键字，给指定元素设置一些特殊状态，我们以 : 开头。

链接有以下四个状态。这四种状态也称之为超链接的伪类。

状态效果
a:link普通的、未被访问的链接。
a:hover鼠标指针位于链接的上方。
a:active链接被单击的时刻。
a:visited用户已访问的链接。

针对超链接的上述四种状态设置样式规则，能起到美化超链接的作用。例如，为了完成下对超链接的显示要求，编写的 CSS 样式代码如下。

状 态颜 色背 景 色文 本 修 饰
未访问蓝色无无下画线
鼠标移到黑色#DDDDDD下画线
正单击红色#AAAAAA删除线
已访问绿色无无下画线
- 对于超链接的伪类，我们推荐的使用顺序是：:link - :visited - :hover - :active。
- 否则样式可能被覆盖掉

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        text-decoration: none;
      }
      a:link {
        color: red;
      }
      a:visited {
        color: blue;
      }
      a:hover {
        color: green;
      }
      a:active {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <a href="#">这是一个链接</a>
  </body>
</html>

列表样式

属 性可 取 值描 述
list-stylelist-style-type、list-style-position、list-style-image在一个声明中设置所有的列表属性
list-style-imageURL、none设置图像为列表项标志
list-style-positioninside、outside、inherit设置列表中列表项标志的位置
list-style-typedisc（默认）、circle、square、decimal 等设置列表项标志的类型

display

display 属性可以用来设置元素在页面上的排列方式，也可用来隐藏元素。

属性值说明
block元素以块级方式展示。
inline元素以内联方式展示。
inline-block元素以内联块的方式展示。
none隐藏元素。

display 和 visibility的区别

visibility: hidden 和 display: none 都可以用来隐藏元素，但它们的区别在于：

  • visibility: hidden 隐藏元素，但元素仍然占据页面上的空间，即元素的尺寸和位置不会改变。
  • display: none 隐藏元素，并且元素不再占据页面上的空间，即元素的尺寸和位置都被移除。

因此，当你想要隐藏元素但仍然保留它的空间时，可以使用 visibility: hidden；当你想要完全从页面中移除元素时，可以使用 display: none。

CSS visibility 属性open in new window

block

block 属性值可以让行内元素以块级元素的方式显示在页面上。

inline

inline 属性值可以让像 div 这样的霸道块，接纳其他元素来自己的地盘。

inline-block

我们的块内元素和行内元素有其独特的优势，在某些情况下，我们想让一个元素既具有块内元素的特点，又具备行内元素的特点。这就要请出 inline-block 属性值来施展这个魔法了。

提示

比如，我们用 a 标签来实现导航的时候，a 标签虽然可以让元素在一行显示，但若我们想给每个 a 标签加上高和宽时发现没有任何效果。这时候用上 display: inline-block，它就具备块的特性了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a {
        text-decoration: none;
        background-color: rgb(95, 118, 160);
        display: inline-block;
        width: 70px;
        height: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <a href="#">首页</a>
    <a href="#">分类</a>
    <a href="#">展示</a>
    <a href="#">更多</a>
  </body>
</html>
image.png
image.png

none

none 属性值可以用来隐藏页面上的元素。

默认页脚
Copyright © 2023 𝓳𝓭𝔂𝓼𝔂𝓪