css简介

1.CSS的概述

CSS ：Cascading Style Sheet 层叠样式表

CSS 作用就是给HTML页面标签添加各种样式

为什么用CSS？

1）HTML的缺陷：

　　1. 不能够适应多种设备

　　2. 要求浏览器必须智能化足够庞大

　　3. 数据和显示没有分开

　　4. 功能不够强大

2）CSS 优点：

　　1.使数据和显示分开

　　2.降低网络流量

　　3.使整个网站视觉效果一致

　　4.使开发效率提高了

HTML，CSS与JavaScript的关系：

1）HTML用于排版，处理逻辑

2）CSS用于美化，处理修饰

3）JavaScript用于动态，处理动画

注意：用开发工具创建的HTML，CSS与JavaScrip文件都是HTML文件

2.CSS和HTML结合的方式

CSS代码理论上位置是任意的，但通常写在style标签里

CSS和HTML的结合方式有3种：

　　方式一：行级样式表:采用html标签的style属性,范围只针对此标签适用

　　方式二：内嵌样式表:采用<style>标签完成。范围针对此页面

　　方式三：外部样式表: 采用建立样式表文件。针对多个页面.

引入样式表文件的方式:

1):采用<link>标签

　　eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

2):采用import，必须写在<style>标签中，并且必须是第一句

　　eg: @import url(a.css) ;

两种引入方式的区别：

　　外部样式表中不能写<link>标签,但是可以写import语句

2.1.方式一：使用html标签的style属性

方式一：行级样式表:采用html标签的style属性,范围只针对此标签适用

语法格式：<标签名称 style="key : value ; "> 内容 </标签名称>

属性与值之间用：隔开，不同属性用；隔开，同一属性的多个值之间用空格隔开；属性名和冒号之间最好不要有空格；

注意：此标签在<body>内

缺点：

1、html代码和css代码仍然耦合在一起,样式过多，难以维护

2、冗余代码过多，所以测试代码时经常用，实际开发中使用较少

演示：

<head>

<title>html与css的结合方式一</title>

</head>

<body>

<div style="color: red ; border: 1px solid red;">这是div1</div>

<span style="color: red;border: 1px solid red;">这是span1</span>

</body>

2.2.方式二：在head标签使用style标签设置

方式二：内嵌样式表:采用<style>标签完成。范围针对此页面适用

语法格式：

<style>

　　标签名称｛

　　　　key：value；

　　｝

</style>

注意：若多个标签名称之间用，隔开；且此标签在<head>内同一页面内，设置多个标签拥有的共同页面效果

优点：数据在body标签内，修饰在head标签内. 层次分明，显示清晰.

缺点：只能在本页面使用，无法提高多页面样式的复用性

演示：

<head>

<title>html与css的结合方式二</title>

　　　　div,span {

　　　　　　color: yellow;

　　　　　　border: 1px solid blue;

　　　　}

　　</style>

</head>

<body>

<div>这是div1</div>

<span>这是span1</span>

</body>

2.3.方式三：外部引入方式

方式三：外部样式表: 采用建立样式表文件。针对多个页面适用.

引入样式表文件的方式:

1):采用import，必须写在<style>标签中，并且必须是第一句

　　eg: @import url("a.css") ;

2):采用<link>标签

　　eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

两种引入方式的区别：外部文件中不能写<link>标签,但是可以写import语句

因为定义效果的代码都在外部文件中，任何页面想使用这种页面效果都可以引入此外部文件

2.3.1.采用@import，必须写在<style>标签中且必须是第一句

语法格式：

　　@import url("css文件的地址");

</style>

演示：

<head>

<title>html与css的结合方式三</title>

　　/* 方式1：

　　　　@IMPORT url("div.css");

　　　　@IMPORT url("span.css");

　　/* 方式2：

　　　　@IMPORT url("all.css");

　　</style>

</head>

<body>

<div>这是div1</div>

<span>这是span1</span>

</body>

外部文件：

div.css

div{

　　color: yellow;

　　border: 1px solid blue;

}

span.css

span{

　　color: yellow;

　　border: 1px solid blue;

}

all.css

@IMPORT url("div.css");

@IMPORT url("span.css");

2.3.2.采用<link>标签

语法格式：

<link rel="stylesheet" type="text/css" href="css文件路径" />

演示：

<head>

<title>html与css的结合方式三</title>

　　<link rel="stylesheet" type="text/css" href="all.css"> //此处演示使用的外部文件是all.css

</head>

<body>

<div>这是div1</div>

<span>这是span1</span>

</body>

2.4.三种结合方式的对比

适用范围：

方式一：行级样式表，范围只针对此标签适用.

方式二：内嵌样式表，范围针对此页面适用.

方式三：外部样式表，针对多个页面适用.

所以我们测试一般使用前两种方式，实际开发中使用方式三；

书写位置：

方式一书写在<body>内，方式二和方式三书写在<head>内；

3.css选择器

作用：就是通过css代码选择要添加效果的html中的标签

选择器主要分为两大类:

1.基本选择器

1) 标签选择器: 指的就是选择器的名字代表html页面上的标签

　　　　color:red ;

　　　　border:1px dashed green;

　　}

2) id选择器：规定用 # 来定义

　　#one{

　　　　cursor:hand;

　　}

3) class选择器：规定用圆点 . 来定义

　　.one{

　　 }

区别：标签选择器针对的是页面上的一类标签.

　　类选择器可以供多种标签使用.

　　ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。

4) 通用选择器：用 * 定义,代表页面上的所有标签。

　　　　font-size:30px;

　　　　margin-left:0px;

　　　　margin-top:0px;

　　}

2.扩展选择器

5) 组合选择器:采用逗号隔开

　　p,h1,h2,.one,#two{color:red ; }

6) 关联选择器(后代选择器): 采用空格隔开

　　h4 span i{color:red ; }

　　表示h4标签中的span标签中的i标签的样式

　　h4和span和i标签不一定是紧挨着的。

7) 伪类选择器

(1) 静态伪类：规定是用:来定义.只有两个.只能用于超链接.

　　 :link表示超链接点击之前的颜色

　　 :visited表示链接点击之后的颜色

　　eg: a:link{color:red ;}

　　 a:visited{color:yellow;}

　　注意： a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)

　　　 a{}定义的样式针对所有的超链接(包括锚)

(2) 动态伪类 : 针对所有的标签都适用

　　　:hover : 是移动到某个标签上的时候

　　　:focus : 是某个标签获得焦点的时候

　　　:active : 点击某个标签没有放松鼠标时

　　eg: label:hover{color:#00ff00; }

　　　　input:focus{

　　　　　　border:1px solid red;

　　　　}

　　　　a:active{

　　　　　　color:blue;

　　　}

3.1.标签选择器

语法格式：

标签名称｛

　　css代码；

｝

多个标签需要用，隔开；

注意：使用标签选择器，本页面内此类标签的所有代码会全部操作；

需求：

<head>

　　/* 需求. 取消input标签的默认边框 */

　　input {

　　　　border : none;

　　}

</style>

</head>

<body>

　　用户名: <input type="text"/>

　　<hr/>

　　　　<tr>

　　　　</tr>

　　</table>

</body>

3.2.id选择器

语法格式：

#id属性值｛

　　css代码；

｝

使用：给需要操作的标签一个id属性；

注意：id值在此页面内必须是唯一的；

演示：

<head>

<title>id选择器</title>

　　/*需求：将id="i001"的input标签背景变为xx。 */

　　　#i001 {

　　 }

</style>

</head>

<body>

　　<tr>

　　</tr>

　　 <tr>

　　</tr>

</table>

</body>

3.3.class选择器

语法格式：

.Class属性值｛

　　css代码；

｝

使用：给需要操作的标签一个class属性；

注意：class值可以在多个标签中是相同的，操作的是同一个class属性值的多个标签；

<head>

<title>model.html</title>

　　/* 需求1、表格的奇数行背景为红色,偶数行为蓝色 */

　　.odd {

　 }

　　.even {

　　 }

</style>

</head>

<body>

　　</tr>

　　 </tr>

　　 </tr>

　　</tr>

</table>

</body>

3.4.组合选择器

4) 组合选择器:采用逗号隔开

　　p,h1,.one,#two{color:red ; }

相当于上面三种方式中任意几种方式组合起来，中间需要用逗号隔开；

语法格式：

标签名，.class属性值,#id属性值{

　　css代码

}

<html>

<head>

<title>组合选择器</title>

　　/* 需求1. 选择id=div1的div，class=xx的span，所有p 背景颜色为黄色 */

　　#div1,.span1,p {

　　}

　　</style>

</head>

<body>

　<div id="div1">div的数据1</div>

　　<div>div的数据2</div>

　　<div>div的数据3</div>

　　<span class="span1">span的数据1</span>

　　<span>span的数据2</span>

　　<span class="span1">span的数据3</span>

</body>

</html>

3.5.关联选择器

5) 关联选择器(后代选择器): 采用空格隔开

　　eg: h4 span i{color:red；}

　　表示h4标签中的span标签中的i标签的样式

　　h4和span和i标签不一定是紧挨着的。

　相当于操作嵌套标签中的某个内部标签；

语法格式：

标签名后代标签名｛

　　css代码；

｝

<html>

<head>

<title>关联选择器</title>

　　/* 需求：将div内所有的p 字体颜色变成蓝色。 */

　　div p {

　　　　color : blue;

　　}

</style>

</head>

<body>

<div>

　　AAAA BBB

　　 CCCC

</div>

</body>

</html>

3.6.伪元素选择器

6) 伪类选择器

(1) : 静态伪类：规定是用 : 来定义.只有两个.只能用于超链接.

:link表示超链接点击之前的颜色

:visited表示链接点击之后的颜色

　　eg: a:link{color:red ;}

　　 a:visited{color:yellow;}

　注意： a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)

a{}定义的样式针对所有的超链接(包括锚)

(2) : 动态伪类 : 针对所有的标签都适用

:hover : 是移动到某个标签上的时候

:focus : 是某个标签获得焦点的时候

:active : 点击某个标签没有放松鼠标时

eg: label:hover{color:#00ff00; }

input:focus{

　　border:1px solid red;

}

a:active{

　　color:blue;

}

演示超链接案例：

语法格式：

选中的标签名：伪元素名称 {

　　css代码

}

伪元素名称：

：link 某个html标签未被点击之前的状态

：visible 鼠标点击之后，松开了

：hover 鼠标悬浮式

：active 鼠标点击，但没有松开

注意：上述4个伪元素是由先后顺序的。L V H A，如果顺序乱了可能会出现不一样的效果；

需求：超链接未点击背景红色，悬浮时背景为绿色，点击未松开背景为蓝色，鼠标点击之后为黄色

<html>

<head>

　　/* 超链接未点击字体红色，悬浮时字体为绿色，点击未松开字体为蓝色，鼠标点击之后为黄色 */

　　a:link {color: red} /* 超链接未被点击的状态样式 */

　　a:visited {color: yellow} /* 点击之后的状态样式 */

　　a:hover {color: green} /* 鼠标悬浮在超链接上的状态样式 */

　　a:active {color: blue} /* 鼠标点击超链接,但未松开 */

</style>

</head>

<body>

</body>

</html>

4.边框(盒子模型)

需求1、先创建一个div，他的内部也创建一个div，同时设置边框

需求2、外层div背景色蓝色，内部div背景色为绿色

需求3、设置内部div的外边距10px，内边距为50px

<html>

<head>

<title>model.html</title>

　　 #myimg {

　　 padding : 20px;

}

　　/* 需求1、先创建一个div，他的内部也创建一个div，同时设置边框 */

　　/* 需求2、外层div背景色蓝色，内部div背景色为绿色 */

　　/* 需求3、设置内部div的外边距10px，内边距为50px */

　　#outer{

　　　　border : 1px solid red;

　　　　height : 400px;

}

　　#inner{

　　　　border : 1px solid blue;

　　　　height : 200px;

　　　　margin: 10px;

　　　　padding: 20px;

　　}

</style>

</head>

<body>

<hr/>

</div>

</body>

</html>

扩展需求: 3个div

注意:相同的属性效果可以用class选择器封装在一起，不同的属性效果可以用id选择器分别封装；

<html>

<head>

<title>model.html</title>

.divClass {

　　 border : 1px solid red;

　　 width : 900px;

　　 margin: 10px;

　　 margin-left: auto;

　　 margin-right: auto;

}

#div1{

　　 height: 100px;

}

#div2{

　　height: 400px;

}

#div3{

　　 height: 100px;

}

</style>

</head>

<body>

</body>

</html>