我要评论CSS(级联样式表 Cascade Style Sheet)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
HTML标签，不能完成更好的显示效果，需要CSS样式表，进行处理
<element style=”样式属性1:值1;样式属性2:值2....”/>
存在样式冗余，开发的时候 不建议使用(RGB拾色器扩展)
--复用性差
<html>
<head>
<style type="text/css">
h1{
coror:#FFF;
backgraound-color:#000;
}
</style>
</head>
<body>
<h1>test</h1>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="suns.css"/>
</head>
<body>
<h1>test</h1>
</body>
</html>
<html>
<head>
<style type="text/css">
h1{
coror:#FFF;
backgraound-color:#000;
}
</style>
</head>
<body>
<h1>test</h1>
</body>
</html>
<html>
<head>
<style type="text/css">
#s{
coror:#FFF;
backgraound-color:#000;
}
</style>
</head>
<body>
<h1 id="s">test</h1>
</body>
</html>
<html>
<head>
<style type="text/css">
.c1{
coror:#FFF;
backgraound-color:#000;
}
</style>
</head>
<body>
<h1 class="c1">test</h1>
</body>
</html>
<html>
<head>
<style type="text/css">
h1,p{
coror:#FFF;
backgraound-color:#000;
}
</style>
</head>
<body>
<h1>test1</h1>
<p >test2</h1>
</body>
</html>
<html>
<head>
<style type="text/css">
ol li{
coror:#FFF;
backgraound-color:#000;
}
</style>
</head>
<body>
<ol>
<li> a</li>
<li>b</li>
<li>c</li>
</ol>
</body>
</html>
字体前景颜色
color=（“red”,”black”,”#RGB” ）...
文字大小 font-size='10px'
字体:tahoma
d)、text-decoration
字体线：underline overline line-through(下、上横穿横线)
对其方式：left right center
标签宽 width="10px"
标签高 height="10px"
鼠标的设置
cursor="pointer"（手）
cursor="wait" (等待)
元素隐藏:
display="none": 隐藏 不占用页面流
显示:
display="block": 块级元素的 h1 li table p
display="inline": 行内元素的显示 <input></input>
--背景颜色、背景图片
<html>
<head>
<style type="text/css">
h1{
font-size:100px;
font-family:tahoma;
text-decoration:line-through;
background-color:#000;
color:#FFF;
width:300px;
height:300px;
cursor:wait;
display:block;
}
#btn{
background-image:url('btn.png');
width:28px;
height:27px;
border:0 solid black;(边框)
}
</style>
</head>
<body>
<h1>suns</h1>
xiaohei
<input id="btn" type="button" />
</body>
</html>
--控制列表的样式
list-style-type:disc（光盘），none(无1、2、3 等)
<html>
<head>
<style type="text/css">
ol{
list-style-type:disc;
}
</style>
</head>
<body>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ol>
</body>
</html>
<div> 块 （块级元素）
整张网页划分成若干部分，每一个部分都是一块内容
<span> 部分 （行内元素）
需要为文本加入样式，js操作
<html>
<head>
<style type="text/css">
div{
background-color:black;
color:white;
width:100px;
height:100px
}
span{
color:red;
}
</style>
</head>
<body>
<div>test</div><div>test2</div>
<span>test3</span>
</body>
</html>
1.边框相关的样式 border（默认不显示）
2.内补白（内边距）padding
外补白（外边距）margin
<html>
<head>
<style type="text/css">
div{
width:100px;
height:100px;
border:solid 1px black;(可单独分开描述)
padding:20px 50px;
margin:40px auto;
}
</style>
</head>
<body>
<div>
test1
</div>
<div>
test2
</div>
</body>
</html>
特点：布局的内容 摆脱现有的页面流 浮在页面上，打破页面流（块级元素不在同一平面）
后面的div 覆盖前面的div。
i.绝对布局 （absolute)
position:absolute
top: 距浏览器上面边距
left:距浏览器坐标的边距
z-index:浮层 （两个div 3 5 谁大谁浮在最上面）
ii.流式布局 （float）主流
float:left 摆脱当前页面流 从左往右浮上来
clear:both 认可前面浮动布局占用页面的位置。（不能算外边距）
--绝对布局
<html>
<head>
<style type="text/css">
#s{
border:solid 1px black;
width:100px;
height:100px;
position:absolute;
top:50px;
left:200px;
background-color:green;
z-index:4;
}
#x{
border:solid 1px black;
width:300px;
height:300px;
position:absolute;
top:40px;
left:150px;
background-color:yellow;
z-index:3;
}
</style>
</head>
<body>
<div id="s">
test1
</div>
<div id="x">
test2
</div>
</body>
</html>
--流式布局
<html>
<head>
<style type="text/css">
#s{
border:solid 1px black;
width:100px;
height:100px;
float:left;
}
#x{
border:solid 1px black;
width:100px;
height:100px;
float:left;
margin-left:10px;
}
#ss{
border:solid 1px black;
width:100px;
height:100px;
background-color:green;
clear:both;--(清除页面流带来的影响)
}
</style>
</head>
<body>
<div id="s">
test1
</div>
<div id="x">
test2
</div>
<div id="ss">
test3
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
#container{
margin:0 auto;
width:600px;
}
#header{
height:50px;
background-color:rgb(28, 142, 218);
padding-top:20px;
padding-left:20px;
}
#content{
height:400px;
margin-top:10px;
margin-bottom:10px;
}
#footer{
height:30px;
background-color:rgb(68, 196, 19);
}
#logo{
background-color:rgb(196, 19, 154);
width:50px;
}
#left{
width:165px;
float:left;
background-color:rgb(204, 176, 27);
margin-right:10px;
height:400px;
}
#right{
width:425px;
float:left;
background-color:rgb(233, 84, 84);
height:400px;
}
</style>
</head>
<body>
<div id="container" >
<div id="header">
<div id="logo">
header
</div>
</div>
<div id="content">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
<div style="clear:both">
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
}
#right{
width:425px;
float:left;
background-color:rgb(233, 84, 84);
height:400px;
}
</style>
<div id="content">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
<div style="clear:both">
</div>
<div id="footer">
footer
</div>
</div>
本文地址：https://blog.csdn.net/weixin_44809337/article/details/107501114
如对本文有疑问， 点击进行留言回复！！
css深入剖析transform的translate和perspective
HCIE第四天总结（典型组网之一：CSS+Eth-Trunk+iStack）
了解下Apache Elasticsearch 和 Kibana
网友评论