css可以在html中内置，也可以进行外联。在html中使用样式时，选择器的优先级时非常重要的。同时在进行布局是，脱离文档流必须要用到css。
css常用选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css常用选择器</title>
<!-- <link rel="stylesheet" href="lianxi02.css"> -->
<style>
ul{
border: 1px dashed red;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
overflow: hidden;
padding:10px;
}
ul li{
list-style-type: none;
width: 50px;
height: 50px;
background-color: wheat;
border-radius: 50%;
text-align: center;
line-height: 50px;
float: left;
margin-left: 10px;
box-shadow: 1px 2px 1px #000000;
}
#bg-blue{
background-color: lightblue;
}
.bg-green{
background-color: lightgreen;
}
li[id="bg-blue"]{
border:2px solid red;
}
#bg-blue, .bg-green{
border: 2px solid blue;
}
#bg-blue + *{
background-color: yellow;
}
#bg-blue ~ *{
background-color: -yellow;
}
ul :first-child{
background-color: coral;
}
ul :nth-child(5){
background-color: coral;
}
ul :last-child{
background-color: coral;
}
ul :nth-last-child(3){
background-color: coral;
}
ul li:first-of-type{
background-color: lightpink;
}
ul li:last-of-type{
background-color: lightpink;
}
ul li:nth-of-type(6){
background-color: lightpink;
}
div :nth-child(2){
background-color: lightgreen;
}
form :enabled {
background-color: yellow;
}
form :focus {
background-color: lightgreen;
}
button:hover {
width: 50px;
height: 30px;
background-color: red;
color: white;
}
form :invalid {
color: red;
}
</style>
</head>
<body>
<ul>
<li class="bg-green">1</li>
<li id="bg-blue">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div>
<p>开心猴</p>
<li>吃饭</li>
<p>做游戏</p>
</div>
<div>
<p>大象</p>
<li>喷水</li>
</div>
<form action="">
<label for="email">邮箱:</label>
<input type="email">
<br>
<label for="password">密码:</label>
<input type="password">
<br>
<input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label>
<input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label>
<br>
<button>登录</button>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.双飞翼
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼</title>
<style>
.header{
width: 100%;
background-color: lightblue;
}
.header .content{
width: 800px;
height: 60px;
background-color: lightgreen;
margin: 0 auto;
}
.header .content .nav{
margin: 0;
padding: 0;
}
.header .content .nav .item{
list-style-type: none;
}
.header .content .nav .item a{
float: left;
min-width: 80px;
min-height: 60px;
line-height: 60px;
color: #888;
font-size: 1.2rem;
padding: 0 15px;
text-decoration: none;
text-align: center;
}
.header .content .nav .item a:hover {
background-color: #888;
color: white;
}
.container{
width: 800px;
height: 600px;
background-color: lightyellow;
margin: 8px auto;
}
.wrap{
width: inherit;
min-height: 600px;
background-color: cyan;
}
.left{
width: 100px;
min-height: 600px;
background-color: lightcoral;
}
.right{
width: 100px;
min-height: 600px;
background-color: lightgreen;
}
.wrap, .left, .right{
float: left;
}
.left{
margin-left:-100%;
}
.right{
margin-left:-100px;
}
.mian{
padding-left:100px;
padding-right: 100px;
}
.footer{
width: 100%;
background-color: lightgray;
}
.footer .content{
width: 800px;
height: 60px;
background-color: lightblue;
margin: 0 auto;
}
.footer .content p{
text-align: center;
line-height: 60px;
}
.footer .content a{
text-decoration: none;
color: #666;
}
.footer .content a:hover{
text-decoration: underline;
color: #444;
}
</style>
</head>
<body>
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="">首页</a></li>
<li class="item"><a href="">公司新闻</a></li>
<li class="item"><a href="">最新产品</a></li>
<li class="item"><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="mian">主体内容区</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">
<div class="content">
<p>
<a href="">© 知识产权所有</a> |
<a href="">0118-88889999</a> |
<a href="">苏1-1</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.窗口遮罩
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位遮罩</title>
<style>
body{
background-color: wheat;
}
.shade{
position: absolute;
left: 0;
top:0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.login{
background-color: white;
position: absolute;
width: 280px;
height: 380px;
left:50%;
top: 50%;
margin-left: -140px;
margin-top: -190px;
}
</style>
</head>
<body>
<div class="shade"></div>
<div class="login"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.固定定位
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
body{
background-color: lightgreen;
height: 2000px;
}
.ads{
width:350px;
height: 250px;
background-color: lightpink;
position: fixed;
right: 0;
bottom:0;
}
div button{
float: right;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="ads">
<button onclick="this.parentNode.style.display = 'none'">关闭</button>
<h2>年历化率10%</h2>
<p>赶紧车，错误就没有了</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
css在html中运用是非常灵活的，并且脱离文档流用到的浮动和定位都是css中的重要知识点。
浮动的掌握也是css中很重要的一个环节。