HTML5第三天笔记

CSS

html:结构

css:表现

CSS:层叠样式表

作用：修饰和美化html 。实现了结构和样式的分离。

Cascading Style Sheet

使用DIV+CSS优点：

1.表现和内容分离

2.提高页面浏览速度

3.易于维护和改版

样式表

选择器

样式

语法： 选择器{样式1:样式值1;样式2：样式值2;}

样式表的分类：

1，行内样式表；(没有实现结构和表现的分离；优先级最高）

语法：<p style="">123</p>

2, 内部样式表；(没有实现结构和表现的分离；）

语法；<style></style> <!--HTML5写法-->

<style type="text/css"></style> <!--HTML4写法-->

3，外部样式表；(实现了结构与表现的分离；

1)链接式样式表：

<link href="样式表的路径" rel="stylesheet"> <!--HTML5写法-->

<link href="样式表的路径" rel="stylesheet" type="text/css"> <!--HTML4写法-->

2）导入式样式表；(很少用到）

语法：<style>

@import url(css样式表的路径）;

</style>

样式表的优先级：

就近原则

行内样式表优先级最高

注释：

html注释 <!--HTML-->

css注释 /*CSS*/

不能嵌套注释

选择器：

基本选择器：

1）全局选择器：* 表示 语法：*{样式}

*代表所有的标签、所有的标签样式全部改变

2）标签选择器

p{ }

h1{ }

特点：相同的标签具有相同的样式

3）类别选择器

先定义 后引用

定义： .类选择器名称{样式}

引用：class="类别选择器的名称"

特点：定义一次，多次使用。使用两个类别选择器时用空格空开

4）id选择器

先定义 后引用

定义：#id选择器的名称{样式}

引用：id="id选择器的名称"

特点：具有唯一性

id在同一个页面中名称一样的id只能出现一次

优先级高

选择器的优先级：

行内样式表>id>.class>element(标签选择器）>*（全局选择器）

权重： 1000 >100> 10 > 1 > 0

权重用加法计算

颜色值的表示法：

1，单词表示法：red;green;blue;yellow;orange;pink;purple;black;white;

2，十六进制表示法：（0-9 a-f） #ff0000 #红红绿绿蓝蓝

#f00 #红绿蓝

3，rgb表示法：（0-255）

background-color:rgb(255,0,0) rgb(红，绿，蓝）

rgb(255,255,255)白色

4,rgba表示法：

a表示透明度（0-1之间的改变，0表示完全透明，1表示不透明；）

background-color:rgba(255,0,0,0.5)

background-color:rgba(255,0,0,.5)

rgb相等的时候表示一种灰

以上就是HTML5第三天笔记的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！