1、三种css样式
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<!--外链css样式--> ???<link rel="stylesheet" href="路径"> ???<style> ???????/*内嵌css样式*/ ???????div{ ???????????width: 100px; ???????????height: 100px; ???????????background: red; ???????} ???</style></head><body> ???<!--行间样式--> ???<div style="background: white"></div> ????<!--css Cascading Style Sheet 层叠样式表——修饰、美化网页，化妆师 ???CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。 ???行间样式 > 内嵌css样式 > 外链css样式（在style之前引入） ???外链css样式位于style之后时优先级大于内嵌css样式 ???--></body></html>2、基本选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????/* ?*通配符选择器 匹配任何元素 */ ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ????????/*元素选择器 选择相同的元素对相同的元素设置一种css样式 选中页面中所有的此元素*/ ???????div{ ???????????width: 100px; ???????????height: 50px; ???????????background: aqua; ???????} ???????p{ ???????????width: 100px; ???????????height: 50px; ???????????background: aqua; ???????} ????????/* id选择器 给标签设置一个id属性，在写样式时，在id名字前面加个 # */ ???????#box{ ???????????background: antiquewhite; ???????} ???????/* class选择器 给标签设置一个class属性，在写样式时，在class名字前面加个. ???????一般给具有相同属性的元素设置同一个class */ ???????.wrap{ ???????????background: black; ???????} ???</style></head><body> ???<!--基本选择器的优先级--> ???<!--id > class > 元素（标签）（TagName）> * --> ???<div>1</div> ???<div class="wrap">2</div> ???<div id="box" class="wrap">3</div> ???<div>4</div> ???<p>1</p> ???<p class="wrap">2</p> ???<p>3</p></body></html>3、复杂选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????/* , 群组选择器 对几个有相同属性的选择器进行样式设置 两个选择器之间必须用逗号隔开*/ ???????div,p{ ???????????width: 100px; ???????????height: 50px; ???????????background: white; ???????} ????????/* ~ 兄弟选择器 操作的对象是该元素下的所有兄弟元素*/ ???????div ~ p{ ???????????width: 150px; ???????????height: 50px; ???????????background: aquamarine; ???????} ???????/* > 子代选择器 选择某个元素下面的子元素*/ ???????div > p{ ???????????width: 150px; ???????????height: 50px; ???????????background: aquamarine; ???????} ???????/* + 相邻选择器操作的对象是该元素的同级元素选择div相邻的下一个兄弟元素选择到紧随目标元素后的第一个元素*/ ???????p + p{ ???????????width: 150px; ???????????height: 50px; ???????????background: aquamarine; ???????} ???</style></head><body> ???<!--div{$}*3 +tab（快速生成div标签并按顺序插入数字）--> ???<p>3</p> ???<div>kk</div> ???<p>4</p> ???<div>1 ???????<span>1</span> ???</div> ???<div>2 ???????<p>div1</p> ???????<p>div2</p> ???</div> ???<div>3</div> ???<p>1</p> ???<p>2</p></body></html>4、后代选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????li{ ???????????width: 50px; ???????????height: 50px; ???????????background: aqua; ???????} ???????/* 后代选择器*/ ???????div ul li{ ???????????width: 50px; ???????????height: 50px; ???????????background: aqua; ???????} ???????/*ol.box li == ol[class=box] li */ ???????ol[class=box] li{ ???????????width: 50px; ???????????height: 50px; ???????????background: aqua ; ???????} ???????#box{ ???????????background:blue; ???????} ???????div ol li.wrap{ ???????????background: black; ???????} ???</style></head><body> ???<!-- ???复杂后代选择器 ???1.先比id(最高位) ?class（中间位） tagName（个数位） ???2.id选择器个数不相等，id越多，优先级越高 ???3.id选择器个数相同,则看class,class多的优先级高 ???4.class个数相等，就看tagName个数 ???--> ???<div> ???????<ul class="box"> ???????????<li id="box" style="background: red">ul1</li> ???????????<li>ul2</li> ???????????<li>ul3</li> ???????????<li>ul4</li> ???????</ul> ???????<ol class="box"> ???????????<li>ol1</li> ???????????<li>ol2</li> ???????????<li class="wrap">ol3</li> ???????</ol> ???</div> ???<ul> ???????<li>ul1</li> ???????<li>ul2</li> ???????<li>ul3</li> ???????<li>ul4</li> ???</ul> ???<ol> ???????<li>ol1</li> ???????<li>ol2</li> ???????<li>ol3</li> ???</ol></body></html>5、伪类选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????/*LoVeHAte爱恨原则*/ ???????a:link{/*link 未被点击的链接*/ ???????????color: blueviolet; ???????} ???????a:visited{/*已被点击的链接*/ ???????????color: blue; ???????} ???????a:hover {/*鼠标悬停其上的元素 */ ???????????color: red; ???????????background: aqua; ???????????font-size: 20px; ???????????/*cursor: default 默认（a标签默认手指，其他标签默认箭头）*/ ???????????/*cursor: pointer; 手指*/ ???????????/*cursor: wait; 等待*/ ???????????/*cursor: help;帮助*/ ????????} ???????a:active{/*鼠标已经再其上按下但是还没有释放的元素*/ ???????????color: yellowgreen; ???????} ???????div{ ???????????width: 50px; ???????????height: 50px; ???????????background: aqua; ???????} ???????/*改变的是div本身*/ ???????/*!*div:hover{*! */ ???????????/*width: 100px;*/ ???????????/*height: 100px;*/ ???????????/*background: bisque;*/ ???????/*}*/ ???????p{ ???????????width: 20px; ???????????height: 20px; ???????????background: red; ???????????display: none; ???????} ???????/*改变的是div的后代 p元素*/ ???????div:hover p{ ???????????width: 30px; ???????????height: 30px; ???????????background: blue; ???????????display: block; ???????} ???</style></head><body> ???<a href="http://www.baidu.com">百度</a> ???<div> ???????<p></p> ???</div></body></html>6、css文字属性
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????/*font-family 字体类型浏览器默认的字体是微软雅黑，字体中有多个字体的时候， ???????如果前面的字体没有就使用后面的字体*/ ???????.box1{ ???????????font-family: Algerian,"宋体"; ???????} ????????/* ??????font-size ??字体大小 ??????????单位 px rem ?em ?% ??????????px ??谷歌浏览器默认字体大小16px,最小是12px ??????????rem ?相对于html(根标签)的字体大小 ??????????em ??等于父级的字体尺寸——相对于父级字体大小而言的 ??????????% ???相对于父容器中字体的%调整 ?这个要知道 ??????*/ ???????.box2{ ???????????font-size: 20px; ???????} ???????.box3{ ???????????font-size: 12px; ???????} ???????.box4{ ???????????font-size: 2rem; ???????} ???????#box{ ???????????font-size: 30px; ???????} ???????#box div{ ???????????/*font-size: 2em;*/ ???????????font-size: 50%; ???????} ???????/* ???????font-weight 字体粗细 ???????关键字 ???????????normal 默认字体 ???????????lighter 较细 ???????????bold 加粗 ???????????bolder 很粗 ???????给值 ???????????只能100-900的整百数 ???????????400相当于正常的 ???????????700相当于bold ???????*/ ???????.box5{ ???????????font-weight: bold; ???????} ???????.box6{ ???????????font-weight: 700; ???????????font-style: italic; ???????} ???????/* ????????font-style ?字体类型 ????????normal 默认 文字正常 ????????italic ?文字斜体（属性） ????????oblique ?文字斜体 ???????*/ ???????/* ???????color ?文字颜色 ???????关键字 ???????英文单词 ?red green ???????16进制（0-9 a-f） ???????????#5544aa ?#54a #abd456 ???????????#dddddd ?#ddd ???????rgb(0-255,0-255,0-255) ???????????r red ???????????g green ???????????b blue ???????rgba(0-255,0-255,0-255,0-1) ???????????r red ???????????g green ???????????b blue ???????????a alpha(透明度) ???????????????0 完全透明 ???????????????1 完全不透明 ???????*/ ???????.box7{ ???????????/*color: aqua;*/ ???????????color: rgb(224, 62, 69); ???????} ???????.box8{ ???????????/*color: #222add;*/ ???????????color: rgba(224, 62, 69,0.2); ???????} ???</style></head><body> ???<div class="box1">hello 001 abc</div> ???<div class="box2">hello 001 abc</div> ???<div class="box3">hello 001 abc</div> ???<div class="box4">hello 001 abc</div> ???<div class="box5">hello 001 abc</div> ???<div class="box6">hello 001 abc</div> ???<div class="box7">hello 001 abc</div> ???<div class="box8">hello 001 abc</div> ???<div id="box"> ???????<div>hello 001 abc</div> ???</div></body></html>7、css文本属性
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
???<style>
???????* {
???????????margin: 0;
???????????padding: 0;
???????}
???????/*
????????white-space: ?换行方式
??????????normal 正常换行
??????????nowrap 不换行
????????*/
???????/*
??????text-indent 首行缩进（em）
??????line-height 行高（和盒子高度一样时垂直居中）
??????letter-spacing 字距
??????word-spacing 词距
??????*/
???????/*
?????text-align 文本水平对齐方式
?????left 默认值 向左对其
?????right
?????center ??
?????*/
???????/*
?????text-transform 文本大小写
?????none 默认值 无转换发生
?????uppercase ?转换成大写
?????lowercase ?转换成小写
?????capitalize 将英文单词的首字母大写
?????*/
???????p {
???????????width: 400px;
???????????background: aqua;
???????????/*white-space: nowrap;*/
???????????text-indent: 2em;
???????????line-height: 30px;
???????????/*letter-spacing: 5px;*/
???????????/*word-spacing: 20px;*/
???????????/*text-transform: uppercase;*/
???????????/*text-transform: lowercase;*/
???????????text-transform: capitalize;
???????}
???????div {
???????????width: 50px;
???????????height: 50px;
???????????background: antiquewhite;
???????????line-height: 50px;
???????????text-align: center;
???????????/*text-decoration: underline;*/
???????????/*text-decoration: overline;*/
???????????text-decoration: line-through;
???????}
???????/*
?????text-decoration 下划线 删除线 上划线
?????none ?默认值，可以用这个属性去掉已经有下划线或者删除线或者上划线的样式
?????underline ?下划线，一般用于文章的重点表明
?????overline ??上划线
?????line-through ?删除线
?????*/
???????a {
???????????text-decoration: none;
???????}
???</style>
</head>
<body>
<p>Python [1] （英国发音：/?pa?θ?n/ 美国发音：/?pa?θɑ?n/）, 是一种面向对象的解释型计算机程序设计语言，
???由荷兰人Guido van Rossum于1989年发明，第一个公开发行版发行于1991年。</p>
<div>1</div>
<a href="#">55555</a>
</body>
</html>
8、css背景属性
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????/* ?????background-color 背景色 ?????background-image 背景图片 ?????background-repeat 背景平铺 ??????????repeat 平铺 默认 ??????????repeat-x ?平铺x ??????????repeat-y ?平铺y ??????????np-repeat ?不平铺 ??????????注意：只有背景图片的宽高小于被设置的元素的宽高，才会有平铺效果 ????background-position 背景位置 x轴 y轴 ???????x轴 left center right ???????y轴 top center bottom ???????如果只给一个值，默认在x轴，y轴默认center(50%) ???????% px ???background-size 背景大小 ???% px ???给一个值的时候，默认x轴，y轴默认auto auto会等比缩放 ???cover 等比例缩放直到铺满x,y轴 可以铺满整个框 但是不一定能看到完整的图片 ???contain 等比例缩放x轴或者y轴其中的一个方向 不一定铺满 但是可以看到整个图片 ??*/ ???????div{ ???????????width: 520px; ???????????height: 700px; ???????????border: 1px solid red; ???????????background-color: aqua; ???????????background-image: url("img/0.jpg"); ???????????background-repeat: no-repeat; ???????????/*background-position: 10px 50%;*/ ???????????/*background-size: 180px 176px;*/ ???????????/*background-size: cover;*/ ???????????/*background-size: contain;*/ ???????????/*background: aqua url("img/0.jpg") no-repeat 10px center/300px 298px;*/ ???????????/*background: color image repeat position/size*/ ???????} ???</style></head><body> ???<div></div></body></html>9、盒子模型
盒子是由内容(content)、内边距(padding)、外边距(margin)、边框(border)组成的
①边框（border）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????/* ???????盒子模型 ???????盒子是由内容(content)、内边距(padding)、外边距(margin)、边框(border)组成的 ???????*/ ???????/* ???????border:边框 类型 颜色; ???????border-width ???????border-style solid实线 dashed虚线 dotted点线 double双边框 ???????border-color ???????一个值的时候： 代表四个方向值一样 上右下左（顺时针） ???????二个值的时候： 上下 ?右左 ???????三个值的时候： 上 右左 下 ???????四个值的时候： 上 ?右 下 左 ???????border-width 边框大小 ???????border-top-width 上边框大小 ???????border-right-width 右边框大小 ???????border-bottom-width 下边框大小 ???????border-left-width 左边框大小 ???????border-top-width:0 ???????border-style 边框样式 ???????border-top-style ?顶部边框类型 ???????border-right-style 右边边框类型 ???????border-bottom-style 底部边框类型 ???????border-left-style 左边边框类型 ???????border-color 边框颜色 ???????border-top-color ?顶部边框颜色 ???????border-right-color 右边边框颜色 ???????border-bottom-color 底部边框颜色 ???????border-left-color 左边边框颜色 ????????*/ ???????div { ???????????width: 150px; ???????????height: 250px; ???????????/*border: 10px solid red;*/ ???????????border-width: 5px 10px 15px 20px; ???????????border-style: solid dotted dashed double; ???????????border-color: red blue aqua fuchsia; ???????} ???</style></head><body><div></div></body></html>②内边距（padding）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ????????/* ???????padding ?内边距，边框与内容之间的距离 ????????一个值的时候： 代表四个方向值一样 上右下左（顺时针） ????????二个值的时候： 上下 ?右左 ????????三个值的时候： 上 右左 下 ????????四个值的时候： 上 ?右 ?下 左 ???????*/ ???????div{ ???????????width: 300px; ???????????height: 200px; ???????????border: 1px solid red; ???????????/*padding: 20px;*/ ???????????/*padding-left: 50px;*/ ???????????/*padding-top: 50px;*/ ???????????padding: 50px 0 50px; ???????} ???</style></head><body> ???<div> ???????padding ?内边距，边框与内容之间的距离 ????????一个值的时候： 代表四个方向值一样 上右下左（顺时针） ????????二个值的时候： 上下 ?右左 ????????三个值的时候： 上 右左 下 ????????四个值的时候： 上 ?右 ?下 左 ???</div></body></html>③外边距（margin）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????/* ???????margin 外边距 元素与其他元素的距离（边框以外的距离） ???????一个值的时候： 代表四个方向值一样 上右下左（顺时针） ????????二个值的时候： 上下 ?右左 ????????三个值的时候： 上 右左 下 ????????四个值的时候： 上 ?右 ?下 左 ????????margin: auto; 快速左右居中 ????????垂直方向： margin-bottom,margin-top ??取两者之间的较大值 ????????水平方向： margin-left,margin-right ??取两者的和 ????????overflow:hidden; 超出隐藏，解决内边距重叠问题 ????????*/ ???????div{ ???????????width: 300px; ???????????height: 200px; ???????????background: antiquewhite; ???????????/*border: 1px solid red;*/ ???????????/*margin: 50px;*/ ???????????/*margin: auto;*/ ???????????/*display: inline-block;*/ ???????????overflow: hidden; ???????} ???????.box{ ???????????/*margin-top: 100px;*/ ???????} ???????p{ ???????????width: 50px; ???????????height: 50px; ???????????background: aqua; ???????????/*margin: 100px;*/ ???????????margin: 100px; ???????} ???</style></head><body> ???<div> ???????<p></p> ???</div> ???<div class="box"></div></body></html>④盒子大小
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????div{ ???????????width: 150px; ???????????height: 150px; ???????????background: aqua; ???????????border: 10px solid red ; ???????????padding: 20px; ???????????margin: 50px; ???????} ???????/* ???????????盒子大小=样式宽 + 内边距 + 边框 ???????????盒子宽度=左border+右border+width+左padding+右padding ???????????盒子高度=上border+下border+height+上padding+下padding ???????*/ ???</style></head><body> ???<div></div></body></html>css基础
原文地址：https://www.cnblogs.com/wangwei13631476567/p/9160839.html