CSS基础知识点总结

一.CSS简介

1.1 CSS简介

① CSS指的是层叠样式表，用来控制网页外观的一门技术

② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本

1.2 CSS引入方式

① 在一个页面引入CSS，共有三种方式

外部样式表
内部样式表
行内样式表

② 外部样式表（实际开发中使用）

是最理想的CSS引入方式
外部样式表引入是指把CSS代码和HTML代码单独放在不同的文件中，然后在HTML中使用link引入CSS文件
语法：<link rel="stylesheet" type="text/css" href="文件路径">
rel 的取值是固定的，就是stylesheet, 表示引入的是一个样式表文件
type属性的取值也是固定的，“text/css”，表示这个标准的CSS
href表示CSS的文件路径
link标签是放到head标签内的

③ 内部样式表

把HTML代码和CSS代码放到同一个HTML文件中，CSS代码是放在style标签内，style标签是放在head标签内部的
语法：type = "text/css" 是必须添加的，这是标准的CSS

<head><style type="text/css"></style>
</head>

④ 行内样式表

行内样式表也是把HTML代码和CSS代码放到同一个HTML文件中，但是两者有本质的区别
内部样式表的CSS是在“style标签”内定义的
行内样式表的CSS是在“标签的style属性”中定义的

二.CSS选择器

2.1 元素的id和class

① id属性

id属性具有唯一性，在一个页面中相同的id只能出现一次

② class属性

就是“类”，可以为同一个页面的相同元素或者不同元素设置相同的class，然后使相同的class的元素具有相同的CSS样式

③ 理解：id就像身份证号，class就像你的名字，身份证号只能有一个，但是名字可以有多个

2.2 CSS选择器

1.选择器简单介绍

① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式

② 五种常用的选择器

元素选择器
id选择器
class选择器
后代选择器
群组选择器

③ 语法

选择器

{

属性1：取值1；

属性2: 取值2；

...

属性n: 属性n;

}

2.五种常用选择器介绍

① 元素选择器

选中相同的元素，然后对相同的元素定义同一个CSS样式
语法：表示把页面中所有div选中，然后定义它们的宽和高

div{width:100px; height:100px;}

② id选择器

id名前面必须加上前缀"#"，否则该选择器无法生效
语法：

#box{width:100px; height:100px;}

③ class选择器

类选择器，可以对“相同的元素”或者“不同的元素” 定义相同的class属性，然后再针对这个class元素进行CSS样式操作
class前面必须加上前缀英文句号
如果要为多个元素定义相同的样式，建议使用class选择器
语法

.box{width:100px; height:100px}

④ 后代选择器

选择元素内部的后代元素
语法

#father div{width:100px; height:100px}

父元素和后代元素要用空格分隔开

⑤ 群组选择器

同时对几个选择器进行相同的操作
语法

h3,p{width:100px; height:100px}

对于群组选择器，两个选择器之间必须要用英文逗号隔开

三.字体样式

① 字体样式属性

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体风格
color	字体颜色

② font-family

定义字体类型
语法：font-family: 字体1，字体2，字体3，字体4....
font-family 可以指定多种字体，使用多个字体，按照从左到右的顺序排列，并且以英文逗号隔开，如果不定义，浏览器会采用默认字体类型：“宋体”
如果字体类型只有一个英文单词，则不需要加双引号，如果是由多个英文单词组成或者是有中文的，需要加双引号，加英文的双引号""

③ font-size

font-size:像素值
font-size的取值有两种，一种是关键字，small medium large 等，另外一种是 “像素值”，如10px, 16px，21px等
只需要掌握像素值的方式就可以
px:像素，1像素指的是一张图片中最小的点，或者是计算机屏幕最小的点；px是相对单位，电脑分辨率不同，1px的大小也会不同

④ font-weight

定义字体粗细
语法：font-weight: 取值
font-weight的属性值有两种

（1）100~900的数值（不建议）

（2）关键字：normal(正常 400) lighter(较细 100) bold(较粗 700) bolder(很粗 900)

⑤ font-style

定义斜体风格
语法：font-style:取值
取值：normal:正常值 italic:斜体 oblique:斜体
italic是字体的一个属性，但是并非所有的字体都有这个属性，对于有italic属性的字体，可以使用它实现斜体效果，没有italic属性的字体，就使用oblique实现斜体效果

⑥ color

使用color来定义字体颜色
语法：color: 颜色值
color的取值：一种是"关键字"，一种是"十六进制RGB的值"
关键字：blue green

⑦ CSS注释

/* */

四.文本样式

① 首行缩进 text-indent

使用这个属性实现p元素的首行缩进
语法：text-indent:像素值

② 水平对齐：text-align

控制文本在水平方向上的对齐方式
语法： text-align: 取值
属性取值： left (左对齐) center(居中) right(右对齐)
不仅对文本有效，对图片也有效

③ text-decoration 属性

定义文本的修饰效果（下划线，中划线，顶划线）
语法：text-decoration: 取值
取值：none(去除所有的划线效果) underline(下划线) line-through(中划线) overline(顶划线)
超链接去掉下划线：a{ text-decoration:none }
下划线标明文章的重点，中划线一般用于促销，顶划线不怎么用

④ text-transform 属性

进行文本大小写转换
针对英文，中文不存在大小写之分
语法： text-transform：取值
取值:none(无转换) uppercase(转换为大写) lowercase(转换为小写) capitalize(指将每个英文单词首字母转换为大写)

⑤ line-height 属性

一行的高度

⑥ 间距：letter-spacing word-spacing

letter-spacing 控制字与字之间的举例
语法：letter-spacing：像素值
word-spacing：控制两个单词之间的距离
word-spacing 一般来说，只针对英文单词而言

五.边框样式

5.1 整体样式

① border-width: 用于定义边框的宽度，是一个像素值

② border-style：用于定义边框的外观

none: 无样式
dashed:虚线
solid:实线

③ border-color:用于定义边框的颜色，取值可以是"关键字"或者"十六进制RGB值"

④ 简写形式：border: 1px solid red

5.2局部样式

① 边框

border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框

六. 列表样式

6.1 定义列表项符号

① 语法：list-style-type:取值

② 属性取值

有序列表：

属性值	说明
decimal	阿拉伯数字
lower-roman	小写罗马数字i, ii, iii
upper-roman	大写罗马数组I II III
lower-alpha	小写英文字母：a, b, c ....
upper-alpha	大写英文字母：A， B， C

无序列表：

属性值	说明
disc	实现圆
circle	空心圆
square	正方形

③ 去除列表项符号

语法： list-style-type：none

作用：用这句话去除有序列表和无序列表的列表项符号

6.2 列表项图片

① list-style-image: url(图片路径)

② 使用图片来代替列表项符号

七.表格样式

7.1 表格标题位置

① caption-side作用：定义表格标题的位置

② 语法： caption-side:取值

③ 取值：top（标题在顶部） bottom（标题在底部）

7.2 表格边框合并

① border-collapse: 去除单元格之间的空隙，将两条边框合并为一条

② 语法：border-collapse: 取值

③ 取值：separate(边框分开，有空隙) collapse(边框合并，无空隙)

7.3 表格边框间距

① border-spacing: 定义表格边框间距

② 语法：border-spacing：像素值

八.图片样式

8.1 图片大小

① 改变图片大小

② 语法 width:像素值 height:像素值

8.2 图片边框

① 语法：border: 1px solid red;

8.3 图片对齐

① text-align:定义图片的水平对齐方式

语法： text-align：取值
取值：left (左对齐) center(居中对齐) right(右对齐)
场景：文本水平对齐和图片水平对齐
注意：在图片的父元素中定义，不是在img中定义的

② vertical-align : 定义图片的垂直对齐方式

语法：vertical-align:取值
取值：top(顶部对齐) middle(中部对齐) baseline（基线对齐） bottom(底部对齐)

8.4 文字环绕：float

① 作用：使用float 实现文字环绕图片的效果

② 属性：float:取值

③ 取值： left(元素向左浮动) right(元素向右浮动)

九. 背景样式

背景图片样式属性

属性	说明
background-image	定义背景图片地址
background-repeat	定义背景图片重复
background-position	定义背景图片位置
background-attachment	定义背景图片固定

9.1 background-color

① 作用：定义元素的背景颜色

② 语法：background-color：颜色值

③ 颜色值有两种，一种是"关键字"（颜色的英文名称，red, green, blue），一种是"十六进制RGB值"

9.2 background-image

① 作用：为元素定义背景图片

② 语法： background-image: url(图片路径)

③ 需要给元素定义宽和高，背景图片才会显示

④ 图片引入方式, 下面两种都可以

background-image: url("img/haizei.png")
background-image: url(img/haizei.png)

9.3 backgroung-repeat

① 作用：定义背景图片的重复方式

② 语法：background-repeat: 取值

③ 取值：

属性值	说明
repeat	在水平方向和垂直方向上同时平铺(默认值)
repeat-x	只在水平方向（x轴）上平铺
repeat-y	只在垂直方向（y轴）上平铺
no-repeat	不平铺

9.4 background-position

① 作用：用来定义背景图片位置

② 语法：background-position：像素值（关键字）

③ 取值

取值为像素值
background-position：水平距离垂直距离
水平距离和垂直距离这两个数值要用空格隔开，两者取值都是像素值
取值为关键字
取值为关键字的时候，也要同时设置水平方向和垂直方向的值

top left （左上）	top center(靠上居中)	top right（右上）
left center（靠左居中）	center center（正中）	right center（靠右居中）
bottom left （左下）	bottom center（靠下居中）	bottom right（右下）

9.5 background-attachment

① 定义背景图片是随元素一起滚动还是固定不动的

② background-attachment:取值

③ 属性取值

scroll: 随元素一起滚动（默认值）
fixed: 固定不动

十.超链接样式

10.1 超链接伪类

① 作用：定义超链接在鼠标单击的不同时期的样式

② 语法：这4种样式的定义顺序不能改变

a:link {...} 定义a元素未访问时的样式

a:visited {...} 定义a元素访问后的样式

a:hover {...} 定义鼠标经过a元素时的样式

a:active {...} 定义单击激活时的样式

③ 实际开发中，只会用到两种状态：未访问时状态和鼠标经过状态

a{...} 未访问状态，直接针对a元素定义就可以了

a:hover{...}

10.2 hover

① hover：可以定义任何一个元素在鼠标经过时的样式

10.3 鼠标样式

① cursor: 取值

② 用来定义鼠标样式

③ 在书里面208页可以看到各种鼠标样式，使用的时候自查

④ 自定义鼠标样式

cursor:url(图片地址)，属性值
这个图片地址是鼠标图片地址，后缀名为.cur
属性值一般只会用到三个：default pointer text

十一. 盒子模型

11.1 盒子模型

① 盒子模型概念

盒子模型是由4个属性组成的：content(内容) padding(内边距) margin(外边距) border(边框)，还有宽度（width）和高度（height）两大辅助属性
所有的元素都可以看成一个盒子
盒子模型组成

属性	说明
content	内容，可以是文本或图片
padding	内边距，用于定义内容与边框之间的距离
margin	外边距，用于定义当前元素与其他元素之间的距离
border	边框，用于定义元素的边框