<head>
<style>
p{
background-color: red;
}
</style>
</head>
<link href="path" rel="stylesheet" type="text/css"/>
<head>
<style>
@import "path";
</style>
</head>
下述几个选择器可以组合使用
E(element)代表标签名，每个标签可以看作一个元素
以下格式写在style标签内
<div style="color:red"></div>
<div style="color:#ffee33"></div>
<div style="color:rgb(255,0,0)"></div>
<div style="color:rgb(255,0,0,0.5)"></div>
<div style="font-size:45px"></div>
<div style="font-style:itallic"></div>
<div style="font-family:Times New Roman"></div>
<div style="font-weight:lighter"></div>
background-position:
left top(10px,10px);
top center bottom (transverse);
left center right (lengthways);
#div1{
height:160px;
width:200px;
background-color:red;
background-image:url(path);
background-repeat:no-repeat;
background-size:500px,500px;
background-position:left center;
background:url(path) no-repeat 100px 100px red;
}
p{
text-align:center;
line-height:100px;
letter-spacing:5px;
word-spacing:20px;
text-transform:capitalize;
text-decoration:none;
}
当内嵌元素使用margin固定位置时，外部元素不能单单只有背景颜色，否则会无法识别边框范围，导致位置没有改变。
padding是通过扩充自身来实现位置定位的，自身大小会变。
示例
-- 将body层的外边距设为0
body{
margin:0 px;
padding:0 px;
}
示例
p{
border-style:solid;
border-color:red;
border-width:20px;
border:solid green 3px;
border:dashed green 3px;
}
示例
ul,ol{
list-style: decimal-leading-zero;
list-style: none;
list-style: upper-alpha;
list-style: disc;
list-style: circle;
}
p{
display: inline; /*Blcok tag is turned into inline tag*/
display: block; /*Hnline tag is turned into block tag*/
display: none; /*Hind the tag on the webpage*/
display: inline-block; /*Both the characters of block tag and inline tag*/
}
文档流
功能
示例
p{
float: left;
float: right;
}
如果左右两边有浮动元素，这个属性可以帮助我们实现换行
示例
p{
clear: none;
clear: left;
clear: right;
clear: both;
}
可以实现完全脱离正常文档流
示例
p{
/*Follow the standard(normal) file_stream*/
position: static;
/*Follow the standard(normal) file_stream,but can modulate the position based on the previous position by these attribute or top,right,bottom and left*/
position: relative;
/*Detach the standard file_stream,and can designate a position that can‘t follow the changes of contents of the window.*/
position: fixed;
/*Detach the standard file_stream,and base on the position where the father‘s tag is located to shift*/
position: absolute;
}
示例
overflow:hidden;
overflow:auto;
overflow:scroll;
需要设置宽高才能看见图片
解决方案
.logo{
background: url(path) no-repeat 0 0;
height: 23px;
width: 121px;
float: left;
}
important: 声明这个样式为主样式，不可被覆盖和修改
解决方案
div{
overflow:hidden;
minheight:700px;
height:auto!important;
}
概念补充
other
p{
opacity:0~1;
border-radius:0~100%;
/*Can change the relative position of text based on the position of image*/
vertical-align:50px;
vertical-align:top;
}
/*Designate the normal showing style and the hover showing style*/
a.active,a.active:hover{
background-color:yellow;
}
原文：https://www.cnblogs.com/xiaokaibiubiu/p/14870613.html