css用于标签样式美化
3.1快速了解
<img src="...." style="height:100px"/>
<div style="color:red;">中国联通 </div>
3.2 css应用方式
- 在标签上应用
<img src="", style="height:100px"/>
<div style="color:red;">中国联通 </div>
- 在head标签上写style标签应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web开发之用户注册案例</title>
<style>
.c1{color:red;} /**. 与后续的class进行关联 **/
,c2{height:100px}
</style>
</head>
<body>
<h1 class ="c1">用户注册</h1>
<div class = "c2">用户名:<input type="text"/></div>
<div class = "c2">密码:<input type="password"/></div>
<div class = "c2">确认提交:<input type="submit" value="请提交"></div>
</body>
</html>
- 将样式写到文件中 [放到static目录下,创建sccsheet文件]
.c1{height:100px:}
.c2{color:red;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web开发之用户注册案例</title>
<link rel="stylesheet" href="common.css"> /**样式文件链接此处 **/
</head>
<body>
<h1 class ="c1">用户注册</h1>
<div class = "c2">用户名:<input type="text"/></div>
<div class = "c2">密码:<input type="password"/></div>
<div class = "c2">确认提交:<input type="submit" value="请提交"></div>
</body>
</html>
案例: flask的css案例,如上
备注: pycharm中的html文件,写完html可以直接点击右上角的浏览器进行调试。
3.3 选择器选择
1.类选择器: .c1 class [最常用]
.c1{}
<div class="c1"> </div>
2.id选择器: #c2 id
#c2{}
<div id="c2"> </div>
3.标签选择器: li/div/span ……[针对所有的相应标签都会增加相应的结果]
div{} /**关联body中所有的div标签 **/ <div >xxxx</div>
span{} /**关联body中所有的div标签 **/ <span >xxxx</span>
4.属性选择器
input[type="text"]{border: 1px solod red;} /**body中input type='text'的标签会被应用上该格式**/
.v1[xx='456']{color: red;}
<div class="v1" xx='123'>a</div>
<div class="v1" xx='456'>b</div>/**只用这个才会被应用上述格式**/
<div class="v1" xx='789'>c</div>
5.后代选择器
.yy li{color:pink;}
<div class='yy'> /**只用这个才会被应用上述格式**/
<ul>
<li>中国</li>
<li>美国</li>
<li>俄罗斯</li>
</ul>
</div>
<div >
<ul>
<li>china</li>
<li>usa</li>
<li>beijing</li>
</ul>
</div>
.yy > a{color:black;}
.yy li{color:pink;}
<div class='yy'>
<a>百度</a> /**这个会被应用上述black格式**/
<div>
<a>阿里</a>
<a>腾讯</a>
</div>
<ul>
<li>中国</li> /**这个会被应用上述pink格式**/
<li>美国</li>
<li>俄罗斯</li>
</ul>
</div>
<div >
<ul>
<li>china</li>
<li>usa</li>
<li>beijing</li>
</ul>
</div>
关于选择器的常用度:
多:类标签选择、标签选择器、后代选择器
少: ID标签选择器 属性标签选择器
关于多个标签的覆盖:
当某个标签有多个样式,会将多个样式进行组合使用;如果多个样式中有重复同一个样式定义,则默认选择最后的一个样式【最后一个是指,css中的定义顺序。如果想要某个非最后的样式不被后续覆盖,则在相应的样式定义后面加: ! important】
.c1{color:red !important;
border:1px solid red;
}
.c2{color:red;
border:1px green;
font_size: 28px
}
3.4 样式类型
1.颜色、高度、宽度、字体大小、加粗、字体、居中对齐【宽度支持百分比定义,高度不可以】
.c1{color:red;
height:200px;
width:50px;
font-size:100px;
font-weight:600;
font-family:"Alibaba PuHuiTi";
text-align:center; /**水平居中**/
line-height:59x; /**当一行文本时,可以根据此进行 垂直居中**/
}
.c1{color: #FFDAB9;
height:200px;
width:50%; /**宽度可以支持百分比 **/
font-size:larger;
font-weight:600;
font-weight:bolder;
font-family:"Alibaba PuHuiTi";
}
2、块级标签和行内标签
- 块级
- 行内
- css样式: 标签 -> display: inline-block [同时实现行内和块级标签的融合]; display:inline变成行内标签;display:block变成块级标签。
.c1{display:inline-block;
height:100px;
width:300px;
border:1px solid red;
}
<span class="c1">china</span>
<span class="c1">usa</span>
<span class="c1">bejing</span>
备注: 块级、块级+行内样式最为常用。
3、浮动
默认,标签都是在左边,如果要实现标签靠右浮动或其他样式,则可以通过以下样式实现
.c1{float:right; /**实现,标签靠右**/
}
- div的浮动,也就变成行内标签
<style>
.item{
float: left;
width:200px;
height:170px;
border:1px solid red;
}
</style>
<div class="item">china</div>
<div class="item">beijing</div>
<div class="item">chaoyang</div>
如果让标签浮动之后,这就会脱离文档流。会改变原有的文档流。例如如下的设置,要实现背景色不会被覆盖,则进行clear设置
<style>
.item{
float: left;
width:200px;
height:170px;
border:1px solid red;
}
</style>
<div style='blackground: dodgerbule;'>
<div class="item">china</div>
<div class="item">beijing</div>
<div class="item">chaoyang</div>
<div style='clear: both;'></div> /** 将浮动的内容拉回来固定,回归父子的标签样式(外层div)**/
</div>
4、内边距 /**padding对应的是设置内部样式 **/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
border: 1px solid red;
height: 200px;
width: 200px;
padding-top: 20px;
padding-left: 5px;
padding-right: 15px;
padding-bottom: 10px;
padding: 20px 15px 10px 5px;/** 顺时针:上右下左 **/
}
</style>
</head>
<body>
<div class="outer">
<div style="background-color: gold;">听妈妈的话</div>
<div>
小朋友你是否有很多问号
</div>
</div>
</body>
</html>
5、外边距 /**margin对应的是设置外部样式 **/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 20px;"></div>
<div style="background-color: red;height: 100px;margin-bottom: 20px;"></div>
</body>
</html>
3.5 小结
- body标签,默认有一个边距,造成页面四边都有白色间隙,如何去除呢?
body{
margin: 0;
}
- 内容居中
- 文本居中,文本会在这个区域中居中。
<div style="width: 200px; text-align: center;">jasminexjf</div>
- 区域居中,自己要有宽度 +
margin-left:auto;margin-right:auto
.container{
width: 980px;
margin: 0 auto;
}
<div class="container">
adfasdf
</div>
- 父亲没有高度或没有宽度,被孩子支撑起来。
- 如果存在浮动,一定记得加入 。
- 如果想要用别人的样式。
谷歌 -> 右击检查 -> 看别人样式 - 关于布局不知如何下手。
直接分析别人框架,从父到子进行分析框架设计。
小米案例case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jasminexjf_xioami</title>
<style>
body {
margin: 0; /** 外边距为0 **/
}
.header {
background: #333;
}
.container {
width: 1226px;
margin: 0 auto; /** 内容区域距中,如知乎内容水平距中(上下0,左右auto),必须搭配width **/
}
.header .menu {
float: left;
color: white;
}
.header .account {
float: right;
color: white;
}
.header a{
color: #b8b8b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a>小米商城</a>
<a>MIUI</a>
<a>云服务</a>
<a>有品</a>
<a>开放平台</a>
</div>
<div class="account">
<a>登录</a>
<a>注册</a>
<a>消息通知</a>
<a>注销</a>
</div>
<div style="clear: both"></div>
</div>
</div>
</body>
</html>