初识CSS
什么是css：
- 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
- CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
选择器
1.标签上直接设置style属性
<p style="color: red">直接标签里面写</p>
2.id选择器
???<style> ???????#i1{ ???????????color: green; ???????} ???</style></head><body> ???<p id="i1">以#开头命名</p></body>3.class选择器
<style> ???????.c1{ ???????????color: green; ???????} ???</style></head><body> ???<p class="c1">以点开头命名</p>
</body>4.标签选择器
<style> ???????p{ ???????????background-color: red; ???????} ???</style></head><body> ???<p >以标签命名</p></body>5.关联选择器（层级选择器）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????/*中间用空格隔开*/ ???????span div{ ???????????background-color: red; ???????} ???</style></head><body> ??<div>第一层</div> ???????<span> ???????????<div>span里面的div添加样式</div> ???????</span> ???<div>第二层</div></body></html>6.组合选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????/*中间用逗号隔开*/ ??????h1,h2,h3{ ??????????background-color: #dddddd; ??????} ???</style></head><body> ???<h1>第一个</h1> ???<h2>第二个</h2> ???<h3>第三个</h3></body></html>7.属性选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ??????input[name="derek"]{ ??????????width: 20px; ??????????height: 20px; ??????} ???</style></head><body> ???<input type="text" name="derek"> ???<input type="password" name="pwd"></body></html>根据属性进行筛选匹配，只有name="derek"的input标签才匹配上对应的样式
引用方法
1.样式优先级
优先级
style优先级最大，其它的按编写顺序，越靠近越优先
2.外部样式引用方法
<link rel="stylesheet" href="common.css">
边框
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1{ ???????????height: 48px; ??#边框高度 ???????????width: 80%; ???????????border: 1px dotted black; ???#边框宽度 样式 颜色 ???????????font-size: 30px; ????????????#字体大小 ???????????line-height: 48px; ??????????#设置跟边框高度值一样，里面的字会垂直居中 ???????????text-align: center; ?????????#水平居中 ???????} ????????</style></head><body> ???<div style="border: 1px solid red">第一个边框</div> ??<div class="c1">第二个边框</div></body></html>浮动（float）
默认块级标签会独占一行，用float可以让块级标签浮动在一起
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1{ ???????????width: 20%; ???????????background-color: red; ???????????float: left; ???????} ???????.c2{ ???????????width:60%; ???????????background-color: black; ???????????float: right; ???????} ???</style></head><body> ???<div class="c1">左边</div> ???<div class="c2">右边</div></body></html>float实例
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.pg-header{ ???????????height: 38px; ???????????background-color: #dddddd; ???????????line-height: 38px; ???????} ???????.c2{ ???????????width: 98px; ???????????height: 30px; ???????????border: 1px solid green; ???????????float: left; ???????} ???</style></head><body style="margin: 0 auto"> ???<div class="pg-header"> ???????<div>收藏本站</div> ???????<div> ???????????<a>登陆</a> ???????????<a>注册</a> ???????</div> ???</div> ???<div style="width: 300px;border: 1px solid red;"> ???????<div class="c2"></div> ???????<div class="c2"></div> ???????<div class="c2"></div> ???????<div class="c2"></div> ???????<div class="c2"></div> ???????<div style="clear:both"></div> ???</div></body></html>注：<body style="margin: 0 auto;">消除与浏览器顶部之间的缝隙；<div style="clear: both"></div>子边框浮动后，显示父边框的边框线
display
<body> ???<!--改成行内标签--> ???<div style="display: inline; font-size: 12px !important; line-height: 1.5 !important;">>1</div> ???<!--改成块级标签--> ???<span style="display: block; font-size: 12px !important; line-height: 1.5 !important;">>2</span> ???<!--inline-block具有inline，默认自己有多少占多少--> ???????????????<!--具有block,可以设置高度，宽度，padding,margin--> ???<span style="display: inline-block; font-size: 12px !important; line-height: 1.5 !important;">>3</span> ???<!--默认不显示--> ???<div style="display: none">不显示</div></body>
边距
1.外边距margin
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1{ ???????????border: 1px solid red; ???????????height: 70px; ???????} ???????.c2{ ???????????background-color: green; ???????????height: 50px; ???????????/*margin-top: 25px;*/ ???????} ???</style></head><body> ???<div class="c1"> ???????<div class="c2"></div> ???</div></body></html>注：margin-top：25px表示外边距，子边框与父边框top之间的距离为25px
2.内边距padding
padding
注：padding-top：25px表示内边距，子边框内自己与top之间的距离为25px
position
1.position:fixed
-->固定在页面的某个位置
返回顶部
2.让头部标题栏固定不动
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.pg-header{ ???????????height: 48px; ???????????background-color: black; ???????????color: #dddddd; ???????????/*固定不动*/ ???????????position: fixed; ???????????top: 0px; ???????????left: 0px; ???????????right: 0px; ???????} ???????.pg-body{ ???????????height: 5000px; ???????????margin-top: 50px; ???????????background-color: #eee; ???????} ???</style></head><body> ???<div class="pg-header">头部</div> ???<div class="pg-body">内容</div></body></html>3.实现三层
z-index -->层级顺序
opticy -->透明度（0~1）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1{ ???????????z-index: 10; ???????????position: fixed; ???????????/*让最外面一层的div居中*/ ???????????top: 50%; ???????????left: 50%; ???????????height: 400px; ???????????width: 500px; ???????????margin-left: -25px; ???????????margin-top: -20px; ???????????background-color: black; ???????} ???????.c2{ ???????????z-index: 9; ???????????position: fixed; ???????????background-color: black; ???????????top: 0; ???????????bottom: 0; ???????????right: 0; ???????????left: 0; ???????????opacity: 0.5; ???????} ???????.c3{ ???????????height: 5000px;background-color: red; ???????} ???</style></head><body style="margin: 0 auto"> ???<div class="c1"></div> ???<div class="c2"></div> ???<div class="c3"></div></body></html>overflow
1.over:auto
-->超出范围则出现滚动条
<div style="height: 200px;width: 140px;overflow: auto;"> ???????<img src="fanye.jpg" /> ???</div>
2.over:hidden
-->超出范围则隐藏
<div style="height: 200px;width: 140px;overflow: hidden;"> ???????<img src="fanye.jpg" /> ???</div>
hover(伪类)
抽屉网顶部条栏
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.pg-header{ ???????????position: fixed; ???????????right: 0; ???????????left: 0; ???????????top: 0; ???????????height: 48px; ???????????background-color: #2459a2; ???????????line-height: 48px; ???????} ???????.pg-body{ ???????????margin-top: 50px; ???????} ???????.u{ ???????????width: 980px; ???????????margin: 0 auto; ???????} ???????.pg-header .menu{ ???????????display: inline-block; ???????????padding:0 10px; ???????????color: white; ???????} ???????/*鼠标移动到当前标签上面时，以下css属性才生效*/ ???????.pg-header .menu:hover{ ???????????background-color: blue; ???????} ???</style></head><body> ???<div class="pg-header"> ???????<a class="logo">logo</a> ???????<a class="menu">全部</a> ???????<a class="menu">42区</a> ???????<a class="menu">段子</a> ???</div> ???<div class="pg-body"> ???????<div class="u">正文</div> ???</div></body></html>background-image
background-repeat有四个属性repeat（默认，重复占满）,no-repeat（不重复）,repeat-x（只横着重复放）,repeat-y（只竖着重复放）
background-position-x表示看背景图片的窗口水平方向想右移动，background-position-y表示看背景图片的窗口垂直向下移动
<head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1{ ???????????background-image: url(‘fanye.jpg‘); ???????????height: 700px; ???????????width: 700px; ???????????border:1px solid red; ???????????background-repeat: no-repeat; ???????????background-position-x:100px; ???????????background-position-y:100px; ???????} ???</style></head><body> ???<div class="c1"></div></body></html>上面的可css简写成
<div style="background:url(‘fanye.jpg‘) 100px 100px no-repeat;height: 700px;width:700px;border:1px solid red;"></div>
2.CSS
原文地址：https://www.cnblogs.com/Anderson-An/p/9977109.html