CSS

1 CSS入门

1.1定义

CSS（Cascading Style Sheet 层叠样式表）简称，样式。

主要负责网页的美观。

1.2css的使用方式

1）行内样式

注意：

1）使用标签的style属性进行css控制，css写在style属性值中

2）弊端：只能控制一个标签的样式

2）内部样式

注意：

1）使用style的标签进行css控制，css内容写在style标签体内

2）一次控制多个标签的样式

3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用

font-size:24px;

color:#0F0;

}

</style>

3）外部样式（推荐使用）

注意：

1）建立独立后缀为css的文件，css内容写在该文件中

2）在使用css的html页面中，导入外部css文件

<!-- 导入外部css文件

href : 表示外部css文件的位置

rel: 表示关联的是样式表

-->

2 CSS语法

font-size:24px;

color:#F00;

}

选择器（selector）：使用选择器来选择需要添加样式的标签。

CSS属性（property）：给选择的标签添加什么样式。例如，字体大小，颜色，背景.....

CSS值（value）：添加样式的具体值。12px , 红色，背景图片....

2.1 选择器

标签选择器

作用：选择同名的标签

div{

font-size:24px;

color:#F00;

}

注意：

1）选择到所有同名的标签

类选择器

作用：选择同类的标签

/*类选择器*/

.c1{

font-size:24px;

color:#F00;

}

注意：

1）选择的标签必须有class的属性。同类的标签使用同名

2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！

id选择器

作用：选择一个标签

#d1{

font-size:24px;

color:#0F0;

}

注意：

1）选择的标签必须有id属性。

2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById("id属性值")

3）id选择器的优先级最高！

并集选择器

/*并集选择器*/

.c1,#d1{

font-size:24px;

color:#0F0;

}

作用：当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。

交集选择器

/*交集选择器

div里面的span标签

.c1 span{

font-size:24px;

color:#0F0;

}

作用：选择某个选择器中的子标签。

通用选择器

/*通用选择器*/

font-size:24px;

color:#0F0;

}

作用；选择所有的标签

伪类选择器

作用：控制标签在不同状态下的样式。

标签有四种状态：

link: 没有访问过的状态

hover: 鼠标经过的状态

active:鼠标激活（按下但没有松开）的状态

visited: 已经被访问过的状态（鼠标点下且松开）

/*使用link伪类控制--没有访问过的状态*/

a:link{

font-size:24px;

color:#F00;

}

/*使用visited伪类控制--已经被访问过的状态（鼠标点下且松开）*/

a:visited{

font-size:24px;

color:#CCC;

text-decoration:none;

}

/*使用hover伪类控制-鼠标经过的状态*/

a:hover{

font-size:24px;

color:#00F;

text-decoration:none;

}

/*使用active伪类控制--鼠标激活（按下但没有松开）的状态*/

a:active{

font-size:24px;

color:#0F0;

text-decoration:underline;

}

/*注意：

1）在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有

效的。

正确顺序： link visited hover active

</style>

</head>

<body>

</body>

</html>

2.2 常用的CSS属性和值

CSS文本

<head>

<title>css文本</title>

body{

/*color：颜色*/

color:#F00;

/*字符间距*/

letter-spacing:10px;

/*对齐方式*/

text-align:center;

/*文本修饰下划线-underline，中划线(line-through) 上划线-overline 没有:none*/

text-decoration:line-through;

/*单词间距*/

word-spacing:30px;

}

</style>

</head>

<body>

今天天气不错！

</body>

</html>

CSS字体

<head>

<title>css字体</title>

body{

/*字体类型

注意：这里的字体类型是读取系统的默认字体库，尽量使用通用的字体，如果你设置的字体，用户的系统上没有，就是使用默认的宋体显示。

font-family:"宋体";

/*字体大小*/

font-size:24px;

/*字体样式: 正(normal默认) 斜(italic)*/

font-style:italic;

/*字体粗细 bold 加粗*/

font-weight:bold;

/* font: 简写属性必须包括大小与字体属性不然无法显示*/

font:italic bold 36px "黑体";

}

</style>

</head>

<body>

百度云盘

</body>

</html>

CSS背景

<head>

<title>css背景</title>

body{

/*背景颜色*/

/*背景图片*/

background-image:url(../05.%E7%B4%A0%E6%9D%90/mm.jpg);

/*设置背景图片是否重复，或如何重复

not-repeat: 不重复

repeat-x: x轴重复

repeat-y: y轴重复

repeat: x和y轴重复(默认)

background-repeat:no-repeat;

/*设置背景的起始位置*/

background-position:top center;

/*简写属性*/

background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center;

}

</style>

</head>

<body>

</body>

</html>

CSS列表

ul{

/*列表符号类型*/

list-style-type:none;

/*设置列表符号的图片*/

list-style-image:url(../05.%E7%B4%A0%E6%9D%90/start.jpg);

}

CSS表格

table{

/*合并表格的边框*/

border-collapse:collapse;

}

CSS边框

div{

/*边框颜色*/

/*简写属性

1) 默认设置方向属性：上右下左

2）如果当前方向没有设置颜色，那么取对面的颜色

border-color:#F00;

border-left-color:#F00;

border-right-color:#0F0;

border-top-color:#00F;

border-bottom-color:#C90;

/*边框宽度*/

/*简写属性

border-10px;

border-left-10px;

border-right-20px;

border-top-30px;

border-bottom-40px;

/*边框样式(注意：边框只有加了border-style才会显示出来)

solid: 单实线

dashed:虚线

dotted: 点

double: 双实线

/*简写属性*/

border-style:solid;

border-left-style:solid;

border-right-style:dashed;

border-top-style:dotted;

border-bottom-style:double;

/*所有边框属性的简写属性*/

border:2px solid #F00;

}

3 盒子模型

3.1 定义

可以把html页面上每个标签看做是一个盒子。

盒子相关的属性：

宽度和高度（width和height）：决定这个盒子的容量

内边距（padding）：盒子边框与内容的距离

边框（border）：盒子的厚度

外边距（margin）：盒子与盒子之间的距离

4 CSS定位

5 DIV块元素

div 标签是用来为HTML文档内大块内容提供结构和背景的元素.div 可定义文档中的分区或节(division/section)。div标签可以把文档分割为独立的、不同的部分。

CSS是层叠样式表（Cascading Style Sheets）用来定义网页的实现效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

简单理解:div+css

div 是存放内容(文字,图片,元素)的容器.

Css是用于指定存放在div中的内容如何显示的样式。

行内元素

• span

块元素

• div

布局

• table

• div