本文共 2325 字,大约阅读时间需要 7 分钟。
第一章 HTML 与 CSS ·······
1.在 HTML 中链接 css (1) link :① link 标签
a. 用途 : 为 HTML 文档链接样式表 b. 注意 : 必须放在 head 元素里 ② link 属性 a. rel : 含义"关联" 指关联"样式表" b. type="text/css" : 描述使用link标签载入的数据类型 c. href : 表示样式表的URL (2) style 元素 ://应付不能识别<style>和</style>的老浏览器 : 在注释标签里封装样式声明 如下 :
(3) @import 指示 :
@import url(xxx.css);
// 注意 : 必须放在 style 标签里 且位于其他 CSS 规则之前
(4) 内联样式 : 例 :xxx
2. CSS 注释 :
/* xxxxxxxxxxxxxxxxx */
// 注意 : CSS 注释不可以嵌套使用 如 :
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx /* xxxxxxxxxxxxxxxx */ xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */第二章 选择符与结构 ·······1.规则: 例 :h2 {color : silver;}
// 每条规则有两个部分 : 选择符和声明
(1)选择符 : h2 // 所谓选择符就是规则中用于选择 HTML 中要应用样式的那些元素 (2)声明 :color : silver; // 声明有两个部分 : 属性和值 并以分号(;)作为终结 ①属性 : color ②值 : silver2.分组 : 让同一个样式应用于多个元素/让更多样式应用于一个或一组元素 (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)类选择符 : 例 :
xxxxxxxxxxxxxxxxxxxxx
[ HTML 部分 ].xx {font-weight: bold;}[ css 部分 ]
// 类选择符通过直接引用元素中类属性的值而产生效果 在引用前面用句点(.)来标识一个类选择符
(2)ID选择符 : 例 :xxxxxxxxxxxxxxxxxxxxx
[ 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)转载地址:http://ewews.baihongyu.com/