CSS
CSS全称层叠样式表，网页的内容由HTML控制，网页的样式由CSS控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>/*style标签内部可以写css样式*/
/*这是style和css的注释方式，<!---->不行*/
/*选择器：作用是找到元素*/
h1{
color:red;/*颜色*/
font-size: 14px;/*大小*/
}
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
CSS语法
选择器{
属性名:属性值;
}
h1{
color:red;
font-size: 14px;
}
常用的CSS选择器
-
元素选择器：h1、p、img
-
类选择器：.类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.test{
color:red;
font-size: 14px;
}
</style>
</head>
<body>
<h1 class="test">hello world</h1>
</body>
</html>
- id选择器：#id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
#test{
color:red;
font-size: 14px;
}
</style>
</head>
<body>
<h1 id="test">hello world</h1>
</body>
</html>
规范：在id和类选择器都能用的情况下，尽量少用id选择器
- 通配符选择器：*
找到所有标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
*{
color:red;
font-size: 14px;
}
</style>
</head>
<body>
<h1>hello h1</h1>
<p>hello p</p>
<a href="">hello a</a>
</body>
</html>
CSS常用属性
- 字体大小：font-size
- 字体颜色：color
- 宽度：width
- 高度：height
- 背景色：background-color
- 文本水平对齐：text-align 水平居中：text-align:center
- 文本行高（默认垂直居中）：line-height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.test{
font-size: 16px;
color: white;
background-color: black;
text-align: center;
line-height: 20px;
}
img{
width: 300px;
height: auto;/*自适应等比例缩放，不写height也默认auto*/
}
</style>
</head>
<body>
<h1 class="test">hello keli</h1>
<img src="keli.jpg">
</body>
</html>
