一、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>
2840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
