CSS
一、CSS用法及选择器
1、css的用法：
（1）内联样式
<div style="width: 200px; height: 20px;"></div>
（2）内部样式
<style type="text/css"></style>
（3）外部样式表
<link rel="stylesheet" type="text/css" href=""/>
（4）@import
import url()
样式优先级：内联样式>内部样式>外部样式表
（1）class选择器 .class名 。注意：区分大小写
（2）属性选择器 [ 属性名] 注意：属性选择器使用时要一一匹配，使用~=时不用一一匹配。
1 <style type="text/css"> 2 [type]{ 3 color: red; 4 } 5 6 [class~=wrapper]{ 7 color: blue; 8 } 9 10 </style> 11 </head> 12 <body> 13 <form action="http://www.baidu.com/s"> 14 <input type="text" name="wd"> 15 <input type="submit" value="百度一下"> 16 </form> 17 <div class="wrapper first odd">wrapper first odd</div> 18 <div class="wrapper second even">wrapper second even</div> 19 <div class="wrapper">wrapper</div>
（4）ID选择器：#xxx 唯一标识。
（5）伪类选择器：鼠标不同放置状态的不同表现
（5.1）a:link 未访问状态
（5.2）a:visited 访问后的状态
（5.3）a:hover 鼠标选定状态
（5.4）a:active 激活选定状态
注意：定义时的顺序必为此顺序
（6）后代选择器（包含选择器）空格
例如：
1 li span{}; 2 #div p{}; 3 li a:hover{};
（7）子代选择器 >
例如：
h1>em{};
注意：子代选择器使用时不能隔代继承
（8）通用（配）选择器 *
（9）组合选择器 用逗号隔开即可
例如：
p,#div,.box{};
1、元素尺寸
（1）宽度：width:value
（2）高度：height:value
（3）尺寸单位：px（常用）、%（常用）、em、rem
注意：em指其font-size的大小，默认1em=16px
rem指其根节点的font-size的大小
2、边框（border）
（1）四周边框：
border-width:value;
（2）边框风格：
border-style:none、solid、double、dotted;
（3）边框颜色：
border-color:value;
（4）边框设置：
1 border:width style color; 2 border:2px solid red;
（5）顶部边框：
border-top-width:width;
注意：其风格、颜色设置一样；底部、左边、右边同理。
（6）边框圆角：
border-ridius;
3、外边距（margin）
（1）四周设置外边距与四周边框一致
margin:value;
（2）可以分别设置四周的外边距
margin:value1,value12,value3,value4;/*分别是上左下右*/
（3）块级元素水平居中显示
margin:0px aoto;/*value值可自定义*/
（4）外边距折叠
当两个元素外边距相接，这些外边距会合并为一个外边距，就是最大的那个外边距，不是两个元素的外边距之和
4、内边距（padding）
（1）四周内边距与四周边距一致
padding：value;
（2）可以分别设置四周的内边距
padding:value1,value12,value3,value4;/*分别是上左下右*/
5、盒子模型
（1）标准盒模型
宽度：margin-left+border-left+padding-left+content+padding-right+border-right+margin-right
高度：margin-top+border-top+padding-top+content+padding-bottom+border-bottom+margin-bottom
注意：margin不计入实际大小，影响盒子外部空间，盒子的大小范围到border为止。
（2）怪异（替代）盒模型
宽度：border-left+padding-left+content+padding-right+border-right
高度：border-top+padding-top+content+padding-bottom+border-bottom
注意：怪异盒模型的宽度都是可见宽度，若想使用怪异盒模型，设置 box-sizing:border-box 即可
（3）盒模型和内联盒子
上述两个盒模型完全适应于块级盒子，有些属性适应于内联盒子，如我们在一个段落中使用了 <span> ，并对其应用了宽度、高度、边距、边框和内边距。可以看到，宽度和高度被忽略了。外边距、内边距和边框是生效的，但它们不会改变其他内容与内联盒子的关系，因此内边距和边框会与段落中的其他单词重叠
6、display
（1）该属性规定元素应该生成的框的类型
（2）display属性值
1 dispaly:block;/*元素呈现块元素特征，此元素前后会带有换行符*/ 2 dispaly:inline;/*元素呈现行内元素特征，元素前后没有换行符*/ 3 dispaly:inline-block;/*元素呈现行内并保持宽和高的属性，行内块元素*/ 4 dispaly:none;/*元素不做呈现，不占网页空间。注意与visibility：hidden不同，visibility不显示但占用网页空间。*/
7、背景样式（background）
（1）背景颜色
background-color:#0000FF;
color：#0000FF、red、rgb（255，255，255）、rgba（255，255，255，.5）、hsl（色相：0~360，饱和度：0%~100%，透明度：0%~100%）、hsla（色相：0~360，饱和度：0%~100%，透明度：0%~100%，透明度：0~1）
（2）指定透明：transpaernt
（3）指定背景颜色：inherit 从父元素继承过来
（4）背景图片
background-image:url(图片地址);
a、控制背景平铺：
1 background-repeat:no-repeat; 2 background-repeat:repeat-x; 3 background-repeat:repeat-y; 4 background-repeat:repeat;
b、背景图片大小：
1 /*图片等比例缩放*/ 2 background-size:cover;/*铺满整个区域*/ 3 background-size:contain;/*按照一边覆盖显示区域，会有白边*/
c、背景图片定位：
background-position：value1,value2,value3,value4
（5）渐变背景：
渐变生成器：https://cssgradient.io/
1 background: linear-gradient(0deg, rgba(34,193,195,1) 20%, rgba(253,247,45,1) 88%); /*线性渐变*/ 2 background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); /*圆形渐变*/
（6）多个背景图片：
使用逗号分隔
1 background-image: url(image1.png), url(image2.png), url(image3.png), 2 url(image1.png); 3 background-repeat: no-repeat, repeat-x, repeat; 4 background-position: 10px 20px, top right;
（7）背景设置滚动
1 background-attachment: scroll;/*使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。*/ 2 background-attachment: fixed;/*使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。*/ 3 background-attachment: local;/*局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。*/
（8）设置背景是否延伸到边框、内边距盒子、内容盒子下面
8、不同方向的文本
9、溢出
1 overflow:visible;/*默认，不修剪*/ 2 overflow:hidden;/*溢出隐藏*/ 3 overflow:scroll;/*显示滚动条，无论内容多少*/ 4 overflow:auto;/*内容需要被修剪时，显示滚动条*/
溢出的使用：文字溢出隐藏
1 <style type="text/css"> 2 .box{ 3 width: 500px; 4 height: 40px; 5 overflow: hidden; 6 white-space: nowrap; 7 text-overflow: ellipsis; 8 } 9 </style> 10 <body> 11 <div class="box" title="由全体股东（出资人）制定的代表或共同委托的代理人，向工商局申请名称预先核准。股东需要签署《企业名称预先核准申请书》，提供公司名称2~10个，写明经营范围，连同股东出资协议、股东身份证明、《指定代表或者共同委托代理人的证明》及指定代表或者共同委托代理人的身份证复印件一并提交给工商局。工商局核准的，发给《企业名称预先核准通知书》。"> 12 由全体股东（出资人）制定的代表或共同委托的代理人，向工商局申请名称预先核准。股东需要签署《企业名称预先核准申请书》，提供公司名称2~10个，写明经营范围，连同股东出资协议、股东身份证明、《指定代表或者共同委托代理人的证明》及指定代表或者共同委托代理人的身份证复印件一并提交给工商局。工商局核准的，发给《企业名称预先核准通知书》。 13 </div> 14 </body>
10、修饰字体文字
常用总结：text-decoration、underline、text-align、line-height、text-shadow...
11、阴影
（1）box-shadow:水平、竖直、模糊程度、大小、颜色、inset（内阴影）
12、透明度（opacity）值的范围是 0~1 。1 为不透明， 0 为完全透明
13、鼠标样式（cursor）
（1）pointer 小手
（2）wait 等待
（3）自定义：cursor:url(地址),aoto
1 <style type="text/css"> 2 .box{ 3 width: 200px; 4 height: 200px; 5 background-color: antiquewhite; 6 cursor: url(img/3.png) , auto; 7 } 8 </style> 9 <body> 10 <div class="box"></div> 11 </body>
14、滚动条样式可以修改
浙公网安备 33010602011771号