CSS简介
- css:层叠样式表(将页面显示效果更美观)
层叠:一层接一层
样式:很多的属性和属性值
css将网页内容和显示样式进行分离,提高了显示功能
css和html的结合方式(四种结合方式)
1.在每个html标签上都加一个属性style,将html和css结合在一起
<h3 style="background: lightblue;">你好!</h3>
2.使用html的一个标签实现< style>,写在head标签中
<head>
<style type="text/css">
</head>
3.在style标签里面使用语句@import url(css文件的路径);
第一步:创建一个css文件,在里面写入要使用的css标签
第二步:在html文件中使用css文件中使用到的标签
(某些浏览器不可用,不推荐)
<head>
<style>
@import url(div.css);
</style>
</head>
<body>
<div>hello world!</div>
4.使用头标签link,引入外部css文件
第一步先创建css文件
第二步在html文件头标签中使用语句< link rel="stylesheet" type="text/css" href="css文件路径" >
优先级:由上到下,由内到外,优先级由低到高,后加载的优先级高
css选择器:对具体标签里面的数据进行操作
-
三个基本选择器:
1.标签选择器:使用标签名作为选择器的名称
2.class选择器:每个html标签都有一个属性class,在头标签中设置内容样式时,要用.符号设置相关样式
3.id选择器:每个html标签上都有一个属性id,在头标签中设置内容样式时,要用#符号设置相关样式
***优先级:style标签>id选择器>class选择器>标签选择器***
-
css的扩展选择器
(1)关联选择器
设置标签内的标签的样式,嵌套标签内部的样式
(2)组合选择器
将不同标签设置成相同的样式
(3)伪元素选择器
css里面提供了一些定义好的样式:原始状态link;鼠标放上的状态hover;点击之后的状态visited;点击active
点击时:
点击之后: