Cristiano前端学习之CSS语言基础

一、学习路线
在这里插入图片描述
二、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的使用

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样式表中采用/**/来注释
  - 定义格式：

			<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 > ... {... }
- 4.2.4 相邻兄弟选择器
  - 相邻兄弟选择器（Adjacent Sibling Selector）用于选择紧接在某元素之后的兄弟元素。
    相邻兄弟选择器元素之间使用加号（+）隔开。
  - 基本格式：selector1 + selector2 + ... {... }
- 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三种形式。
5.4 表格属性
- 表格是一种重要的数据组织形式，在数据显示时使用比较频繁。
- 通过表格属性对表格的边框、背景颜色和单元格间距等进行设置，使表格更加美观、富有特色，极大地改善表格的外观。
5.5 列表属性
- 列表属性用于改变列表项的图形符号。
- 列表的图形符号不仅可以是圆点、空心圆、方块或数字，甚至还可以是指定的图片。
- outside表示图形符号位于文本之外，当文本内容换行时，无需参照标志的位置；
- inside表示图形符号位于文本之内，在文本换行时列表内容将与列表项的符号相对齐。
5.6 分类属性
- 5.6.1 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属性进行清除。

六、伪类与伪元素

伪类和伪元素是预先定义的、独立于文档元素的，能够被浏览器自动识别。
处于特殊状态的元素称为伪类，而伪元素是指元素中特别的内容（元素的一部分）。
伪类以冒号（：）开始，在类型选择符与冒号之间不能出现空白，冒号之后也不能出现空白。
6.1 伪类
6.2 伪元素

Cristiano前端学习之CSS语言基础

おすすめ