CSS基础知识

第一章 HTML 与 CSS ·······

1.在 HTML 中链接 css
 (1) link :

<link rel="stylesheet" type="text/css" href="xxx.css" />

   ① link 标签 
    a. 用途 : 为 HTML 文档链接样式表
    b. 注意 : 必须放在 head 元素里
   ② link 属性
    a. rel : 含义"关联" 指关联"样式表"
    b. type="text/css" : 描述使用link标签载入的数据类型
    c. href : 表示样式表的URL
 (2) style 元素 :

<style type="text/css"></style>

   //应付不能识别<style>和</style>的老浏览器 : 在注释标签里封装样式声明 如下 :

<style type="text/css"><!-- h1 {color: maroon;} body {background: yellow;}--></style>

 (3) @import 指示 :

@import url(xxx.css);

   // 注意 : 必须放在 style 标签里 且位于其他 CSS 规则之前
 (4) 内联样式 : 例 :

<p style="color : gray;">xxx</p>

2. CSS 注释 :

/* xxxxxxxxxxxxxxxxx */

   // 注意 : CSS 注释不可以嵌套使用 如 : 
      /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            /* xxxxxxxxxxxxxxxx */
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


第二章 选择符与结构 ·······

1.规则: 例 :

h2 {color : silver;}

   // 每条规则有两个部分 : 选择符和声明
 (1)选择符 : h2
   // 所谓选择符就是规则中用于选择 HTML 中要应用样式的那些元素
 (2)声明 :color : silver;
   // 声明有两个部分 : 属性和值 并以分号(;)作为终结
  ①属性 : color
  ②值 : silver

2.分组 : 让同一个样式应用于多个元素／让更多样式应用于一个或一组元素
 (1)分组选择符(给选择符分组) : 例 :

h2 , p {color : gary}

   // 规则将被同同时应用于两个选择符 逗号(,)告诉浏览器在这一条规则中包含两个不同的选择符
   // 示例 : 以下所有样式等效

点击展开

 (2)分组声明(给声明分组) : 例 :

h1 {font: 18px Helvetica; color: purple; background: aqua;}

   // 当在一条规则中分组声明时 分号(;)作为分隔符使用
   // 注意 : 培养好习惯 在最后的声明后面加上分号 
 (3)同时给选择符和声明分组 : 例 :

h1, h2, h3, h4, h5, h6 {color: gray; background: white; padding: 0.5em;}

3.类(Class)选择符和ID选择符
 (1)类选择符 : 例 :

<p class="xx">xxxxxxxxxxxxxxxxxxxxx</p> [ HTML 部分 ].xx {font-weight: bold;}[ css 部分 ]

   // 类选择符通过直接引用元素中类属性的值而产生效果 在引用前面用句点(.)来标识一个类选择符
 (2)ID选择符 : 例 :

<p ID="xx">xxxxxxxxxxxxxxxxxxxxx</p> [ HTML 部分 ]#xx {font-weight: bold;}[ css 部分 ]

   // ID选择符的前面是#号 而不是句点 这是它与类选择符的第一个区别
 (3)类选择符和ID选择符的区别
  ①类可以分配给任何数量的元素 ID 却只能在某个HTML文档中使用一次
  ② ID 对给定元素应用何种样式比类具有更高的优先权

4.伪类和伪元素
   // 见p43～p50

<!-- 1月22日到此结束 -->

5.上下文选择符 : 例 :

h2 p {color : gary}

   // 在一个上下文选择符里用空格来分隔一个或多个选择符 每个空格可以翻译为“是…的一部分”“它是…的后代”(从后至前)

6.元素分类
 (1)块级元素 : p , h1~h6 , li , table , div , body 等等 每个块级元素都从一个新行开始显示
 (2)内联元素 : a , em , span , img 等等 不必在一个新行显示
 (3)列表项元素 : li
   // 这几种元素占据了display属性中的三个
   // display : 允许值 : block | inline | list-item | none

第三章 单位和值·······

1.颜色
 (1)16种命名的标准颜色
 (2)RGB颜色
  ①百分比颜色
   a. 语法 : rgb(color)
   b. 含义 : 例 : rgb(100%,100%,100%) 将红、蓝、绿都设置到最大值

   c. 应用 : 例 :

h1 { color : rgb(100%,100%,100%); }

  ②数字颜色
   a. 语法 : rgb(color) 
   // 同百分值设置几乎完全一样 只是量度不一样：上限为255而不是100%
   b. 含义 : 例 : rgb(255,255,255) 将红、蓝、绿都设置到最大值
   c. 应用 : 例 :

h1 { color : rgb(255,255,255); }

   d. 同百分比颜色的转换 : 例 : 已知rgb(100%,100%,100%) -> 分别乘上255 -> rgb(255,255,255)
  ③16进制颜色 : #RRGGBB
  ④短16进制颜色 : #RGB 浏览器会对每一位进行复制

2.长度单位
 (1)绝对单位 : 英寸(in)、厘米(cm)、毫米(mm)、磅(pt)、pica(pc)
 (2)相对单位 : 元素的字体的高度(em)、字母"x"的高度(ex)、像素(px)