一、CSS简介
1.什么是css
重叠样式表
主要是负责标签的样式 美化页面
一个网页分三大部分
结构层: 主要由html负责 负责页面的结构
表现层: 主要由css负责 页面的展示样式 美化页面
行为层: 主要由js负责 负责页面和用户的交互效果
Css是单独的一种文件类型 后
Css的三种引入方式后缀为.css的文件
2.css的三种引入方式
行间样式:给标签添加style属性 值就是你要设置的css样式
嵌入式:将css代码写在 head标签内的style标签内
外链式:在head标签内通过link标签的href属性引入外部css文件
一段代码来看三种方式的区别:<!–里面是注释的内容—>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css使用</title>
<!-- 嵌入式 将css嵌入到html代码中 -->
<style>
div{
width:200px;
height:200px;
background-color:gold;
}
</style>
<!-- 通过link引入外部的css文件 -->
<link rel="stylesheet" href="./css/2.css">
</head>
<body>
<!-- 行间样式 将css写在标签内的style属性 -->
<!-- <div style="width:100px;height:100px;background-color:green"></div> -->
<!-- <div></div> -->
<div></div>
</body>
</html>
3,css选择器:
这里只说最常用的三种选择器:id选择器,标签选择器,class选择器。
用来选取要设置的html标签
(1)标签选择器:通过标签名来查找元素
选择符: 标签名
影响范围最大 一般很少单独使用
(2)Id选择器:通过标签的id属性的值来获取元素
选择符: #
Id属性的值不能重复 ,一个id值在一个html文件中只能出现一次
影响范围最小
(3)Class选择器:通过元素的class属性的值 来获取元素
选择符: .
一个标签的class属性可以有多个值,
一个class属性的值可以被多个标签去使用
影响范围介于id选择器和标签选择器之间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css基本的三种中选择器</title>
<style>
/*标签选择器*/
div{
width:200px;
height:200px;
background-color:pink;
}
/*id选择器器*/
#item1{
width:100px;
height:100px;
background-color:pink;
}
/*class选择器*/
.box{
width:150px;
height:150px;
background-color:green;
}
.box1{
border:3px solid red;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div id="item1">2</div>
<div class="box">3</div>
</body>
</html>