一.正文：CSS基础
注：本文代码微瑕 欢迎大家指正
1 体验CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*css注释*/
p{
color: aqua;
font-size: 30px;
background-color: rgb(255, 240, 240);
width:400px;
height:400px;
}
</style>
</head>
<body>
<p>p标签</p>
</body>
</html>2 CSS标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color:blueviolet;
}
</style>
</head>
<body>
<p>pppp</p>
<div>15676</div>
<p>12364684</p>
</body>
</html>3 CSS类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
color:red;
}
.size{
font-size: 60px;
}
</style>
</head>
<body>
<p>555</p>
<p class="red size" >888</p>
<div class="red">666</div>
</body>
</html>4 CSS的ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#blue{
color: blue;
}
</style>
</head>
<body>
<div id="blue">555</div>
</body>
</html>5 CSS字号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 30px;
}
</style>
</head>
<body>
<p>段落文字 </p>
</body>
</html>6 CSS倾斜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
font-style: italic;
}
em{
font-style: normal;
}
</style>
</head>
<body>
<div>555</div>
<em>666</em>
</body>
</html>7.CSS字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
/* 按照非衬线系列字体顺序 */
font-family: 微软雅黑， 黑体， sans-serif ;
}
</style>
</head>
<body>
<div>div标签</div>
<p>p标签</p>
</body>
</html>8.CSS文本缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
/* text-indent: 50px; */
/* 首行缩进两个字 */
text-indent: 2em;
font-size: 20px;
}
</style>
</head>
<body>
<p>一段文字 </p>
</body>
</html>9.CSS行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
text-indent: 2em;
/* 缩进 */
line-height: 2.5;
/* line-height: 50px; */
/* 66px 宋体 倾斜 加粗 行高2倍 */
font:italic 700 66px/2 宋体;
}
</style>
</head>
<body>
<p>一段文字 </p>
</body>
</html>10 CSS水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
文字
</div>
</body>
</html>二.结尾
对前端感兴趣的小伙伴 可以参考
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
