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>
效果:文章来源:https://www.toymoban.com/news/detail-807232.html
文章来源地址https://www.toymoban.com/news/detail-807232.html
到了这里,关于二、Flask学习之CSS的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!