1.什么是CSS
CSS(层叠样式表),用于控制页面的样式,简单地来说,CSS就是用来美化页面的一种语言。
2.基本语法规范
CSS的基本语法规范:CSS选择器+{1或多条声明}
其中CSS选择器决定找谁(针对哪个元素进行修改),声明决定干什么(具体如何修改),声明的属性是键值对
<style>
p {/* 针对所有p标签元素 */
color: blue; /* 设置字体颜色 */
font-size: 20px; /* 设置字体大小 */
}
</style>
3.CSS常见的选择器
3.1 标签选择器
标签选择器仅针对标签这个元素,常见的标签例如图片标签img,无语义标签div和span等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color:red;
}
</style>
</head>
<body>
<div>hello</div>
<div>world</div>
</body>
</html>
3.2 类选择器
类选择器通过针对指定类名的元素进行修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 通过 .+类名 构成类选择器 */
.font {
color:blue;
}
</style>
</head>
<body>
<!-- 通过class来定义类名属性 -->
<div class="font">hello</div>
<div class="font">world</div>
</body>
</html>
3.3 ID选择器
ID选择器通过针对指定ID的元素进行修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 通过 #+id 构成ID选择器 */
#div1 {
color:blue;
}
</style>
</head>
<body>
<div id="div1">hello</div>
<div id="div2">world</div>
</body>
</html>
3.4 通配符选择器
通配符选择器针对页面上所有元素进行修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
color: blue;
}
</style>
</head>
<body>
<div>hello</div>
<div>world</div>
</body>
</html>
3.5 复合选择器
复合选择器可以由多个单选择器组成,单选择器可以是上述的标签选择器,类选择器等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 指定修改xx元素中的xx(可以有多层,例如ul li p{...}) */
/* 复合选择器有两种不同形式,一种是elem1 elem2(elem2可以是elem1的子或孙元素)
另一种是elem1>elem2(elem2必须是elem1的子元素) */
div p {
color:blue;
}
</style>
</head>
<body>
<div><p>helloworld</p></div>
</body>
</html>
4.常见CSS
color:设置字体颜色
font-size:设置字体大小
border:边框
width/height:设置宽度和高度
padding:内边距,设置内容和边框之间的距离
注:只有块级元素可以设置宽高(width/height),块级元素独占一行,行级元素不独占一行,常见的块级元素有h1-h6,p,div等,常见的行级元素有a,span等,可以通过display: block将行级元素转换为块级元素
<style>
div {
color: red;
font-size: 32px;
border: 5px black solid;
width: 500px;
height: 300px;
margin: 5px;
padding: 5px;
}
</style>