HTML5扩展
语义化标签
在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义。(即使我们用css样式的id和class形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”。
不使用<div>
标签来布局网页后:
CSS复习
CSS样式引入
内联样式(行内样式)
行内 style=“”
内部样式(嵌入样式)
<head> 写在body中也可
<style></style>
</head>
外部样式
<link href="css/***.css" rel="stylesheet" type="text/css"/>
优先级:行内样式 > 内部样式 、 外部样式
内部样式 , 外部样式 的优先级根据书写的先后顺序决定优先级(覆盖原理)
实例化三属性:宽,高,背景颜色
选择符
基础选择符
类型选择符(div{})
id选择符(#id{})
class选择符(.class{})
复合选择符
复合选择器是通过基本选择器进行组合后构成的,,常用的复合选择器有:交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。
通配符 ( * )
一般用于css开头,可以控制所以的标签
*{
属性1:属性值1;
属性2:属性值2;
…
}
交集选择符 ( . )
交集选择器由两个选择器直接构成,其中第一个必须是元素选择器,第二个必须是类选择器或者ID选择器。两个选择器之间必须连续写,不能有空格。交集选择器选择的元素必须是有第一个选择器指定的元素类型,该元素必须包含第二个选择器对应的ID或者类名。交集选择器选择的元素是三个选择器的样式,即第一个选择器、第二个选择器和交集选择器三个选择器样式的层叠效果。
例: p.one 选择的是: 类名为 .one 的 段落标签。
元素选择器.类选择器|#ID选择器{
属性1:属性值1;
属性2:属性值2;
…
}
提示:
交集选择器由于会增加代码量,会影响性能且不利于后期维护,所以除了不得已使用外,一般不推荐使用。
群组选择符(并集选择器) ( , )
使用 “,” 分隔选择符,实现对多个选择器进行“集体声明” ,从而简化了CSS代码量。
选择器1,
选择器2,
选择器3{
属性1:属性值1;
属性2:属性值2;
…
}
选择器的优先级
css样式的简单权重级别由高到低排列:
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素标签上的内联样式
id 选择器
类选择器、伪类选择器、属性选择器
标签选择器、伪元素选择器
通配符选择器
浏览器自定义
复杂场景下计算优先级
复杂场景下将选择器分为四个级别通过各级别的出现次数决定。
四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符。
优先级的算法:
每个规则对应一个初始"四位数":0、0、0、0
若是 行内选择符,则加 1、0、0、0
若是 ID选择符,则加 0、1、0、0
若是 类选择符/属性选择符/伪类选择符,则分别加 0、0、1、0
若是 元素选择符/伪元素选择符,则分别加 0、0、0、1
算法:将每条规则中,选择符对应的数相加后得到的“四位数”,从左到右进行比较,大的优先级更高。
优先级相同时,采用就近原则,即最后出现的样式。
提升指定样式规则的应用优先权,即!important为开发者提供了一个增加样式权重的方法,让浏览器首选执行这个语句。
CSS 文字属性
color
color属性用来设置字体的颜色,字体颜色设置格式有三种
浏览器预设样色,如red,pink,blue,grenn等 p{color:pink;}
十六进制格式,如#333,#eee,#ff3300等 p{color:#333;}
RGB颜色代码,如红色可以表达为 rgb(255,0,0) 或者 rgb(100%,0%,0%)
font
该属性可以一次性使用多个属性来定义文本字体,是字体的复合属性。具体语法如下:
{font: font-style font-variant font-weight
font-size/line-height font-family;}
font-style
该属性是用来定义字体的风格,即字体的显示样式。具体的语法如下:
{font-style: normal | italic | oblique | inherit;}
其中属性值分别表示默认值、斜体、倾斜、继承。
font-variant
该属性用于设置大写字母的字体显示。具体的语法格式如下:
{font-variant: normal | small-caps | inherit;}
其中的参数值分别表示默认值、显示小型大写字母的字体、继承。
font-weight
该属性用来定义字体的粗细程度,具体的语法如下:
{font-weight: 100-900 | bold | bolder | lighter | normal;}
其中的属性值分别表示数值、粗体、更粗、更细、默认。
font-size
该属性用来设置文字的大小,具体的语法格式如下:
{font-size:数值 | xx-small | x-small | small | medium | large | x-large
| xx-large | larger | smaller | lentgth | inherit;}
这些参数代表的意义分别是:像素数值、最小、较小、小、正常、大、较大、最大、相对字体尺寸、相对字体尺寸、百分比、继承。
说明:
1) 属性值为数值时,必须给属性值加单位,属性值为0时除外。
2) 单位还可以是pt,pt是绝对单位,在dpi是96的情况下,9pt=12px,12pt=16px。
3) 单位还可以是em,1em叫一个字节,1em就是一个字的宽度,默认情况下,1em=16px,0.75em=12px;
注意:谷歌浏览器识别最小字体为12px;
font-family
该属性用于指定文字的字体类型,如宋体、黑体、隶书、楷体、Times New Roman等。具体的语法如下:
{font-family:name;}
其中,name是字体的名称。如:{font-family: 宋体;}
text-decoration
文本装饰属性用来让文本有更多的展现形式,如:上划线、下划线、中划线(删除线)等
text-decoration: none;/*取消装饰*/
text-decoration: underline;/*下划线*/
text-decoration: overline;/*上划线*/
text-decoration: line-through;/*删除线*/
text-indent
该属性用来设置首行的文本缩进,属性值有三种,一个字符宽度的倍数em、相对于浏览器窗口宽度的百分比%、像素px
text-indent: 2em;
line-height
该属性用来设置行于行之间的距离,属性值有三种单位,像素px、百分比%、相对值em
注意:
1)当单行文本的行高 = 容器高时,可实现单行文本在容器中垂直方向居中对齐
2)当单行文本的行高 < 容器高时,可实现单行文本在容器中垂直方向居中对齐以上任意位置的定位
3)当单行文本的行高 > 容器高时,可实现单行文本在容器中垂直方向居中对齐以下任意位置的定位
text-align
该属性来设置文本的水平对齐方式,属性值有四种,左对齐 left、右对齐 right、居中对齐 center,适配宽度 justify
vertical-align
使用该属性需要设置display:table-cell(按照单元格的样式显示元素)
该属性来设置文本的垂直对齐方式,属性值有三种,上对齐 top、底部对齐 button、居中对齐 middle
letter-spacing 和 word-spacing
字间距 和 单词间距(英语单词)