一、学习路线
二、CSS概述
- 2.1 CSS概述
1、在页面排版时,内容与样式的混合设计方式将导致页面代码过于臃肿、难于维护,也不利于搜索引擎的检索
2、CSS(层叠样式表)的出现,将页面内容与样式彻底分离,极大改善了HTML在页面显示方面的缺陷
3、使用CSS样式表可以控制HTML标签的显示样式,如页面的布局、字体、颜色、背景和图文混排等效果
4、在网站的风格方面,一个CSS样式文件可以在多个页面中使用,当用户修改CSS样式文件时,所有引用该样式文件的页面外观都随之发生改变 - 2.2 CSS基本语法结构
- 样式是CSS的基本单元,每个样式包含两部分内容:
1)选择器(Selector):用于指明网页中哪些元素应用此样式规则。浏览器解析该元素时,根据选择器指定的样式来渲染元素的显示效果;
2)声明(Declaration):每个声明由属性和属性值两部分构成,并以英文分号(;)结束 - CSS基本格式:
- 其中,一个选择器可以包含有一个或多个声明。
- 在CSS样式声明中,书写格式可能有所不同,但应遵循以下规则:
- 第一项必须是选择器或选择器表达式
- 选择器之后紧跟一对大括号
- 每个声明是由属性和属性值组成,且位于大括号之内
- 声明之间需以英文分号进行间隔
- 最后一个声明后面的英文分号可以省略
- 样式是CSS的基本单元,每个样式包含两部分内容:
三、CSS的使用
- 3.1 内嵌样式
- 内嵌样式又称行内样式,将CSS样式嵌入到HTML标签中可以很简单的对某个标签单独定义样式。
如:<p style="color:red; background: yellow;">内嵌样式-style属性</p>
- 3.2 内部样式表
- 将CSS样式从HTML标签中分离出来,使得HTML代码更加整洁,而且CSS样式可以被多次使用。
- 内部样式表是一种写在
<style>标签
中的样式声明,仅对当前页面有效。 - 在
<style>标签
中定义CSS样式,然后在页面中使用CSS样式。 - 一般情况下,
<style>标签
位于<head>标签
之内; - 在页面加载过程中,先加载样式后加载页面元素,浏览器根据元素的顺序加载、渲染并在页面中显示出来。
- CSS样式表中采用/**/来注释
- 定义格式:
- 内部样式表是一种写在
- 将CSS样式从HTML标签中分离出来,使得HTML代码更加整洁,而且CSS样式可以被多次使用。
<style type = "text/css">
/*CSS内容*/
</style>
- 3.3 外部样式表
- 外部样式表是将CSS样式以独立的文件进行存放,然后在页面中引入该样式文件。
- 网站统一引用同一外部样式文件,使页面的风格保持一致,有利于页面样式的维护与更新,从而降低网站的维护成本。
- 用户浏览网页时,CSS样式文件会被暂时缓存;继续浏览其他页面时,会优先使用缓存中的CSS文件,避免重复从服务器中下载,从而提高网页的加载速度。
- 外部样式表又分两种:链接外部样式表和导入外部样式表
- 3.3.1 链接外部样式表
- 在HTML中标签用于将文档与外部资源进行关联,经常用于链接网页的外部样式表.
- 在页面的
<head>标签
中使用<link >标签
关联style.css样式文件,然后在<body>
中通过标签选择器引用样式文件中预定义的样式
<link type="text/css" rel="stylesheet" href="url" />
其中:
1、type属性用于设置链接目标文件的MIME类型,CSS样式表的MIME类型是text/css
2、rel属性用于设置链接目标文件与当前文档的关系,stylesheet表示外部文件的类型是CSS文件
3、href属性用于链接css文件
- 3.3.2 导入外部样式表
- 导入外部样式表是指在页面的内部样式表中导入一个外部样式表。
@import 样式文件的引用地址;
@import url("样式文件的引用地址");
其中:
@import关键字用于导入外部样式
url中的引用地址需要用引号(“ ”)引起来,否则会有浏览器不支持
在<style>标签中,@import语句需要位于内部样式之前
- 3.3.3 两种样式表的区别
1、隶属关系不同:<link>标签
属于HTML标签,而@import是CSS提供的载入方式
2、加载时间及顺序不同:使用<link>
链接的CSS样式文件时,浏览器先将外部的CSS文件加载到网页当中,然后再进行编译显示;而@import导入CSS文件时,浏览器先将HTML结构呈现出来,再把外部的CSS文件加载到网页中,当网速较慢时会先显示没有CSS时的效果,加载完毕后再渲染页面
3、兼容性不同:由于@import是CSS 2.1提出的,只有在IE 5以上的版本才能识别,而<link>标签
无此问题
4、DOM模型控制样式:使用JavaScript控制DOM改变样式时,只能使用<link>标签
,而@import不受DOM模型控制
5、综上所述,不管从显示效果还是网站性能上看,link链接方式更具有优势,应优先考虑 - 3.3.4 样式表的优先级
- 在多重样式情况下,样式表的优先级采用就近原则。一般情况下,多重样式的优先级由高到低的顺序是“内嵌、内部、外部、浏览器缺省默认”
四、CSS选择器
-
4.1 基本选择器:
-
通用选择器、标签选择器、类选择器、ID选择器
-
4.1.1 通用选择器
- 通用选择器是一个星号(*),功能类似于通配符,用于匹配文档中所有的元素类型。通用选择器可以使页面中所有的元素都使用该规则。
- 基本格式:
*{ }
- 举例:
*{ font-size:12px; color:red;}
-
4.1.2 标签选择器
- 标签选择器是指任意的HTML标签名作为一个CSS的选择器,用于将HTML中的某种标签来统一设置样式
- 例如:
p{ font-family:楷体; }
p是标签选择器,通过该选择器将页面中所有的段落字体统一设置成楷体。
-
4.1.3 类选择器
- 类选择器是指同一样式的元素定义为一类,在类名前有一个点号(.)
- 定义举例:
.classname{ property1:value; … }
- 引用举例:
<div class="classname ">……</div>
-
4.1.4 ID选择器
- ID选择器的定义与类选择器相似,区别在于使用井号(#)进行定义;在HTML文档中,元素的ID要求是唯一的,通过ID来识别页面中的元素。通过ID选择器可以对元素单独的设置样式。
- 在一个文档中,由于ID属性是唯一的,因此ID选择器具有一定局限性,应尽量少用
- 基本格式:
#idValue{ property1:value; … }
- 举例:
#myId { color:red; text-decoration:line-through; }
-
4.1.5 基本选择器的优先级
- ID选择器>类选择器>标签选择器>通用选择器
-
-
4.2 组合选择器:
- 多元素选择器、后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器
- 4.2.1 多元素选择器
- 当多个元素拥有相同的特征时,可以通过多元素选择器的方式来统一定义样式,有效地避免样式的重复定义。多元素选择器允许一次定义多个选择器的样式,选择器之间使用逗号(,)隔开。
- 举例:
p,div {font-size:14px; color:blue; }
等价于
p {font-size:14px; color:blue; }
div {font-size:14px; color:blue; }
-
4.2.2 后代选择器
- 后代选择器(Descendant Selector),用于选取某个元素的所有后代元素;后代元素之间用空格隔开。
- 基本格式:
selector1 selector2 ... {... }
- 举例:
div p {background-color:#CCC; }
将<div>标签
中的<p>标签
的背景颜色设为#CCC,而不在<div>标签
内的<p>标签
保持原有样式。 - 4.2.3 子选择器
- 子选择器(Child Selectors)用于选取某个元素的直接子元素,直接相关的(间接子元素不适用);
子选择器元素之间使用大于号(>)隔开。 - 在HTML文档中,子元素可以继承父元素的某些样式;
- 当子元素与父元素定义的样式重复时,则会覆盖父元素中的样式。
- 基本格式:
selector1 > selector2 > ... {... }
- 子选择器(Child Selectors)用于选取某个元素的直接子元素,直接相关的(间接子元素不适用);
- 4.2.4 相邻兄弟选择器
- 相邻兄弟选择器(Adjacent Sibling Selector)用于选择紧接在某元素之后的兄弟元素。
相邻兄弟选择器元素之间使用加号(+)隔开。 - 基本格式:
selector1 + selector2 + ... {... }
- 相邻兄弟选择器(Adjacent Sibling Selector)用于选择紧接在某元素之后的兄弟元素。
- 4.2.5 普通兄弟选择器
- 普通兄弟选择器(General Sibling Selector)是指拥有相同父元素的元素;
- 元素与元素之间不必直接紧随;选择器之间使用波浪号(~)隔开。
- 基本格式:
selector1 ~ selector2 ... {... }
-
4.3 属性选择器
- 略
五、CSS样式属性
-
在选择器的定义中,声明由属性和属性值构成。
-
常用的CSS样式的属性有文本、字体、背景、表格、列表及定位等属性。
-
5.1 文本属性
-
5.2 字体属性
- 字体(又称字型)是字母和符号的样式集合。虽然字体之间可能会一定的差异,但总体特征基本相同。
- 基线:代表字体的字型起始线
- 中线:小写字母达到的最高点
- 升高:字体中最大字形的最高点
- 下沉:一些小写字符达到的最低点
- x高度:字母x在字体中的高度,等同于小写字形高度
-
5.3 背景属性
- 背景区域的填充(绘制)有border-box、padding-box和content-box三种形式。
- 背景区域的填充(绘制)有border-box、padding-box和content-box三种形式。
-
5.4 表格属性
- 表格是一种重要的数据组织形式,在数据显示时使用比较频繁。
- 通过表格属性对表格的边框、背景颜色和单元格间距等进行设置,使表格更加美观、富有特色,极大地改善表格的外观。
-
5.5 列表属性
- 列表属性用于改变列表项的图形符号。
- 列表的图形符号不仅可以是圆点、空心圆、方块或数字,甚至还可以是指定的图片。
- outside表示图形符号位于文本之外,当文本内容换行时,无需参照标志的位置;
- inside表示图形符号位于文本之内,在文本换行时列表内容将与列表项的符号相对齐。
-
5.6 分类属性
- 5.6.1 cursor属性
- cursor属性用于指定用户鼠标的指针类型。在设计表单过程中,使用图片作为提交按钮,当鼠标移到图片上时,通常将鼠标指针由箭头改成手的形状,从而进一步对用户进行提示。
- cursor属性用于指定用户鼠标的指针类型。在设计表单过程中,使用图片作为提交按钮,当鼠标移到图片上时,通常将鼠标指针由箭头改成手的形状,从而进一步对用户进行提示。
- 5.6.2 display属性
- 通过display属性可以将页面元素隐藏或显示出来;
- 通过display属性可以将元素强制改成块级元素或内联元素。
- 5.6.3 visibility属性
- visibility属性可以将页面中的元素隐藏,但是被隐藏的元素仍占原来的空间
- 当不希望对象在隐藏时仍然占用页面空间时,可以使用display属性
- visibility属性的取值范围为visible或hidden
- 5.6.4 position属性
- 一般情况下,页面是由页面流构成的,页面元素在页面流中的位置是由该元素在(X)HTML文档中的位置决定的
- 块级元素从上向下排列(每个块元素单独成行),而内联元素将从左向右排列,元素在页面中的位置会随外层容器的改变而改变
- 在CSS中,提供了三种定位机制:普通流、定位(position)和浮动(float)
注:
(1)当position的属性值为relative、absolute或fixed时,可以使用元素的偏移属性left、top、right和bottom进行重新定位
(2)当position属性为static时,会忽略left、top、right、bottom和z-index等相关属性的设置
- 5.6.5 float与clear属性
- float属性可以将元素从正常的页面流中浮动出来,离开其正常位置,浮动到指定的边界。
当元素浮动到边界时,其他元素将会在该元素的另外一侧进行环绕。
- 在页面中,浮动的元素可能会对后面的元素产生一定的影响;
- 当希望消除因为浮动所产生的影响时,可以使用clear属性进行清除。
- float属性可以将元素从正常的页面流中浮动出来,离开其正常位置,浮动到指定的边界。
- 5.6.1 cursor属性
六、伪类与伪元素
- 伪类和伪元素是预先定义的、独立于文档元素的,能够被浏览器自动识别。
处于特殊状态的元素称为伪类,而伪元素是指元素中特别的内容(元素的一部分)。 - 伪类以冒号(:)开始,在类型选择符与冒号之间不能出现空白,冒号之后也不能出现空白。
- 6.1 伪类
- 6.2 伪元素