CSS基础+盒子模型+选择器

一、CSS基础

1.1 CSS简介

CSS为层叠样式表(Cascading Style Sheets)的简称。也称CSS样式表或级联样式表。
CSS为标记语言，主要用于设置HTML页面中文本内容、图片的外形以版面的布局和外观显示样式(即描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素)。

样式定义通常保存在外部 .css 文件中。通过使用外部样式表文件，就可以使用一个CSS文件来改变很多网站的外观，取代了HTML中的样式语言

1.2 CSS语法规范

由两个主要的部分构成：选择器+声明块（一条或多条声明）
说明：

• 选择器指向需要设置样式的 HTML 元素(标签）。
• 多条 CSS 声明用分号分隔，声明块用花括号括起来。
• 属性与属性值之间用 冒号（英文）隔开。

实例：

p {
  color: red;
  text-align: center;
}

在书写过程中一般采用展开的格式（看起来规范整洁），并且书写过程中最好全部使用小写，为了更加规范习惯在选择器（标签）和大括号中间，以及属性值前面冒号后面保留一个空格

1.20 CSS添加方式

• 行内样式
• 内嵌<style>
• 外部文件：用<link>引入

1.3 css字体属性

CSS 中，用 font-family属性规定文本的字体系列。

font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。以需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号（英文）分隔。

实例：

.p1 {
  font-family: "Times New Roman", Times, serif;
}

CSS中，用font-size 属性设置文本的大小。

实例：

h1 {
  font-size: 40px;
}

说明：

• px为常用大小单位
• em为相对单位，1em 等于当前字体大小。浏览器中的默认文本大小为 16px，故默认大小 1em 为 16px。
• 普通文本（如段落）的默认大小为 16px（16px = 1em）

CSS中，使用font-weight 属性设置文本字体的粗细

实例:

p {
font-weight: bold;
}

属性值	描述
normol(400)	默认值（不加粗）
bold(700)	定义粗体（加粗)
100~900	设置不同粗细，数字后不接单位！！

在CSS中，用font-style 属性指定文字样式

实例：

p {
  font-style: normal;
}

属性值	说明
normal	文字正常显示标准样式
italic	文本以斜体显示

1.4 css背景属性

在CSS中，background-color属性指定元素的背景色

颜色表示方法:

• 有效颜色名称 - 比如 “red”
• 十六进制值 - 比如 “#ff0000”
• RGB 值 - 比如 “rgb(255,0,0)”：rgb(red, green, blue) 每个参数设置 “0~255” 的范围。

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

在CSS中，background-image属性指定用作元素背景的图像

在CSS中，用background-repeat 属性对背景图像进行平铺

属性值	说明
repeat	背景图像在横向和纵向平铺
no-repaet	背景图像不平铺
repeat-x	背景图像在横向平铺
repeat-y	背景图像在纵向平铺

在CSS中，background-position属性用于指定背景图像的位置

属性值	说明
length	百分数/ 浮点数+单位标识组成的长度值
position	top / center / bottom / left / right

在CSS中，用background-attachment属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

属性值	说明
fixed	背景图像固定
scroll	背景图像随页面一起滚动

背景属性实例：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

1.5 css文本属性

在CSS中，color 属性用于设置文本的颜色(颜色的三种表示方法同上）

在CSS中，用text-align属性设置文本的水平对齐方式

属性值	说明
left	左对齐（默认值
right	右对齐
center	居中对齐
justify	拉伸每一行，使每一行具有相等的宽度，并且左右边距相同

在CSS中，用text-decoration 属性给文本添加下划线、删除线、上划线

常用属性值	说明
none	默认没有装饰线（最常用）
underline	下划线（链接a自带下划线）

在CSS中，用text-indent属性指定文本第一行的缩进（段首的缩进）

在CSS中，用line-height属性设置行间距

在CSS中，用text-shadow 属性设置文本阴影

基本语法：

text-shadow: h-shadow v-shadow blur color;

属性值	说明
h-shadow	水平阴影的位置（必须属性，可负值）
v-shadow	垂直阴影的位置（必须属性，可负值）
blur	模糊的距离
color	阴影的颜色

文本属性实例：

body {
  color: blue;
  text-align: center;
  text-decoration: none;
  text-indent: 2em;
  text-shadow: 2px 2px 5px red;
}

二、CSS选择器

2.1 CSS基础选择器

选择器为根据不同的需求把不同的标签选出来

元素选择器

元素选择器根据元素名称（标签）来选择 HTML 元素。

实例:

p {
  text-align: center;
  color: red;
}

作用为：将标签<p>中的内容变红且居中。

类选择器

类选择器选择有特定 class 属性的 HTML 元素

实例:

.center {
  text-align: center;
  color: red;
}

作用为：将class="center"的HTML元素居中且变红
注意:

• 类选择器使用"."(英文点号）进行标识，后面紧跟类名（自定义）
• 尽量使用英文字母来表示，不使用纯数字（不能以数字开头），中文等命名
• 类名要有意义
  多类名使用方式：

HTML 元素也可以引用多个类。各类名之间用空格隔开。

实例:

<p class="center large">这个段落引用两个类。</p>

id选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素，CSS中 id选择器 以 “#” 来定义。

实例:

#nav {
  text-align: center;
  color: red;
}

作用为：将id="nav"的HTML元素居中且变红。

注意:

• id选择器使用"#"(英文）进行标识，后面紧跟id名（自定义）
• 同样id 名称不能以数字开头
• id名称要有意义

类选择器与id选择器比较

• 两者最大的区别在于可被使用次数。
• 类选择器可以包含多个类名，且一个类名可被多次使用。
• 元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素

通符选择器

通用选择器（*）选择页面上的所有的 HTML 元素

实例：

 * {
	margin: 0;
	padding: 0;
	}

注意:

• 通符选择器不需要调用，直接作用于全部标签
• 实例中的为消除所有元素标签的内外边距（初始化，因为各浏览器的不兼容问题）

2.2 CSS复合选择器

复合选择器建立在基础选择器上，对基础选择器进行组合（两个或多个基础选择器），来更准确，更高效的选择目标元素（标签）

后代选择器

后代选择器（descendant selector）又称为包含选择器，可以选择作为某元素后代的元素。

基本语法：
外层标签写前面，内层标签写后面，中间用空格隔开

	h1 em {color:red;}

表示为选择h1中所有的em元素，使文本变为红色

子元素选择器

子元素选择器（Child selectors）只能选择作为某元素子元素的元素

基本语法：
父元素写前面，最近一级子元素写后面，两者用大于号隔开

	h1 > strong {color:red;}

表示为选择h1的直接子代（儿子）strong中文本变为红色

并集选择器

并集选择器用于选择多组标签 ，为其定义相同的样式（通常用于集体声明）

基本语法：
任何选择器可作为并集选择器一部分，各选择器之间用逗号（英文）隔开

	ul,div {样式说明}

链接伪类选择器

伪类用于定义元素的特殊状态

例如:

• 设置鼠标悬停在元素上时的样式
• 为已访问和未访问链接设置不同的样式
• 设置元素获得焦点时的样式

选择器	说明
a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上（经过）的链接
a:active	选择活动链接（鼠标按下未弹起的链接）

说明:

为了确保生效，按照:link、:visited、:hover、:active的顺序声明

三、CSS的三大特性

3.1 层叠性

在CSS中，运用层叠性来解决样式冲突的问题

层叠原则:

• 样式冲突，后来者居上，覆盖原来的样式
• 样式不冲突则不层叠

3.2 继承性

在CSS中，子标签会继承父标签的某些样式（子承父业），可以继承父元素的文本、字体以及color等属性

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。

3.3 优先级

根据选择器的权重来决定选择器的优先级

选择器优先级排序:

选择器	权重
!important	无穷大
行类样式style	1,0,0,0
ID选择器	0,1,0,0
类选择器，伪类选择器	0,0,1,0
元素（标签）选择器	0,0,0,1
继承或通配符	0,0,0,0

权重的叠加

在复合选择器会有权重的叠加问题，可以叠加但是不会进位

例：
div ul li 权重叠加为：0,0,0,3
.nav ul li 权重叠加为：0,0,1,2

四、CSS盒子模型

所谓盒子模型，就是将HTML页面中的布局元素看做为一个矩形盒子，封装周围的HTML元素（边框、外边距、内边距和实际内容）

4.1 边框（border）

在CSS中，用border 属性设置元素边框的样式、宽度和颜色

边框粗细

border-width 属性指定四个边框的宽度

边框颜色

border-color 属性用于设置四个边框的颜色，如果未设置 border-color，则它将继承元素的颜色。

边框样式

border-style属性指定要显示的边框类型

属性值	说明
solid	实线边框
dotted	点线边框
dashed	虚线边框
none	无边框
double	双边框

实例：

.one {
  border-style: solid;
  border-color: red;
  border-width: 5px;
}

复合写法:(各属性没有先后顺序）

border:5px solid red;

注意：

• 可以分别给边框的四边设置属性使用border-top,border-right,border-bottom,border-left来定位。
• 在border中属性设置是以顺时针的顺序来设置

4.2 内边距（padding）

padding属性用于设置内边距（边框与内容之间的距离）

属性值	说明
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

复合写法:（数值的个数不同代表不同的涵义）

形式	含义
padding: 5px	一个值，上下左右都有5像素的内边距
padding: 5px 10px	两个值，上下为5像素，左右为10像素
padding: 5px 10px 20px	三个值，上为5像素，左右为10像素，下为20像素
padding: 5px 10px 20px 30px	四个值，上为5像素，右为10像素，下为20像素，左为30像素

4.3 外边距（margin）

margin属性用于设置外边距，控制盒子与盒子间的距离
属性值与padding相似

盒子的基本组成模型：

由内容、边框（border）、内边距（padding）、外边距（margin）组成

外边距使块级元素水平居中

条件：

• 盒子必须设置了宽度
• 左右外边距都设置为auto
常见写法:

1.margin-left: auto; margin-right:auto;
2.margin:auto;
3.margin: 0 auto;

4.4 overflow属性

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

属性：

属性	说明
visible	默认属性。溢出没有被剪裁。内容在元素框外渲染
hidden	溢出被剪裁，其余内容将不可见
scroll	溢出被剪裁，同时添加滚动条以查看其余内容
auto	仅在必要时添加滚动条