junyi's blog

hahahahaha

0%

CSS

Posted on Edited on In

简介

  • CSS 相关笔记

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

CSS 简介

  • 什么是CSS？
    • CSS 指层叠样式表 (Cascading Style Sheets)
    • 样式定义如何显示 HTML 元素
    • 样式通常存储在样式表中
    • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
    • 外部样式表可以极大提高工作效率
    • 外部样式表通常存储在 CSS 文件中
    • 多个样式定义可层叠为一个

CSS 语法

  • CSS 实例

    • CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: h1 {color:blue; font-size:12px;}
    • 选择器通常是您需要改变样式的 HTML 元素。
    • 每条声明由一个属性和一个值组成。
    • 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
    • CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:
      1
      p {color:red;text-align:center;}
    • 为了让CSS可读性更强，你可以每行只描述一个属性:
      1
      2
      3
      4
      5
      p
      {
          color:red;
          text-align:center;
      }

  • CSS 注释

    • 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
    • CSS注释以 /* 开始, 以 */ 结束, 实例如下:
      1
      2
      3
      4
      5
      6
      7
      8
      /*这是个注释*/
      p
      {
          text-align:center;
          /*这是另一个注释*/
          color:black;
          font-family:arial;
      }

CSS id 和 class

  • id 和 class 选择器

    • 如果你要在HTML元素中设置CSS样式，你需要在元素中设置”id” 和 “class”选择器。

  • id 选择器

    • id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
    • HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
    • 以下的样式规则应用于元素属性 id=”para1”:
      1
      2
      3
      4
      5
      #para1
      {
          text-align:center;
          color:red;
      }
    • ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

  • class 选择器

    • class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
    • class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
    • 在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
      1
      .center {text-align:center;}
    • 在以下实例中, 所有的 p 元素使用 class=”center” 让该元素的文本居中:
      1
      p.center {text-align:center;}
    • 多个 class 选择器可以使用空格分开：
      1
      2
      .center { text-align:center; }
      .color { color:#ff0000; }

CSS 创建

  • 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。

  • 如何插入样式表

    • 插入样式表的方法有三种:
      • 外部样式表(External style sheet)
      • 内部样式表(Internal style sheet)
      • 内联样式(Inline style)

  • 外部样式表

    • 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
      1
      2
      3
      <head>
      <link rel="stylesheet" type="text/css" href="mystyle.css">
      </head>
    • 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
    • 外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
      1
      2
      3
      hr {color:sienna;}
      p {margin-left:20px;}
      body {background-image:url("/images/back40.gif");}

  • 内部样式表

    • 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用