css样式
什么是css
层叠样式表（Cascading Style Sheets），是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，调整颜色，背景，文字风格
css的声明
css属性和值用冒号分隔，每条样式末尾加分号，
例：color:red;
通配符：*应用到所有的元素，除<!doctype>以外
元素选择器：给某类元素标签统一应用样式
例p元素：p{color:red}
class选择器：将元素归成一类，对一类元素应用样式
例：.test{color:red}
id选择器：给元素设定一个唯一的标识符，仅单独对一个元素应用样式，通常用于js获取元素
例：#test{color:red}
权重：id选择器>class选择器>元素选择器
应用方式
1.内联样式
直接在标签元素中定义，添加属性和值<p style="color: blue;background: gray;"></p>
2.当前页面内容应用样式
在头部内容中增加style样式内容
<head> ???<style> ???????p { color : green; background : gray;} ???</style></head><body> ???<p>应用样式</p></body>3.外联样式
通过link调用其他路径当中的.css文件<link href="" rel="stylesheet">
文本样式
| 描述 | 属性：值 |
|---|---|
| 文本颜色 | color:red; |
| 背景颜色 | background:red; |
| 字符间距 | letter-spacing:2em; |
| 空格间距(适用于英文) | word-spacing:10px; |
| 字行间距 | line-height:10px; |
| 对齐方式 | text-align:center/left/right; |
| 文本缩进 | text-indent:2em; |
注：单文em是相对字体大小而定的，属于相对单位
装饰文本（decoration）:
值|描述
---|---
none|无装饰
underline|下划线
line-through|中划线
overline|上划线
注：a标签默认添加下划线，通过text-decoration:none取消掉
字体样式
| 属性 | 描述 |
|---|---|
| font-size | 字体大小 |
| font-family | 字体类型 |
| font-style | 字体风格normal/italic(倾斜) |
| font-weight | 100-300(细体)，400-500（默认），600-900（粗体） |
背景属性
| 属性 | 描述 |
|---|---|
| background-color | 背景颜色 |
| background-image:url() | 背景图片 |
| background-repeat | 背景填充，repeat(默认平铺方式)，no-repeat(不重复图像)，repeat-x(以x方向重复平铺图像)，repeat-y(以y方向平铺图像) |
| background-postion | 背景定位（x,y方向） |
| background-size | 背景大小（cover：使图像x方向拉伸到最大最大尺寸） |
css补充
三类元素
1.块级元素
a. 前后的元素都会被换行，允许设置宽高度 ?b. 浮动(float)、定位(fixed、absolute)不占空间的样式，会变为“块” (不能用margin进行居中) ?2.内联元素
a.前后元素不会被换行 ?b.不能设置宽度，也没有垂直方向的外边距 3.内联块
内联元素的块，单用拥有了块的特质（不会被换行）样式调整
display:block(块元素)inline(内联元素)inline-block(内联块);text-align:center(居中文字，内联元素，内联块)margin:0 auto（居中块元素）vertical-align:top/middle/bottom(对块中内联元素进行调整)overflow
value|desc
---|---
visible|默认
hidden|清除浮动样式，隐藏块中内容溢出部分
auto|内容溢出时，显示右侧滚动条
scroll|不管是否溢出，都显示滚动条
阴影（立体效果）
box/text-shadow:|1px|1px|1px|black
---|---|---|---|---
阴影|左右|上下|浓度|颜色
注：text-align:center对p标签可以居中，对span标签不能
圆角
css| desc
---|---
border-radius|50%以上，正方形盒子为园，长方形为椭圆
border-top-left-radius|上左
border-top_right-radius|上右
border-bottom-left-radius|下左
border-bottom-right-radius|下右
制作三角形
.box { ???width: 0; ???height: 0; ???border-top: 5px solid red; ???border-left: 5px solid transparent; ???border-right: 5px solid transparent;}css3样式
直接选择对元素进行渲染，不需要创建对象
p:first-child{}p:last-child{}p:nth-child(){}css-float(浮动)
定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素
注：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
value|desc
---|---
left|向左浮动
right|向右移动
none|默认值，元素不浮动
inherit|继承父元素float的值
块元素浮动之后脱离文档流，原来位置不占空间
上行块框浮动之后，下行文字将围绕浮动框
清除浮动
1.在浮动元素之后加上一个带有清除样式的盒子：<div class="clear"></div>.clear{clear:both;}
2.在父级元素当中加上样式overflow:hidden;
定位（position）
1.相对定位（relative） ?以自身位置作为参考进行移动 ?移动后，原先位置保留，不会有元素占据其位置 ?2.绝对定位（absolute） ?有父级定位时，以父级定位作参考进行移动，当没有时，以浏览器作为参考 ?移动后，不占据原来空间 ?3.固定定位（fixed）以浏览器做参考进行移动 ??不占据空间 ?4.层级关系（z-index） ?只允许调整定位的元素层级显示关系，值越大越靠前，值相同则覆盖显示web样式css
原文地址：https://www.cnblogs.com/zhuzq/p/9531732.html