CSS 应用方式
在标签上
<image src="..." style="height:100px" />
<div style="color:red;">hello world</div>在 head 标签中写 style 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {color:red;}
</style>
</head>
<body>
<h1 class="c1"> 登陆 </h1>
<form method="post" action="/login">
用户名: <input type="text" name="username">
密码: <input type="password" name="password">
<input type="submit" value="提交">
</form>
</body>
</html>写入文件内
在网页的 <head></head> 标签对中使用 <link> 标记来引入外部样式表文件，使用 html 规则引入外部 css。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" herf="static/common.css"/>
</head>
<body>
<h1 class="c1"> 登陆 </h1>
<h1 class="c2">C2</h1>
<form method="post" action="/login">
用户名: <input type="text" name="username">
密码: <input type="password" name="password">
<input type="submit" value="提交">
</form>
</body>
</html>选择器
ID 选择器
#c2{color: gold;}
<div id="c2">america</div>类选择器
.c1{color: red;}
<div class="c1">china</div>标签选择器
li{color: blue;}
<ul>
<li>beijing</li>
<li>shanghai</li>
</ul>属性选择器
input[type='text']{border: 2px solid red;}
.v1[xx="456"]{color: red;}
<input type="text">
<input type="password">
<div class="v1" xx="123">s</div>
<div class="v1" xx="456">f</div>
<div class="v1" xx="999">a</div>后代选择器
.yy li{color: blue;}
.yy >a{color: red;}
<div class="yy">
<a>hello world</a>
<div>
<a>hello hello</a>
</div>
<ul>
<li> 中 </li>
<li> 日 </li>
<li> 韩 </li>
</ul>
</div>样式
高度和宽度
.c1{
height: 300;
width: 50%;
}
注：宽度有百分比 块级和行内标签
行内和块级都了解，就忽略了，记录下既有行内特性和块级特性的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
display: inline-block;
height: 100px;
width: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<span class="c1">hello world</span>
<span class="c1">hello world</span>
</body>
</html>字体和颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: #008B8B;
font-size: 18px;
font-weight: 100px;
font-family: Microsoft Yahei;
}
</style>
</head>
<body>
<div class="c1"> 中国联通 </div>
<div> 中国移动 </div>
</body>
</html>文字对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 60px;
width: 300px;
border: 1px solid red;
text-align: center; /* 水平方向局中 */
line-height: 59px;
}
</style>
</head>
<body>
<div class="c1">guozhi</div>
</body>
</html>浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<span>left</span>
<span style="float: right">right</span>
</div>
</body>
</html>使用 div- 浮动后，就会脱离文档流，通过 style=clear: both 恢复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
float: left;
width: 200px;
height: 170px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="background-color: blue">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div style="clear: both"></div>
</div>
</body>
</html>内边距
内部布局设置距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
border: 1px solid red;
height: 300px;
width: 200px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
/* padding: 20px 10px 5px 20px; 上右下左 */
}
</style>
</head>
<body>
<div class="outer">
<div style="background-color: red;"> 听妈妈的话 </div>
<div>
小朋友，你是否有很多问号
</div>
</div>
</body>
</html>外边距
外边距，我与别人加距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: red;"></div>
<div style="background-color: blue;height: 100px;margin-top: 20px"></div>
</body>
</html>正文完