蓝桥杯Web应用开发-CSS 基础语法4(字体属性、链接中的伪类、列表样式)

专栏持续更新中

字体属性

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

属 性 可 取 值 描 述
font font-style、font-variant、font-weight、font-size(或 line-height)、font-family 在一个声明中设置所有的字体属性
font-family 字体名称、inherit 设置字体类型
font-size xx-small、x-small、small、medium(默认)、large、x-large、xx-large smaller、larger length、%、inherit
font-weight normal(默认)、bold、bolder、lighter、inherit 100、200…900(400=normal,700=bold) 设置字体粗细
font-style normal、italic、oblique、inherit 设置字体风格

新建一个 index13.html 文件,在其中写入以下内容。

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <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>

蓝桥杯Web应用开发-CSS 基础语法4(字体属性、链接中的伪类、列表样式)_第1张图片

链接中的伪类

何为伪类呢?

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

链接有以下四个状态。这四种状态也称之为超链接的伪类。
a:link 普通的、未被访问的链接。
a:hover 鼠标指针位于链接的上方。
a:active 链接被单击的时刻。
a:visited 用户已访问的链接。

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

状态 颜色 背景色 文本修饰
未访问 蓝色 无下画线
鼠标移到 黑色 #DDDDDD 下画线
正单击 红色 #AAAAAA 删除线
已访问 绿色 无下画线

对于超链接的伪类,我们推荐的使用顺序是::link - :visited - :hover - :active。

新建一个 index14.html 文件,在其中写入以下内容。

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <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>

蓝桥杯Web应用开发-CSS 基础语法4(字体属性、链接中的伪类、列表样式)_第2张图片

我们为什么要按照这样的顺序来使用呢? 我们调整一下这几个伪类的顺序,看看会发生什么。
我们把 a:link 放到最后,效果如下。
蓝桥杯Web应用开发-CSS 基础语法4(字体属性、链接中的伪类、列表样式)_第3张图片

从图中我们可以发现其中的样式属性都被覆盖了。

我们把 a:hover 放到 a:active 之后,效果如下。
蓝桥杯Web应用开发-CSS 基础语法4(字体属性、链接中的伪类、列表样式)_第4张图片

从图中我们可以发现 a:active 的属性样式被覆盖了。
通过上面的例子我们可以知道链接伪类的使用顺序是很重要的。

列表样式

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

list-style-position 是 CSS 属性,用于控制列表项标记(如圆点或数字)的位置,特别是在列表项的文本流中的位置。这个属性有两个可能的值:

  1. outside: 列表项标记位于列表项框之外,与文本不在同一流中。这是默认值。
  2. inside: 列表项标记位于列表项框内,与文本在同一流中。
    ul { list-style-position: outside; /* 列表项标记位于列表项框外 / } ol { list-style-position: inside; / 列表项标记位于列表项框内 */ }
    在默认情况下(outside),列表项标记会在文本的外部,与文本不在同一行。如果设置为 inside,列表项标记将放在列表项框内,与文本在同一行。选择使用哪个取决于你的设计和排版需求。
    使用 list-style-position 属性可以影响整个列表的外观。这在设计有关列表的网页时可以很有用,特别是当你想要调整列表项标记的位置以及文本的对齐方式时。

新建一个 index15.html 文件,在其中写入以下内容。

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <style>
      ul {
        list-style-position: inside;
        list-style-image: url(list.gif);
      }
    style>
  head>
  <body>
    <ul>
      <li>li>
    ul>
  body>
html>

蓝桥杯Web应用开发-CSS 基础语法4(字体属性、链接中的伪类、列表样式)_第5张图片

你可能感兴趣的:(前端,css,蓝桥杯,html5)