三种声明方式：
标签内style声明，内联式
HTML头部声明，内部
<style>
.cssname1{}
#idname1{}
</style>单独的CSS文件声明，外部，需要在html里调用：
<head>< link rel="stylesheet" type="text/css" href="mystyle.css">< /head>
优先级：标签内style>组合定义/层定义>。定义>#定义（还遵循定义时就近原则）
html类别：行标签（a\span）、块标签(div)
块标签：点据一整行、有position\padding属性
行标签：占据一部分、没有position\padding属性
行块转换：display属性，inline转换为行、block转换为块、inline-block拥有块属性的行标签。
CSS中的伪元素：
语法： :伪元素名
link\visited\active\hover\focus\first-letter\first-line\first-child\before\after\lang
CSS基本语法：
选择器{
属性1:值;
属性2:值;
......
}
1、选择器：
标签名1 [标签名2] [标签名3]......：根据标签顺序匹配嵌套标签
.选择器名：在标签的class属性中调用
#idname ：id是标签的属性，#应用于所有标签id为idname的标签
[属性=值]：pname是标签的属性，可以是任何属性
复杂一点的选择器：
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
ul标签的pagenation类下的li标签a标签的active类属性:
1、background:
参数顺序：
backgournd:RGB(255,255,255) url('image/1.jpg') no-repeat right top; 单独声明一项：
background-color:颜色， #DDDDD/RGB(255,255,255)/red
background-image:背景图片，url('images/1.jpg')
background-repeat:图片重复，默认重复，no-repeat不重复，repeat-x水平重复，repeat-y垂直重复
background-attachment:背景固定，默认scroll不固定，fixed固定（字动图不动），inherit背景继承父元素的属性。
background-position:背景图片位置，left,right,top,bottom,center
background-size:背景图片大小，（长 宽）
background-clip:背景大小匹配，border-box匹配到边框最外侧大小，padding-box匹配到内侧，content-box匹配到文本
2、link定义超链接的式样
注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。
注意： a:active 必须在 a:hover 之后。
a:link{}：正常，未访问的链接
a:visited{}：访问过的链接
a:hover{}：鼠标放在链接上时
a:active{}：鼠标点击时
为不同的链接，定义不同的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex3:hover,a.ex3:active {background:red;}
a.ex4:hover,a.ex4:active {font-family:monospace;}
a.ex5:visited,a.ex5:link {text-decoration:none;}
a.ex5:hover,a.ex5:active {text-decoration:underline;}
</style>
</head>
<body>
<p>将鼠标移至链接上查看其样式改变.</p>
<p><a class="ex1" href="/css/">This link changes color</a></p>
<p><a class="ex2" href="/css/">This link changes font-size</a></p>
<p><a class="ex3" href="/css/">This link changes background-color</a></p>
<p><a class="ex4" href="/css/">This link changes font-family</a></p>
<p><a class="ex5" href="/css/">This link changes text-decoration</a></p>
</body>
</html>创建一个链接框：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a:link,a:visited
{
display:inline-block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="/css/" target="_blank">注册</a>
<a href="/css/" target="_blank">登陆</a>
</body>
</html>3、margin、border、padding、content。
边距，边框，填充，和实际内容，用来定义元素的位置。
margin:高 宽
可分别定义
margin-right:
border:宽 线类型 颜色
类型：dotted(点)、dashed（虚线）、solid、double、groove（3D）、ridge（3D）、inset（3D）、outset（3D）
可分别定义不同边框的式样
border-bottom-style: border-bottom-color: border-bottom-width: border-style:solid; border-radius:5px; 倒角 border-radius: 15px 50px 30px 5px;定义不同角度 border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
padding:上 右 下 左，只写一个参数情况下，所有填充都是
默认padding会计算在border里，也就是说padding会撑大标签，使用box-sizing:border-box来限制（推荐所有元素里使用）
可分别定义：
padding-left:
width:
height:
border:
4、CSS多列(类似WORD分栏功能)
column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
columns 设置 column-width 和 column-count 的简写
5、display（显示）
控制元素显示，有三个属性：
block:把行标签变成块
inline:把块标签变成行
inline-block:行标签具有块属性，（不独占一行）
none:元素不可见
6、position(定位)
使用定位后，使用top\bottom\left\right来改变元素位置，（以元素的左上角为基点）
不定义position，以上定义无效
static:(默认)没有定位，静态定位的元素不会受到 top, bottom, left, right影响。
fixed:元素的位置相对于浏览器窗口是固定位置。（右下角的浮动广告效果）
relative:相对定位元素的定位是相对其正常位置。根据元素当前位置，进行偏移。
absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
通常父元素调置relative、子元素设置absolute来进行定位。
sticky:基于用户的滚动位置来定位。
元素居中技巧：position的top\left设置50%，使用margin-top、margin-left设置元素大小的负一半
width:500px; height:700px; position:fixed; left:50%; right:50%; margin-left:-250px; margin-top:-350px;
7、overflow overflow-x overflow-y（超出显示范围的显示方式）
scroll：始终显示滚动条
hidden:超出部分隐藏
auto:如果超出，显示滚动条，如果不超不显示滚动条
visible:(默认)超出，依然显示内容。
8、clip（裁剪）
指定一个绝对定位的元素，该尺寸应该是可见的，该元素被剪裁成这种形状并显示。
注意：: 如果先有"overflow：visible"，clip属性不起作用。
页面小图标效果，可以使用clip，防止图片过多产生多个请求。
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
div{
background-color:yellow;
background-clip:content-box;
}9、z-index（元素显示顺序）
可以为负数，数值越大显示位置越靠前。
10、float（元素浮动）
会使元素向左或向右移动，其周围的元素也会重新排列。
浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
left：左浮动
right：右浮动
none：不浮动
inherit：从父元素继承 float 属性的值。
浮动会产生元素串位，在上层使用clear:both清除
同时，FLOAT还要在父标签设置position:relative，在子标签设置position:absolute，进行定位，子标签超出父标签，父标签没设置高度时自动调整，
10、text:
text-align
text-align-last
text-decoration 定义下划线样式
text-decoration-color
text-decoration-line
text-decoration-style
text-indent 行首缩进
text-overflow ：text-overflow属性指定当文本溢出包含它的元素，应该发生什么。
text-overflow: clip|ellipsis|string;elipsis超出显示省略号，string自定义显示字符
text-shadow ：文字阴影text-shadow: 2px 2px #ff0000;
text-transform ：控制文本的大小写
其它：
block加阴影
角度 阴影距离 扩散范围 阴影大小
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
鼠标形状：
cursor: pointer;
透明度：0最小、1最大
opacity: 1;
标签位移：
transform: translateY(10px);
transform: translateX(10px);
其它参考：
https://www.runoob.com/c***ef/css3-pr-align-content.html
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
