二、Flask学习之CSS-编程知识

二、Flask学习之CSS

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>

效果：