一 、知识框架
CSS样式内容框架
框-讲解图
框解析图
行框
二、代码
test.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>Hello world</h1>
<h2>hh</h2>
<h3>h3</h3>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
Et voluptatum officiis, saepe totam amet,
ratione id possimus enim libero quae aliquam inventore dolorem
porro omnis cumque incidunt debitis cum modi.
</p>
<div>Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
Et voluptatum officiis, saepe totam amet,
ratione id possimus enim libero quae aliquam inventore dolorem
porro omnis cumque incidunt debitis cum modi.
</div>
<div id="logo">LOGO</div>
<div class="red bold">
AAA
</div>
<p class="red">CCC</p>
<div class="green bold">
BBB
</div>
<button title="点击此处登录">登录</button>
<button>注册</button>
<a title="点击跳转淘宝" href="https://taobao.com">taobao</a>
<div class="a">a
<div class="b">b
<div class="c">c
</div>
</div>
</div>
<div class="z">z</div>
<div class="x">x</div>
<div class="c">c</div>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.jianshu.com">简书</a>
<input type="text">
<button>点我</button>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Nulla, aspernatur earum? Tempora quas saepe dolore corrupti id.
Quaerat, ducimus. Modi ad dolor,
qui atque veritatis deserunt nihil dignissimos.
Veritatis, laborum.</p>
<div class="block">块级元素</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
<div class="inline">行内元素</div>
Nulla, aspernatur earum? Tempora quas saepe dolore corrupti id.
Quaerat, ducimus. Modi ad dolor, Nulla, aspernatur earum? Tempora quas saepe dolore corrupti id.
Quaerat, ducimus. Modi ad dolor,
<div class="inline-block">行内块级元素</div>
qui atque veritatis deserunt nihil dignissimos.
Veritatis, laborum.
</p>
<div class="box">abc</div>
</body>
</html>
style.css
body{
margin:0;
}
/*元素选择器*/
h1, h2 {
color:gray;
background:black;
}
/*类选择器*/
.red{
color:red;
}
.green{
color:green;
}
.bold{
font-weight:900;
}
.red.bold{
border:2px solid black;
}
/*ID选择器*/
#logo{
color:gray;
}
/*属性选择器*/
[title]{
color:gray;
}
[title="点击跳转淘宝"]{
border: 2px solid black;
}
[title^="点击"]{
border: 2px solid black;
}
div{
padding:10px;
background:rgba(255,0,0,0.2);
margin:5px;
}
/*后代选择器*/
.a .b{
border:2px solid black;
}
/*相邻选择器*/
.z + div{
background:rgba(0,0,255,.2);
}
/*通用相邻选择器*/
.z ~ div{
background:rgba(0,0,255,.2);
}
/*伪类 用:表示*/
a:link{
color:blue;
}
a:visited{
color:red;
}
button:hover{
background:#eee;
}
input:focus{
background:rgba(0,255,0,0.2);
}
/*伪元素选择器*/
p:first-letter{
font-size:50px;
}
/*字体属性*/
p{
font-family:"微软雅黑"; /*字体*/
font-weight:bold; /*粗细 100-900 */
font-size:14px;
text-align: justify; /*left right justify center */
line-height:1.2; /*行高：用比例或像素指定*/
text-decoration: underline; /*文字装饰*/
}
.block{
display:block;
background:#80ffff;
}
.inline{
display:inline;
background:rgba(0,255,255,0.2);
margin:20px;
}
.inline-block{
display:inline-block;
background:rgba(109, 88, 202, 0.2);
margin:20px;
}
.box{
background:#000;
padding:10px;
width:300px;
height:300px;
border:2px solid #777;
margin:20px;
}
网友评论