CSS美化的优点:比HTML美化的功能更加强大，实现HTML不能实现的功能

一、CSS概述

Cascading Style Sheet 层叠样式表，专门用于网页的美化。

CSS美化的优点

功能上更强：比HTML美化的功能更加强大，可以实现HTML不能实现的功能

降低耦合度：分工更加明确，CSS专门用于美化，HTML专门用于结构搭建

CSS的编写规范

大括号：所有的样式都写在大括号内部。

样式名：全部字母小写，如果多个单词使用 -分割。

样式值：所有样式名样式值是固定的，名字和值之间使用冒号。

样式结尾：每个样式使用分号结尾。

注释：/* 注释 */ 类似于java中的多行注释。

二、CSS位置

2.1 行内样式

<div style="color: red"></div>

2.2 内部样式

<style type="text/css">

    p{

        color: red;

    }

</style>

2.3 外部样式

1. 引入方法一

<link type="text/css" rel="stylesheet" href="css/out.css"/>

type：指定文本的类型

rel：指定当前的HTML于CSS文件之间的关系

href：指定样式文件地址

2. 引入方法二

<style type="text/css">

    @import url("css/out.css")

</style>

3. 优先级

就近原则，后面的同名样式会覆盖前面的样式

三、基本选择器

用来选择要操作的元素或标签

3.1 语法格式

选择器{

    样式名：样式值;

}

3.2 三种基本选择器

选择器分类

作用

语法

细节

标签选择器

通过标签名选择同名的所有的标签

标签名{ }

类选择器

通过标签的class属性的值选择元素

.类名{ }

前提：先给标签进行分类 使用class属性分类、类名：不能以数字开头

ID选择器

通过属性ID选择元素

#ID{ }

前提：先给标签指定ID属性、唯一：ID在同个网页中唯一，不要重复

3.3 优先级

标签选择器 < 类选择器 < ID选择器

四、扩展选择器

1. 层级选择器

父选择器 子孙选择器 { } 

作用：选择父元素下所有的子孙元素

语法符号：空格

2. 属性选择器

- 标签名[属性名]

- 标签名[属性名="属性值"]

只要包含属性名就被选中

某个属性名=属性值的元素选中

语法符号：[ ]中括号

3. 伪类选择器

- 链接：

- a:link 正常状态

- a:visited 访问过的

- a:hover 鼠标悬停

- a:active 正在激活

- 文本框

- :focus 得到焦点

同一个元素在不同的操作状态下呈现不同的样式

文本框如果有光标在中间，表示得到焦点

语法符号：: 冒号

4. 并集选择器

- 格式：选择器1,选择器2

- 作用：多个选择器的集合

- 语法符号：,逗号

五、CSS属性

5.1 背景样式

1. 背景色

backgroup-color: ?

颜色常量，如：red

使用十六进制，如：#ABC

红绿蓝，使用RGP

2. 背景图片

backgroup-image: url(图片路径)

3. 平铺方式

background-repeat: ?

repeat：默认，背景图像在垂直和水平方向重复

repeat-x：背景图像在水平方向重复

repeat-y：背景图像在垂直方向重复

no-repeat：背景图像将只显示一次

4. 背景位置

background-position: ? ?

单位是像素

5.2 文本样式

1. 颜色

color

颜色常量

使用十六进制

使用rgp

2. 设置行高

line-height

单位是像素

3. 文字修饰

text-decoration

none：默认，标准的文本

underline：下划线

overline：上划线

4. 文本缩进

text-indent

用于缩进文本，可以使用em单位，表示缩进2个字符，无论字符的大小

5. 文本对齐

text-align

left：把文本排列到左边。默认值

right：把文本排列到右边

center：把文本排列到中间

5.3 字体样式

1. 字体名

font-family

2. 设置大小

font-size

单位：像素

3. 设置样式

font-style

italic：斜体

normal：默认值，标准样式

4. 设置粗细

font-weight

bolder：加粗

5.4 浮动和清除浮动

1. 浮动：float

left：元素向左浮动

right：元素向右浮动

2. 清除浮动：clear

left：在左侧不允许浮动元素

right：在右侧不允许浮动元素

both：在左右两侧不允许浮动元素

5.5 display属性

作用：控制元素的显示和隐藏

inline：设置元素为内联元素

block：设置元素为块级元素

none：设置元素不可见

5.6 盒子模型

1. 属性

width：宽度

height：高度

margin：外边距

padding：内边距

border：边框的属性

2. 边框属性

border-width：边框高度

length：自定义边框的宽度

border-style：边框线型

soild：定义实线

double：定义双线

dotted：定义点状边框

dashed：定义虚线

border-color：边框颜色

border-radius：边框圆角

3. 外边距设置四边值

margin:10px 四边外边距相同

margin:10px 20px 上下 左右

margin:10px 20px 30px 上 左右 下

margin:10px 20px 30px 40px 上 右 下 左(顺时针)

4. 每条语句设置一边值

外边距

margin-top:10px 上外边距

margin-left:10px 左外边距

margin-bottom:10px 下外边距

margin-right:10px 右外边距

内边距

padding-top:10px 上内边距

padding-left:10px 左内边距

padding-bottom:10px 下内边距

padding-right:10px 右内边距

块级元素居中

amrgin：auto;