css
3种css基本选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
p{
color:red;
}
.class1{
color: green;
}
#id1{
color:blue;
}
style>
<link rel="stylesheet" href="css/css1.css">
head>
<body>
<p>abcp>
<p class="class1">defp>
<p id="id1">tyup>
body>
html>
p{
color:black;
}
.class1{
color: chartreuse;
}
#id1{
color:chocolate;
}
4中css导入样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
#css1{
font-size: 15px;
color: chartreuse;
}
style>
<style>
@import "css/css2.css";
style>
<link rel="stylesheet" href="css/css3.css">
head>
<body>
<p style="font-size: 14px;color: red">孤独是一个人的狂欢p>
<p id="css1">狂欢是一群人的孤独p>
<p id="css2">宁做一只孤傲的苍狼p>
<p id="css3">不做乖乖的看门狗p>
body>
html>
#css2{
font-size: 16px;
color: blueviolet;
}
#css3{
font-size: 17px;
color: yellow;
}
display
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
div{
margin: 40px;
}
div:nth-of-type(1){
width: 200px;
height: 100px;
border: 1px solid #d299c2;
display: block;
}
div:nth-of-type(2){
width: 200px;
height: 100px;
border: 1px solid #d299c2;
display: inline;
}
div:nth-of-type(3){
width: 200px;
height: 100px;
border: 1px solid #d299c2;
display: inline-block;
}
div:nth-of-type(4){
width: 200px;
height: 100px;
border: 1px solid #d299c2;
display: none;
}
style>
head>
<body>
<div><img src="images/java.png" alt="java">123div>
<div><img src="images/python.png" alt="python">123456789div>
<div><img src="images/mysql.png" alt="mysql">123div>
<div><img src="images/oracle.png" alt="oracle">123div>
body>
html>
列表
<html>
<head lang="en">
<meta charset="UTF-8">
<title>列表样式title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#nav{
width: 300px;
background: #a0a0a0;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red url("images/d.gif") 270px 10px no-repeat;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("images/r.gif");
background-repeat: no-repeat;
background-position: 236px 2px;
}
a{
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover{
color: orange;
text-decoration: underline;
}
style>
head>
<body>
<div id="nav">
<h2 class="title">全部商品分类h2>
<ul>
<li><a href="#">图书a> <a href="#">音像a> <a href="#">数字商品a>li>
<li><a href="#">家用电器a> <a href="#">手机a> <a href="#">数码a>li>
<li><a href="#">电脑a> <a href="#">办公a>li>
<li><a href="#">家居a> <a href="#">家装a> <a href="#">厨具a>li>
<li><a href="#">服饰鞋帽a> <a href="#">个护化妆a>li>
<li><a href="#">礼品箱包a> <a href="#">钟表a> <a href="#">珠宝a>li>
<li><a href="#">食品饮料a> <a href="#">保健食品a>li>
<li><a href="#">彩票a> <a href="#">旅行a> <a href="#">充值a> <a href="#">票务a>
li>
ul>
div>
body>
html>
列表样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
li{
list-style: decimal;
}
style>
head>
<body>
<ul>
<li><a href="#">图书a> <a href="#">音像a> <a href="#">数字商品a>li>
<li><a href="#">家用电器a> <a href="#">手机a> <a href="#">数码a>li>
<li><a href="#">电脑a> <a href="#">办公a>li>
<li><a href="#">家居a> <a href="#">家装a> <a href="#">厨具a>li>
<li><a href="#">服饰鞋帽a> <a href="#">个护化妆a>li>
<li><a href="#">礼品箱包a> <a href="#">钟表a> <a href="#">珠宝a>li>
<li><a href="#">食品饮料a> <a href="#">保健食品a>li>
<li><a href="#">彩票a> <a href="#">旅行a> <a href="#">充值a> <a href="#">票务a>
li>
ul>
body>
html>
制作网页动画
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
div{
transition:all 100s linear 1s;
width: 200px;
height: 100px;
border: 1px solid red;
background-color: yellow;
display:inline-block;
transform: skew(45deg,0);
}
style>
head>
<body>
<div>div>
body>
html>
圆角边框
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
div{
width: 200px;
height: 100px;
border: 4px saddlebrown solid;
border-radius: 50%;
}
style>
head>
<body>
<div>div>
body>
html>
字体样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
p{
font-family:"楷体";
font-size: 15px;
font-style:italic;
font-weight: bold;
font:normal normal 19px "sans-serif";
}
style>
head>
<body>
<p>苔米学编程123p>
body>
html>
定位
相对定位
Title
绝对定位
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
#first{
width: 300px;
height:200px;
background-color: red;
margin: 0 0 5px 0;
position: fixed;
right:0px;
bottom:0px;
z-index: 1;
}
#second{
width: 600px;
height:400px;
background-color: green;
position: absolute;
right: 0px;
bottom:0px;
}
style>
head>
<body>
<div id="father">
<div id="first">div>
<div id="second">div>
div>
<p>p>
body>
html>
层次选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器
title>
<style type="text/css">
body p{
background: red;
}
body>p{
background: green;
}
#p1~p{
background: yellow;
}
style>
head>
<body>
<p id="p1">1p>
<p id="p2">2p>
<p id="p3">3p>
<ul>
<li><p id="p4">4p>li>
<li><p id="p5">5p>li>
<li><p id="p6">6p>li>
ul>
body>
html>
属性选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
p{
margin: 0;
padding: 0;
}
a{
width: 50px;
height: 50px;
margin: 10px;
background: aliceblue;
text-decoration: none;
display: block;
float: left;
text-align: center;
line-height: 50px;
border-radius: 10px;
}
a{
background: aquamarine;
}
a[id="zsd123"]{
background: red;
}
a[id^="zsd"]{
background: green;
}
a[id$="zsd"]{
background: yellow;
}
a[id*=zsd]{
background: red;
}
style>
head>
<body>
<p>
<a href="#" id="zsd123">1a>
<a href="#" id="zsd456">2a>
<a href="#" id="zsd789">3a>
<a href="#" id="123zsd">4a>
<a href="#" id="456zsd">5a>
<a href="#" id="789zsd">6a>
<a href="#" id="123zsd456">7a>
<a href="#" id="456zsd789">8a>
p>
body>
html>
文本样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
p{
color: red;
text-align: center;
text-indent: 2em;
line-height: 100px;
text-decoration: underline;
text-shadow: red 10px -10px 0.5em;
}
style>
head>
<body>
<p>苔米学编程p>
body>
html>
浮动
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
div{
width: 300px;
height: 200px;
border:1px solid #d299c2;
}
overflow属性：visible auto hidden scroll
#father {
overflow: auto;border:1px #000 solid; }
.clear:after {
content: '';
display: block;
clear: both;
}
style>
head>
<body>
<div id="father" class="clear">
<div><img src="images/java.png" alt="java">123div>
<div><img src="images/python.png" alt="python">123456789div>
<div><img src="images/mysql.png" alt="mysql">123div>
<div><img src="images/oracle.png" alt="oracle">123div>
div>
body>
html>
渐变色
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
#grad {
height: 200px;
background-image: -moz-linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
}
style>
head>
<body>
<div id="grad">div>
body>
html>
盒子阴影
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
div{
height: 300px;
width: 400px;
border: 2px #000000 solid;
box-shadow: inset 30px 30px 50px #d299c2;
}
style>
head>
<body>
<div>div>
body>
html>
练习 李白望庐山瀑布
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="css/css1.css">
head>
<body>
<div style="text-align: center">
<h1>望庐山瀑布h1>
<p>日照香炉生紫烟，p>
<p>遥看瀑布挂前川。p>
<p>飞流直下三千尺，p>
<p>疑是银河落九天。p>
div>
body>
html>
div p{
color: chartreuse;
}
结构伪类选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
p:first-child{
background: yellow;
}
p:last-child{
background: green;
}
body p:nth-child(2){
background: red;
}
body p:nth-child(4){
background: red;
}
p:first-of-type{
background: antiquewhite;
}
p:last-of-type{
background: aquamarine;
}
p:nth-of-type(3){
background: #000000;
}
p:nth-of-type(5){
background: #000000;
}
style>
head>
<body>
<p id="p1">1p>
<p id="p2">2p>
<p id="p3">3p>
<ul>
<li><p id="p4">4p>li>
<li><p id="p5">5p>li>
<li><p id="p6">6p>li>
ul>
body>
html>
背景样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
li{
width: 260px;
background-color: red;
background-image: url("images/r.gif");
background-repeat: no-repeat;
background-position: 250px 5px;
}
style>
head>
<body>
<ul>
<li><a href="#">图书a> <a href="#">音像a> <a href="#">数字商品a>li>
<li><a href="#">家用电器a> <a href="#">手机a> <a href="#">数码a>li>
<li><a href="#">电脑a> <a href="#">办公a>li>
<li><a href="#">家居a> <a href="#">家装a> <a href="#">厨具a>li>
<li><a href="#">服饰鞋帽a> <a href="#">个护化妆a>li>
<li><a href="#">礼品箱包a> <a href="#">钟表a> <a href="#">珠宝a>li>
<li><a href="#">食品饮料a> <a href="#">保健食品a>li>
<li><a href="#">彩票a> <a href="#">旅行a> <a href="#">充值a> <a href="#">票务a>
li>
ul>
body>
html>
超链接伪类
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
a:link{
color: red;
}
a:visited{
color:green;
}
a:hover{
color:yellow;
}
a:active{
color: blue;
}
style>
head>
<body>
<a href="#">123a>
body>
html>
边框
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
#border{
width: 50px;
height: 50px;
border: 20px black solid ;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
border-top-width: 10px;
border-right-width: 20px;
border-bottom-width: 30px;
border-left-width: 40px;
border-top-style:dashed;
border-right-style: solid;
border-bottom-style:solid;
border-left-style: double;
}
#div2{
width: 300px;
height: 200px;
margin: 40px;
padding: 20px;
border: 1px #a0a0a0 solid;
box-sizing: border-box;
}
style>
head>
<body>
<div id="border">
div>
<div id="div2">
div>
body>
html>
