本文记录对HTML基础知识的学习,主要内容基于 CSS 教程 | 菜鸟教程

基本概念

  1. 定义

    CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS文件扩展名为 .css

  2. CSS文档的基本结构

    image-20240711103357915

id选择器和class选择器

  1. id选择器

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

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

    1
    2
    3
    4
    5
    #para1
    {
    text-align:center;
    color:red;
    }
  2. class选择器

    class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。类选择器以一个点 . 号显示:

    • 在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

      1
      .center {text-align:center;}
    • 还可以指定特定的HTML元素使用class

      在以下实例中, 所有的 p 元素使用 class=”center” 让该元素的文本居中:

      1
      p.center {text-align:center;}

    class可以在多个元素中使用,class之间以空格分隔即可

    例如这里的p标签就使用了center和color两个class,以空格分隔开

    1
    <p class="center color">段落居中,颜色为红色。</p>
  3. 标签选择器(直接对某个标签定义样式)

    1
    2
    3
    4
    5
    p
    {
    color:red;
    text-align:center;
    }

样式表

  1. 插入样式表的方法

    有三种,在HTML学习的博客中已经进行了详细的介绍

    • 外部样式表(External style sheet)

    • 内部样式表(Internal style sheet)

    • 内联样式(Inline style)

  2. 多重样式

    • 如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

      如果在不同的样式表中出现了多个相同的属性,那么优先级如下:

      (内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

      例如,外部样式表拥有针对 h3 选择器的三个属性:

      1
      2
      3
      4
      5
      6
      h3
      {
      color:red;
      text-align:left;
      font-size:8pt;
      }

      而内部样式表拥有针对 h3 选择器的两个属性:

      1
      2
      3
      4
      5
      h3
      {
      text-align:right;
      font-size:20pt;
      }

      假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:

      1
      2
      3
      color:red;
      text-align:right;
      font-size:20pt;

      可以看到因为内部样式表的优先级高,先使用了内部样式表,然后又继承了外部样式表中的 color 属性

编程快捷键

1
w200+h200+bgc		//设置class中的width、height和background-color