YY前端课程5-6

时间:2023-12-21 19:38:02

第五次课内容:

1. 要注意标签的层次,运用缩进indent,使HTML结构清晰,增加可读性accessible

2. HTML布局网页,CSS显示样式(CSS是用来美化HTML标签的)

3. 开放标签(有开始标记和结束标记)和自闭合标签

4. style标签的type属性值,说明遇到type的时候,将以何种方式显示style标签,例:type="text/css"时,就以CSS样式解析style标签

5. ID选择器作用于最顶层的块

6. CSS的语法:选择器+{1个或多个声明} ,其中 声明=属性:属性值

7. 属性值的定义语法:由 关键字 或 特殊符号 或 类型 构成

除了多个单词的情况外,属性值不用带引号,eg:{font-family:"Times New Roman";},Times New Roman是一个字体名,所以要引起来

关键字  eg: {color:blue;} blue为关键字

特殊符号  eg:{font:12px/20px;},意为字体大小是12px,行高是20px;这里的"/"就是特殊符号

类型  eg:{width:200px;} 200px就是类型,color、percentage、length的值是最常出现的三种类型

8. 相对长度单位em表示的是倍数

属性值的控制因素:

a. 并列:值用空格隔开,必须全部出现,顺序不能改变

b. 互斥:值用|隔开,有且只能有一个值出现

c. 并且:值用&&隔开,必须全部出现,顺序可调整

d. 或者:值用||隔开,至少有一个值必须出现,顺序可调整

e. 分组符号:值用[ ]括起来,中括号之间用空格隔开,例:center和top和red就是[center|left] [top&&red]的一种属性值

f. *表示属性值出现的次数:0次、1次或多次

g. +表示属性值出现的次数:1次或多次

h. ?表示属性值可有可无

优先级:[] > 并列 > 并且&& > 或者|| > 互斥|

第六次课内容:

1. 以font开头的为文本样式;以text开头的为段落样式

2. CSS参考手册http://css.doyoe.com/ 可以查询CSS的知识点

3. 字体粗细font-weight:normal | bold | bolder | lighter | <integer>

integer=整数、完整的事物、整体

这里integer的取值范围=100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ,其中400=normal  700=bold

4. 字体倾斜font-style: normal | italic | oblique | inherit

oblique=斜的、倾斜物、倾斜=字体倾斜,把没有斜体属性的文字强制变为斜体

italic=斜体的、斜体字=倾斜字体,把有斜体属性的文字变成斜体

5. 字体变形font-variant: normal | small-caps | inherit

字体变形是把英文字母变成小号的大写字母

6. font是复合属性,可以有多个属性值,因此多个font属性可以简写为:

font:[ <' font-style '> || <' font-variant '> || <' font-weight '> ]? <' font-size '> [/ <' line-height '> ]? <' font-family '>

注:? 表示可有可无;/ 是特殊符号;[] 和 [] 之间是用空格隔开的,表示并列

7. 行高 line-height 是字体最底端(底线)与字体内部顶端(顶线)之间的距离

YY前端课程5-6

8. 文本装饰text-decoration: none 无 | underline 下划线 | line-through 删除线/贯穿线 | overline 顶划线(用的特别少)

9. 行高 line-height 和 缩进 text-indent 最好都用相对值,如 百分比或者em,这样当父字体大小改变时,他们的值会自动做相应调整