1.CSS在HTML中的三种表示方法
1.1 直接在标签中添加
<div>
<span style="color: orange">
欢迎光临
</span>
</div>
1.2 在头部添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getNews</title>
<style>
.name1{
color: orange;
}
</style>
</head>
<body>
<h1>欢迎访问本系统</h1>
<div>
<span class="name1">
欢迎光临
</span>
</div>
</body>
</html>
1.3 单独在文件添加
mycss.css
.name1{
color: orange;
}
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getNews</title>
<link rel="stylesheet" href="/mycss.css">
</head>
<body>
<h1>欢迎访问本系统</h1>
<div>
<span class="name1">
欢迎光临
</span>
</div>
</body>
</html>
上面三种表示的结果是一样的。
2.CSS选择器
CSS有多种选择器：
-
ID选择器（使用#）
-
类选择器（使用.）
-
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
#name1{
color: orange;
}
.name2{
color: blue;
}
li{
color: purple;
}
</style>
</head>
<body>
<h1 class="name2">panda</h1>
<h2 id="name1">panda</h2>
<ul>
<li>panda</li>
<li>panda</li>
<li>panda</li>
</ul>
</body>
</html>
效果：
- 属性选择器
- 后代选择器
3.CSS样式
3.1高度和宽度
- 宽度是可以支持百分比的
<div>等块级标签默认是有效的<span>等行内标签默认无效
<style>
.name1{
height: 500px;
width: 300px;
}
</style>
3.2块级标签和行内标签
使用CSS样式displsy:inline-block可以使标签既有块级标签的特性又有行内标签的特性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
.name1{
display:inline-block;
height: 100px;
width: 300px;
border: 1px pink;
color: deeppink;
}
</style>
</head>
<body>
<span class="name1">panda</span>
</body>
</html>
3.3字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
.name1{
font-size: 100px;
font-weight: 300;
font-family: "Microsoft YaHei UI";
}
</style>
</head>
<body>
<span class="name1">panda</span>
</body>
</html>
CSS可以设置字体样式：font-size用于设置字体大小，font-weight用于设置字体的粗细，font-family用于设置字体样式
3.4对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
.name1{
height: 80px;
text-align: center;/*水平方向居中*/
line-height: 80px;/*垂直方向居中*/
/*垂直方向居中时候注意：一定要是一行，不然没办法垂直居中*/
}
</style>
</head>
<body>
<div class="name1">panda</div>
</body>
</html>
效果：
3.5浮动
行内标签的浮动，默认是在左侧，可以设置float参数放到右侧：
<span style="float: right">panda</span>
<div>标签的浮动有些特殊，需要在最后加上：<div style="clear: both"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
.name1{
float: left;
border: 3px solid rebeccapurple;
height: 200px;
width: 200px;
font-size: 50px;
}
</style>
</head>
<body>
<div style="background-color: orange">
<div class="name1">panda</div>
<div class="name1">panda</div>
<div class="name1">panda</div>
<div style="clear: both"></div>
</div>
</body>
</html>
3.6边距
-
内边距
内边距是指距离自己的边框的距离，有上下左右四种：
写法一：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <style> .name1{ height: 300px; width: 200px; border: 2px solid orange; padding-top: 30px; padding-left: 20px; padding-right: 20px; padding-bottom: 30px; color: pink; } </style> </head> <body> <div class="name1">panda panda</div> </body> </html>写法二：
padding: 30px 20px 30px 20px;padding的后面的顺序是上右下左，按照顺时针的顺序。结果：
-
外边距
外边距是指距离其他边框的距离：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <style> .name1{ height: 300px; width: 200px; border: 2px solid orange; padding: 30px 20px 30px 20px; color: pink; } .name2{ background-color: pink; height: 30px; width: 500px; margin-top: 20px; margin-left: 30px; margin-right: 30px; margin-bottom: 20px; } </style> </head> <body> <div class="name1">panda panda</div> <div class="name2"></div> </body> </html>效果：
