css层叠样式表(英文全称：Cascading Style Sheets)是一种用来表HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。简单来说，css就是修改html样式，传说中的美图神器。
1.外部样式表
<!-- 引入外部样式 --> <link rel="stylesheet" type="text/css" href="css/index.css" />2.内部样式表
<!-- 内部定义样式 --> <style> .all{ height:300px; width:500px; background:#999; } </style>3.行内样式表
<!-- html标签内定义样式 --> <div style="height:300px; width:500px; background:#999;"></div>css中，只有一种东西：“选择器”。选择器，有3种： 1.标签选择器
<style> input{ } </style>2.id选择器
<style> #id{ } </style>3.类选择器
<style> .class{ } </style>三种选择器，除了最开始的符号不一样内容完全相同，都是一个接一个的声明，也就是 属性名：属性值; … … … … … … 到这里前端二傻也就基本完事了。。。。。(mmp，这让人怎么写😭)。 其实，css对于初级的选手来说学起来不需要记太多(好吧，这句话是骗你们的🐕)，仅需要记住选择器的概念，还有就是清晰的记忆必会的属性样式。 至于css样式，作为一个后端狗也背不下这么些，只能挑一些重点和大家分享一下。
1.字体属性
<body> <h2 class="ziti">字体样式</h2> </body> <style> .ziti{ font-size:100px; /* 字体大小 */ font-family: '楷体'; /* 字体 */ font-style: italic; /* 字体倾斜 */ font-weight: 900; /* 字体粗细 */ } </style>大小表示：px像素，em个字的大小，pt个点的大小。
2.文本属性
1）line-height 行间距
语法：line-height:长度值|百分比；line-height属性用于设置行间距，就是行与行之间的距离（一行文字的高度），即字符的垂直间距，一般称为行高。 line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，写数字表示当前文字的倍数。实际工作中使用最多的是像素px。2）text-align 水平对齐方式
语法：text-align:left | right | center | justify相当于html中的align，左中右和根据情况。3）text-decoration 文本装饰
语法：text-decoration:underline | overline | line-through | blink | none下划线 | 上划线 | 贯穿线 | 闪烁 | 不改变4）color 颜色
语法：color:red;#+6位16进制的数，也可以英文单词（只有16个可以识别）当前文字… … 卧槽啦！还有很多，使用的时候直接查看w3school。 附上链接: https://www.w3school.com.cn/index.html. 3.列表属性 1). list-style-type列表样式
语法list-style-type：square | none | disc | circle | decimal …方块 | 无标记 | 实心圆 | 空心圆 | 数字…2). list-style-image列表样式(图片)
语法 list-style-image : url(xxx.gif)url里面放图片的路径，就能显示样式3). list-style-position列表样式(位置)
语法 list-style-position:inside | outsideinside列表项目标记放置在文本以内，且环绕文本根据标记对齐。| outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 哎。。。前端这种东西真的多。。。。。猛虎落泪呀！4.浮动属性
float:none|left|right 表示向哪里浮动：没有|左|右clear:none|left|right|both 表示不能向哪一侧浮动：没有|左|右|都不行（妈的，这个both有啥意义吗！？）内容不是太多呀。。。。。
5.尺寸属性
尺寸属性也就是width（宽）height（高），在后面跟上像素，这是对于元素的限定。 例如： <style> img{ width: 100px; /*图片的宽度*/ height: 100px; /*图片的高度*/ } </style>6.背景属性
background-color背景颜色 可以使用#十六进制的表达方式，单词，还有个transparent表示透明背景颜色。 body{ background-color: aquamarine; /* background-color: transparent; */ /*矫情🐕*/ } background-image背景图像 body{ background-image:url("/img/1.png"); /* url图片路径 默认是平铺*/ background-repeat:repeat; /*默认平铺，效果壮观*/ } background-repeat重复方式 body{ background-repeat:repeat-x; /*背景图片水平方向平铺*/ background-repeat:repeat-y; /*背景图片垂直方向平铺*/ background-repeat:no-repeat; /*背景图片只显示一次*/ background-repeat:inherit; /*规定应该从父元素继承background-repeat属性的设置*/ } background-position图片的起始位置 body{ background-position：center|right|left|top|bottom； /*简单的左中右上下*/ background-position：400px 400px /*以左上角为原点，分别距离x，y轴的距离*/ /*也可以使用百分数表示，我觉得像素就挺好*/ }妈的，心情逐渐暴躁。。。。。
7.盒子属性 这个盒子属性我觉得比较好搞，打开谷歌浏览器，随便一个页面，F12，点击Elements就会看到这个盒子属性。 四个属性：border边框，padding填充(内边距)，margin边界（外边距），context内容（图上最中间的部分）。
border - ：三个属性width（四个方向不同的宽度）。 color（上右下左的顺序填充颜色）。 style（常用值：none 没有效果，dotted点状边框，dashed虚线边框，solid 实现边框，double双实线边框）。 img{ width: 100px; height: 100px; border-width: 15px; border-color: aqua red blue greenyellow; border-style: dashed; } padding - :宽度属性 img{ width: 100px; height: 100px; border-width: 15px; border-color: aqua red blue greenyellow; border-style: dashed; padding: 10px 20px 50px 100px; /*顺序是上右下左*/ }margin - :宽度属性 和padding类似一个内边距一个外边距。
context 表示内容（爱写些啥写些啥）
8.定位属性
position 属性static，absolute，relative，fixed。
static(默认，没有定位)absolute（绝对定位），相对于整个页面而言，于上下级的代码块无关relative（相对定位），上下所有的距离设置，都是相对于上级块。float（浮动）z-index属性，默认是0，属性为整数正负都可以，谁的值大谁在上面。9.链接属性
a:link|visited|hover|active
a:link 未访问的链接a:visited以访问的链接a:hover鼠标移到连接上a:active鼠标选中激活链接（真的浮夸，一个链接搞出这么多东西。。。。）
不行了，我要去学Java，前端太难了。。。。 哈哈，开个玩笑，学无止尽，掌握越多的技术，才能在这个社会中有一席之地，css写的不全，后续会补充上。 笑傲江湖里的令狐冲说过：有些事情本身我们无法控制，只好控制自己。 靠自己，努力做到最好，加油！
