CSS简介

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

CSS与html的结合方式

（1）在每个html标签上面都有一个属性style，把css和html结合在一起

<div style="background-color:pink;color:green;">西安欧亚学院</div>

运行结果

（2）使用html的一个标签实现<style>标签，现在head里面

格式：

<style type="text/css">

css代码；

</style>

<meta charset="UTF-8">

<style type="text/css">

div{

background-color:blue;

color:red;

}

运行结果

（3）在style标签里面使用语句

@import url（css文件路径）；

-第一步，创建一个css文件

div{

background-color:black;

color:yellow;

}

-第二步，在头文件中使用

<head>

<style type="text/css">

@import url(div.css)

</style>

</head>

运行结果

（4）使用头标签link，引入外部css文件

- 格式：

-第一步，创建一个css文件

div{

background-color:gray;

color:yellow;

}

-第二步，在头文件中使用

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

</head>

运行结果

注意：第三种结合方式有一些浏览器下不起作用，一般使用第四种方式！

CSS样式优先级和代码规范

*样式优先级

由上到下，由内到外。优先级由低到高。

一般情况下，后加载的优先级高

*代码规范

选择器名称{ 属性名:属性值; 属性名:属性值;......}

-属性与属性直接用封号隔开

-属性与属性名直接用冒号连接

-如果一个属性有多个值的话，那么多个值用空格隔开

CSS的基本选择器

（1）标签选择器

div{

background-color:gray;

color:yellow;

}

（2）class选择器

*每个html标签都有一个属性 class

-<div class="类名"> 进行操作的数据</div>

<html>

<head>

<title>Insert title here</title>

<style type="text/css">

div.haha{

background-color:yellow;

}

p.haha{

background-color:red;

}

</style>

</head>

<body>

<div class="haha">西安欧亚学院</div>

<p class="haha">物联网工程1701</p>

</body>

</html>

运行结果

（3）id选择器

*每个html标签上面都有一个属性标签 id

- <div id="hehe">hehehehe</div>

<html>

<head>

<title>Insert title here</title>

<style type="text/css">

#hehe{

background-color:gray;

}

</style>

</head>

<body>

<div id="hehe">物联网工程</div>

<p id="hehe">物联网工程1701班</div>

</body>

</html>