写法有3种
直接在标签元素上添加，style属性，将样式内容写在style属性中<br><table border="1px" <font color="#d32f2f">style="background-color: #79AEF4;"</font>><br>
在页面上编写style标签，将所有样式编写再style标签中<br><br><b><font color="#0000ff">不同的样式如何针对不同的标签生效？<br>靠选择器来选取不同的元素<br><br></font></b><style><br>..............<br></style>
将style标签中的样式内容，写在单独的文件中，该文件的后缀名，叫.css<br><br>html网页需要引入该css文件<br><link rel="stylesheet" type="text/css" href="form.css"><br>
选择器（用来选取对应的元素，添加样式）
ID选择器
<font color="#f44336"><b>#box</b></font> { 。。。。。。 }<br>通过#号 + ID号选择元素
类（别）选择器
<font color="#f44336"><b>.list</b></font> { 。。。。。。。}<br>通过 . 加上 类别名称
标签选择器
直接写标签名称
自定义标签样式也可以生效
属性选择器
<font color="#f44336"><b>input[type='xxx']</b></font>
p[id=abc] 完全等价于 p#abc
组合选择器
<font color="#f44336"><b>input, #box, .abc</b></font> {<br> 。。。。。。。<br>}
<font color="#f44336"><b>div#box.abc</b></font> {<br> 当多个选择器中间没有空格的时候，选择器之间不再有层级关系，表示同一个元素<br>}<br><br>
如何判断选择器的优先级
选择元素范围越小，优先级越高<br>选择越精准，优先级越高
层级选择器
.box > p<br>>号表示选取下级的子元素
.box p<br>表示选取所有后代元素
伪类选择器
xxx: hover { ..... }<br>当鼠标滑过的时候生效
xxx:nth-child(n)<br>选择xxx元素的第n个
xxx:nth-child( even )<br>选择xxx元素的偶数
xxx:nth-child( odd )<br>选择xxx元素的奇数
xxx: checked<br>选择被选中的元素（并不是所有元素都有选中状态）
背景图
background-image：url( '图片路径' )
背景图默认是被元素的大小限制的<br>超出的部分不可见
background-size: 300px 500px;<br>背景图的宽度300px, 高度500px
背景图依然在默认情况下可以保持宽高比，设定大小时，可以只设定宽或高
background-position: left bottom;<br>将背景图位置改在左下角<br>
background-position: 200px 100px;<br>背景图位置，横坐标200px，纵坐标100px<br>
background-repeat: no-repeat;<br>禁止背景图平铺（重复）
背景图与背景颜色可以并存，如果图片没有占据整个容器，则依然能看到背景色
线性渐变：
background: linear-gradient( to left, #ccc, #fff)<br>第一个参数表示 渐变的方向<br>第二个参数表示 开始颜色<br>第三个参数表示 结束颜色
浮动
float：left/right
左浮动向左漂浮<br>右浮动向右漂浮
浮动元素脱离文档流，不占据页面空间<br>因此，它会与其他元素重叠，But！！！<br>
不会遮盖文字内容<br>（文字环绕效果）
子元素浮动会导致父元素高度塌陷，解决办法：
给父元素添加固定的高
给父元素添加 overflow: auto；
当一个宽度100%的容器浮动时，宽度会自动改为随内容变化<br>简单的说，就是没有了宽度，需要靠内容撑开
所有浮动元素会水平横向排列
如何清除浮动元素的影响
如果哪个元素不想受到前面浮动元素的影响<br>在该元素身上添加 <font color="#f44336">clear: both;</font>
盒模型
margin
margin: 10px; <br>表示边框四周都有10像素的距离
margin: 10px 15px;<br>表示上下边距为10像素，左右边距为15像素
margin: auto;<br>自动调整边距，会使得这个元素在水平方向上居中
两个元素上下边距会重叠在一起，当大小不一样的时候，以大的为准<br>左右不重叠
padding
padding: 20px;<br>表示向元素填充20px的距离，内容与边框之间会产生空隙<font color="#f44336"><br>同时元素会被撑大，也就是说，会改变元素的大小</font>
border
border: 2px solid black;<br>边框宽度2px，实线，黑色
边框类型：
solid 实线<br>
dashed 虚线
dotted 点线
定位方式
position:absolute
绝对定位的参考系，是有定位的父元素<br>当上层元素都没有定位时，则参考系为整个页面
position: relative
相对定位的参考系，是该元素本身
position：fixed
固定定位的参考系，是浏览器窗口
伪元素
一个没有标签的元素，不能独立存在，要依附于其他真实元素
元素的内容由content属性提供
伪元素的其他特性跟真实元素没有差别
xxx::after { 。。。。 }<br>xxx::before { 。。。。。 }
生成的伪元素会出现在主元素的内部，也就相当于它的子元素
阴影效果
box-shadow
#box {<br> box-shadow: 2px 2px 5px 0 black inset;<br>}<br>第一个表示阴影的横坐标<br>第二个表示阴影的纵坐标<br>第三个表示阴影的模糊值<br>第四个表示阴影的扩展值<br>第五个表示阴影的颜色<br>第六个表示阴影的方向（内/外）
