css样式,是专门用来“美化”标签的。
1.快速了解css
<img src="..." style="height:100px" />
<div style="color:red">hello</div>
这里的style="height:100px"和style="color:red"就是css
2.css通用方式
2.1在标签上
<img src="..." style="height:100px" />
<div style="color:red">hello</div>
2.2在head里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登陆</title>
<style>
.c1{
color=red;
}
</style>
</head>
<body>
<h1 class='c1'>登陆</h1>
<h1 class='c1'>登陆</h1>
<h1 class='c1'>登陆</h1>
</body>
</html>
2.3在文件里
common.css
.c1{
height:100px;
}
.c2{
color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登陆</title>
<link rel="styleheet" href="common.css" />
</head>
<body>
<h1 class='c1'>登陆</h1>
<h1 class='c1'>登陆</h1>
<h1 class='c1'>登陆</h1>
</body>
</html>
适用于多个文件都需要这个样式的情形
.css文件可以和引用的图片一样放在static目录下
案例:flask中的应用
登陆界面:将css写在head里
注册界面:将css写在.css文件里
问题:使用Flask框架开发不方便
每次都需要重启
规定有些文件必须放在特定的文件夹
新创建一个界面,需要重新写一个
函数
HTML文件
PyCharm提供了一个非常便捷的开发前端的工具
如果想要实时观察页面的改变,就打开设置,如下图所示修改:
这样,预览界面就会随着html文件的改变而改变。
3.CSS选择性
3.1类选择器
.c1{
}
<div class="c1"></div>
3.2ID选择器
#c1{
}
<div id="c1"></div>
3.3标签选择器
li{
}
<li>xxx</li>
div{
}
<div>xxx<div>
3.4属性选择器
input[type='text']{
border: 1px solid red;
}
.v1[xx='456']{
color:gold;
}
<input type="text">
<input type="password">
<div class="v1" xx="123">a</div>
<div class="v1" xx="789">b</div>
<div class="v1" xx="456">c</div>
3.5后代选择器
.yy li{
color: pink;
}
.yy > a{
color: orange;
}
什么都不加,表示到类名为yy的类里去找他的所有后代;而添加尖括号,则表示仅仅到yy类的儿子里去找。
<div class="yy">
<a href="https://www.baidu.com">百度</a>
<div>
<a href="https://www.sogou.com">搜狗</a>
</div>
<ul>
<li>city</li>
<li>country</li>
<li>world</li>
</ul>
</div>
关于选择器:
使用的多:类选择器,标签选择器,后代选择器
使用的少:ID选择器,属性选择器
3.6使用多个选择器时
.c3{
color:blue;
border: 1px solid red;
}
.c4{
color:green;
font-size: 28px;
}
<!--使用多个样式时,重复的样式会被后定义的样式所覆盖,类似于就近原则-->
<div class="c3 c4">
<ul>
<li>abc</li>
<li>def</li>
<li>ghj</li>
</ul>
</div>
如果不想被后面定义的样式所覆盖,css样式可以这样定义:
.c3{
color:blue !important;
border: 1px solid red;
}
4.CSS的样式
4.1高度和宽度
.c1{
height: 300px;
width: 50%;
}
宽度支持百分比,而高度不支持,因为页面可以无限长。
对行内标签而言,高度和宽度的设置是无效的
对块级标签而言,默认情况下是有效的
4.2块级和行内标签
display:inline-block使标签同时具有块级和行内标签的特性
.c2{
display: inline-block;
height: 100px;
width: 300px;
border: 1px solid red;
}
<!--块级和行内标签-->
<div>
<span class="c2">chinese</span>
<span class="c2">chinese</span>
<span class="c2">chinese</span>
</div>
效果如下:
块级变行内标签,行内标签变为块级标签
<div style="display: inline">中国</div>
<span class="c2" style="display: block">外国</span>
4.3字体颜色、大小、加粗、字体格式
.c3{
color: gold;
font-size: 20px;
font-weight: 100;
font-family: "Apple Color Emoji", serif;
}
4.4浮动
float:left\right
.c4{
float:left;
width: 200px;
height: 150px;
border: 1px solid red;
}
<!--浮动-->
<div>
<span>左边</span>
<span style="float: right">右边</span>
</div>
<div style="background-color: lightblue">
<div class="c4"></div>
<div class="c4"></div>
<div class="c4"></div>
<!--如果不添加下面一行,就会脱离文档流-->
<div style="clear: both"></div>
</div>
4.5内边距
padding-left
padding-right
padding-top
padding-button
padding
.c5{
border: 1px solid red;
height: 400px;
width: 200px;
padding: 20px;
}
<!--内边距-->
<div class="c5">
<div style="background-color: gold">听妈妈的话</div>
<div>才是好孩子</div>
</div>
4.6外边距
margin
margin-left
margin-right
margin-top
margin-button
<!--外边距-->
<div style="background-color: gold; height:100px"></div>
<div style="background-color: lightblue; height:100px; margin: 20px"></div>
4.7区域居中
margin: 0 auto其中0表示无上边距,auto表示区域自动居中
.c6{
width: 500px;
background-color: pink;
height: 1000px;
margin: 0 auto;
}
<!--区域居中-->
<div class="c6"></div>