1.css的语法
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
}
h2{
color:blue;
}
</style>
<p>CSS从入门到精通！</p>
<h2>主讲</h2>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1.内部样式 */
p{
color:red;
}
</style>
<!-- <link rel="stylesheet" type="text/css" href="style/hello.css"> -->
<!-- @import导入样式文件 -->
<style>
@import "style/hello.css";
/* @import url(style/hello.css); */
</style>
<p>welcome to CSS！</p>
<p>欢迎来到CSS课堂！</p>
<!-- 2.行内样式 -->
<h2 style="color: blue">WEB前端工程师！</h2>
<h2>JAVA开发工程师</h2>
<div>嘿嘿</div>
<div>哈哈</div>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
font-size:20px;
}
h2{
color:yellow;
}
.hello{
background:#cccccc;
}
.world{
font-weight:bold;
}
#heihei{
color:blue;
}
</style>
<p>welcome to CSS!</p>
<p>hello world</p>
<h2>WEB前端开发</h2>
<h3>JAV开发</h3>
<hr>
<!-- 只改第一个p标签 -->
<p class="hello">welcome to CSS!</p>
<p>hello world</p>
<h2>WEB前端开发</h2>
<h3>JAV开发</h3>
<div class="hello">主讲</div>
<div class="hello world">主讲</div>
<span class="world">CSS从入门到精通!</span>
<hr>
<h1 id="heihei">嘿嘿</h1>
4.复杂选择器
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1.标签选择器与类选择器结合起来 */
h1.aaa{
color:red;
}
/* 2.标签选择器与id选择器结合起来 */
p#bbb{
color:yellow;
}
/* 2.组合选择器 */
/* 合起来写 */
h1,p,div,span,.ccc{
font-size:30px;
}
div{
background:#cccccc;
}
.ccc{
font-weight:bold;
}
/* 3.嵌套选择器 */
div p{
color:green;
text-decoration:underline;
}
/* 对div内部的类选择器进行修饰 */
div h3.ddd{
color:pink;
}
</style>
<!-- 1.只修改class为aaa的h1 -->
<h1 class="aaa">welcome</h1>
<h4 class="aaa">css</h4>
<h1>hello</h1>
<hr>
<!-- 1.改id为bbb的标签 -->
<p id="bbb">world</p>
<p>html</p>
<h2 id="bbb">WEB开发</h2>
<hr>
<!-- 2.将h1,p,div,span中的内容字号设置为30px -->
<h1>hello</h1>
<p>html</p>
<div>web开发</div>
<span class="ccc">java开发</span>
<hr>
<!-- 3.设置div内部的p标签样式 -->
<div>
<p>div内部的p标签</p>
<h3>div内部的h3标签</h3>
</div>
<hr>
<div>
<h2>
<p>div内部的h2标签内部的p标签</p>
</h2>
</div>
<hr>
<!-- 改div内部的h3 -->
<div>
<p>div内部的p标签</p>
<h3 class="ddd">div内部的h3</h3>
<p class="ddd">pppp</p>
</div>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* a:link{
font-size:12px;
color:black;
text-decoration:none;
}
a:visited{
font-size:15px;
color:red;
}
a:hover{
font-size:20px;
color:blue;
}
a:active{
font-size:40px;
color:green;
} */
a:link,a:visited{
font-size:13px;
color:#666666;
text-decoration:none;
}
a:hover,a:active{
color:#ff7300;
text-decoration:underline;
}
p:hover{
color:red;
}
p:active{
color:blue;
}
/* 普通标签也可以使用伪类选择器 */
</style>
IT教育，高教培训
<p>CSS从入门到精通</p>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:first-letter{
color:red;
font-size:30px;
}
p:first-line{
background:yellow;
}
:before{
content:"嘿嘿";
}
p:after{
content:"哈哈";
}
</style>
<p>hello world!</p>
<hr>
<p>
hello world! <br>
welcome to css!
</p>
<meta charset="UTF-8">
<title>Document</title>
<!-- <link rel="stylesheet" href="style/world.css"> -->
<style>
div{
font-size:20px;
color:red;
}
.hello{
font-weight:bold;
color:blue!important;
}
#world{
text-decoration:underline;
color:green;
}
</style>
<link rel="stylesheet" href="style/world.css">
<div class="hello" id="world" style="color:pink;">CSS从入门到精通</div>
<p>主讲</p>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
font-size:30px;
}
p{
/* font-size:20px; */
/* font-size:80%; */
font-size:2em;
}
#ddd{
font-size:3em;
}
span.hello{
/* font-size:80%; */
font-size:2em;
}
body{
font-size:62.5%;
}
ul li{
/* font-size:30px;
font-weight:700;
font-family:华文行楷,黑体,宋体;
font-style:normal; */
font:italic bold 20px 楷体,黑体,宋体;
}
</style>
<p>
CSS从入门到精通
<span>主讲：高教培训</span>
</p>
<span id="ddd">主讲</span>
<hr>
<div>
我的DIV
<p>
CSS从入门到精通
<span>主讲：高教培训</span>
</p>
</div>
<hr>
<span class="hello">主讲：高教培训</span>
<ul>
<li>嘿嘿</li>
</ul>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
/* background-color:#0F0; */
/* background-color:rgb(0, 0, 255); */
/* background-color:rgba(0, 255, 0, 0.5); */
background-color:#e8541e;
line-height:50px;
text-align: center;
}
img{
vertical-align:middle;
}
div{
text-indent:25px;
}
span{
text-decoration:line-through;
text-transform:capitalize;
letter-spacing:3px;
word-spacing:8px;
}
h3{
width:300px;
height:200px;
background-color:#cccccc;
white-space:nowrap;
overflow:hidden;
}
</style>
<p>welcome to CSS!</p>
<p>welcome to CSS!</p>
<p>welcome to CSS!</p>
<p>welcome to CSS!</p>
<hr>
<img src="../images/qq.jpg" alt="">
HTML和CSS很简单
<hr>
<div> welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS</div>
<div>welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS</div>
<hr>
<span>hello world</span>
<hr>
<h3>welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS</h3>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* div{
color:red;
background-color:#cccccc;
background-color:transparent;
background-image:url(../images/bg.gif);
} */
</style>
<link rel="stylesheet" href="css/style.css">
<div>
<p> welcome to CSS welcome to CSS welcome to CSS</p>
<p> welcome to CSS welcome to CSS welcome to CSS</p>
<p> welcome to CSS welcome to CSS welcome to CSS</p>
<p> welcome to CSS welcome to CSS welcome to CSS</p>
<p> welcome to CSS welcome to CSS welcome to CSS</p>
</div>
<hr>
<p class="cart"></p>
购物车
div{
/* color:red; /
/ background-color:#cccccc; /
/ background-color:transparent; /
/ background-image:url(…/…/images/heihei.gif);
background-repeat:no-repeat;
background-position:right top;
height:1000px;
background-attachment:fixed; */
background:red url(…/…/images/qq.jpg) repeat-x 30px 100px;
}
.cart{
width:30px;
height:20px;
background-color:#ccc;
background-image:(…/…/images/icon.gif);
background-color:transparent;
background-position:-160px -30px;
}
11.列表属性
<meta charset="UTF-8">
<title>Document</title>
<style>
/* li{
list-style-type:circle;
} */
.first{
list-style-type:decimal;
}
.second{
list-style-image:url(../images/male.gif);
}
.third{
list-style-type:circle;
list-style-position:inside;
}
.fourth{
/* list-style:square url(../images/female.gif) inside; */
list-style:none;
}
.nav{
list-style:none;
/* float:left; */
}
.nav li{
list-style:none;
float:left;
width:50px;
}
</style>
<ul>
<li class="first">hello</li>
<li class="second">hello</li>
<li class="third">hello</li>
<li class="fourth">hello</li>
</ul>
<hr>
<nav>
<ul class="nav">
<li>新闻</li>
<li>地图</li>
<li>视频</li>
<li>贴吧</li>
</ul>
</nav>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width:500px;
border-collapse:collapse;
border:1px solid red;
}
td{
border:1px solid red;
}
</style>
<table border="1px" bordercolor="red" cellpadding="0" cellspacing="0">
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
</table>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
width:250px;
background:#ccc;
}
.first{
/* border-top-color:red;
border-top-width:1px;
border-top-style:solid;
border-right-color:blue;
border-right-width:2px;
border-right-style:dashed;
border-bottom-color:green;
*/
/* border-top:1px solid red;
border-bottom:2px dashed blue; */
/* border-color:red yellow blue green;
border-width:1px 2px 4px 6px;
border-style:solid dashed dotted double; */
/* border-color:red green pink;
border-width:1px 2px 4px 6px;
border-style:solid dashed dotted double; */
border:1px dotted red;
padding:20px;
margin:10px;
}
.second{
padding-top:5px;
padding-left:10px;
padding-bottom:20px;
padding-right:30px;
/* padding:1px 2px 4px 6px; */
/* padding:5px; */
}
</style>
<p class="first">welcome to html</p>
<p class="second">welcome to css</p>
<p class="third">welcome to javasript</p>
welcome to css
<p>hello world</p>
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:50px;
height:50px;
background:#ccc;
}
.div1{
margin-bottom:20px;
}
.div2{
margin-top:30px;
}
.div3{
width:100px;
height:100px;
background:blue;
margin-top:20px;
/* border:1px solid red; */
}
.div4{
margin-top:10px;
}
p{
margin:20px 0;
}
</style>
<div class="div1">div1</div>
<div class="div2">div2</div>
<hr>
<div class="div3">
<div class="div4"></div>
</div>
<hr>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
width:800px;
border:1px solid #000;
position:relative;
}
.div1,.div2,.div3,.div4{
width:100px;
height:50px;
}
.div1{
background:red;
/* position:static; */
position:relative;
top:20px;
left:50px;
z-index:-5;
}
.div2{
background:blue;
position:absolute;
left:100px;
bottom:50px;
z-index:-8;
}
.div3{
background:green;
position:fixed;
bottom:50px;
left:100px;
}
.div4{
background:cyan;
z-index:8;
}
</style>
<div id="container">
<!-- div.div${div$}*4 -->
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</div>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
width:800px;
border:1px solid #000;
}
.div1,.div2,.div3,.div4{
width:300px;
height:50px;
}
.div1{
background:red;
float:left;
}
.div2{
background:blue;
float:left;
clear:left;
}
.div3{
background:green;
float:left;
}
.div4{
background:cyan;
float:left;
}
.clr{
clear:left;
}
</style>
<div id="container">
<!-- div.div${div$}*4 -->
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="clr">aaa</div>
</div>
welcome to CSS
welcome to CSS
javascript  19.元素的显示和隐藏<meta charset="UTF-8">
<title>Document</title>
<style>
.div1{
width:100px;
height:100px;
background:blue;
/* display:none; */
display:inline;
/* 将块级元素转换为行级元素进行显示，失去块级元素独占一行的特点 */
}
span{
width:100px;
height:100px;
background:yellow;
/* display:block; */
/* 将行级元素转换为块级元素进行显示，独占一行的特点 */
/* 同时进行显示 */
/* 方法一：设置浮动 */
/* float:left; */
/* 方法二：display:inline-block; */
display:inline-block;
}
i{
display:inline-block;
width:100px;
height:100px;
background:red;
}
.p1{
/* display:none; */
visibility:hidden;
}
#login{
display:inline-block;
width:100px;
text-decoration:none;
background:rgba(255, 0, 0, 0.7);
color:#fff;
padding:10px;
text-align:center;
border-radius:8px;
}
#login:hover{
background:rgba(255, 0, 0, 0.5);
}
</style>
<div class="div1">div1</div>
<span>span1</span>
<i>呵呵</i>
<hr>
<p class="p1">p1</p>
<p class="p2">p2</p>
<hr>
<a href="javascript('哈哈')" id="login">登 录</a>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
border:2px solid red;
/* outline-width:4px;
outline-color:blue;
outline-style:dashed; */
outline: 4px green dashed;
}
.usrname{
border:1px solid red;
outline:none;
padding-left:3px;
width:80px;
}
.email{
border:0;
outline:0;
border-bottom:1px solid #000;
}
.btnsubmit{
padding:5px;
border:0;
width:100px;
}
.mydiv{
width:100px;
height: 50px;
background:#ccc;
border:2px solid red;
outline:2px solid red;
}
</style>
<span>welcome to CSS</span>
<hr>
用户名：<input type="text" class="usrname">
<hr>
<a href="#">CSS</a>
<hr>
邮箱：<input type="text" class="email">
<input type="submit" value="提交" class="btnsubmit">
<hr>
<div class="mydiv">div</div>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
border:1px solid red;
min-width:500px;
}
div{
border:1px solid blue;
width:300px;
height:280px;
overflow:scroll;
}
span{
cursor:text;
}
</style>
<p>
welcome to CSS welcome to CSS welcome to CSS welcome to CSS
welcome to CSS welcome to CSS welcome to CSS welcome to CSS
welcome to CSS welcome to CSS welcome to CSS welcome to CSS
welcome to CSS welcome to CSS welcome to CSS welcome to CSS
</p>
<hr>
<div>
welcome to CSS welcome to CSS welcome to CSS welcome to CSS
welcome to CSS welcome to CSS welcome to CSS welcome to CSS
welcome to CSS welcome to CSS welcome to CSS welcome to CSS
welcome to CSS welcome to CSS welcome to CSS welcome to CSS
</div>
<hr>
<span>光标形状</span>
<meta charset="UTF-8">
<title>Document</title>
<style>
.hello{
/* width:600px; */
width:80%;
border:1px solid #ccc;
border-spacing:0;
border-collapse:collapse;
}
.hello th,.hello td{
border: 1px solid #ccc;
padding:5px;
}
</style>
<!-- table>(thead>tr>th{th$}*4)+tboady>(tr>td{td$}*4)*6 -->
<table class="hello">
<thead>
<tr>
<th>th1</th>
<th>th2</th>
<th>th3</th>
<th>th4</th>
</tr>
</thead>
<tboady>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
</tboady>
</table>
style.css
@charset “utf-8”;
body{
margin:0;
padding:0;
}
#container{
width:980px;
border: 1px solid #ccc;
margin:0 auto;
}
#container .header{
width:100%;
height:80%;
background:red;
}
#container .main{
width:100%;
height:600px;
background:blue;
margin:10px;
}
#container .footer{
width:100%;
height:600px;
background:green;
}
24.简单布局2
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style2.css">
<div id="container">
<header class="header">
header
</header>
<article class="wrapper">
<aside>
left aside
</aside>
<section class="main">
main
</section>
<aside>
right aside
</aside>
</article>
<footer class="footer">
footer
</footer>
</div>
style2.css
@charset “utf-8”;
body{
margin:0;
padding:0;
}
#container{
width:980px;
border: 1px solid #ccc;
margin:0 auto;
}
#container .header{
width:100%;
height:80%;
background:red;
}
#container .wrapper{
width:100%;
height:600px;
background:blue;
margin:10px 0;
}
#container .wrapper .main{
background:cyan;
width:760px;
height:600px;
float:left;
margin:0 10px;
}
#container .wrapper aside{
background:pink;
width:200px;
height:400px;
float:left;
}
#container .footer{
width:100%;
height:120px;
background:green;
}
25.圣杯布局
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style3.css">
<article id="wrapper">
<section class="main">
main
</section>
<aside class="left">
left aside
</aside>
<aside class="right">
right aside
</aside>
</article>
style3.css
@charset “utf-8”;
/* 父容器
1.溢出隐藏
2.设置容器的内边距padding，用于空出位置 */
#wrapper{
overflow:hidden; /*溢出是隐藏 /
/ 实现左侧边栏和右侧边栏 /
padding:0 200px; / 左右分别空出200px用于放置左、右侧边栏 /
min-width:300px;
border:1px solid #ccc;
}
/
主体：
1.宽度自适应
2.设置浮动布局
*/
#wrapper .main{
width:100%;
height:300px;
background:green;
float:left;
}
#wrapper aside{
width:190px;
height:300px;
background:blue;
float:left;
position:relative;
}
#wrapper .left{
margin-left:-100%;
left:-200px;
}
#wrapper .right{
margin-left:-190px;
left:200px;
/* right:-200px; */
}
26.圣杯布局2
<meta charset="UTF-8">
<title>
</title>
<link rel="stylesheet" href="css/style4.css">
<div id="container">
<header class="header">
header
</header>
<article class="wrapper">
<section class="main">
main
</section>
<aside class="left">
left
</aside>
<aside class="right">
right
</aside>
</article>
<footer class="footer">
footer
</footer>
</div>
style4.css
@charset “utf-8”;
body{
margin:0;
padding:0;
}
#container{
margin:0 auto;
}
#container .header{
width:100%;
height:80px;
background:red;
}
#container .wrapper{
overflow:hidden;
padding:0 200px;
min-width:300px;
}
#container .main{
width:100%;
height:400px;
background:blue;
float:left;
}
#container aside{
float:left;
width:190px;
height:300px;
background:cyan;
position:relative;
}
#container .left{
margin-left:-100%;
left:-200px;
}
#container .right{
margin-left:-190px;
left:200px;
}
#container .footer{
width:100%;
height:150px;
background:green;
}
27.双飞翼布局
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style5.css">
<div id="container">
<header class="header">
header
</header>
<article class="wrapper">
<section class="main">
<div class="main-wrapper">
main
</div>
</section>
<aside class="left">
left
</aside>
<aside class="right">
right
</aside>
</article>
<footer class="footer">
footer
</footer>
</div>
style5.css
@charset “utf-8”;
body{
margin:0;
padding:0;
}
#container{
margin:0 auto;
}
#container .header{
width:100%;
height:80px;
background:red;
}
#container .wrapper{
overflow:hidden;
min-width:300px;
margin:10px 0;
}
#container .main{
width:100%;
float:left;
}
#container .main-wrapper{
background:pink;
height:400px;
margin:0 200px;
}
#container aside{
float:left;
width:190px;
height:300px;
background:cyan;
}
#container .left{
margin-left:-100%;
}
#container .right{
margin-left:-190px;
left:200px;
}
#container .footer{
width:100%;
height:150px;
background:green;
}
2914
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
