css修饰操作（上）
一：宽和高：
width：为元素设置宽度。
height：为元素设置高度。
ps：块级标签才能设置宽度，内联标签的宽度由内容来决定。
二：字体属性：
1.文字字体：
font-family 可以把多个字体名称作为‘退回’ 系统来保存。如果浏览器不支持第一个字体就会尝试下一个。浏览器会使用可识别的第一个值。
2.字体大小：
font-size ：设置字体大小。（设置成inherit表示继承父元素的字体大小）
3.字体字重（也就是字体的粗细）：
font-weight：（normal：默认值，bold：粗体，bolder：更粗，lighter：更细，100~900：设置具体粗细，400等同与normal，inherit：继承父元素字体的粗细值。）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*width属性可以为元素设置宽度。*/ /*height属性可以为元素设置高度。*/ /*块级标签才能设置宽度，内联标签的宽度由内容来决定。*/ div { width: 400px; height: 100px; } p { /*依次检验浏览器是否支持字体*/ font-family: "Sitka Banner", "Arial", sans-serif } p { /*设置字体大小*/ font-size: 16px; /*设置字体的自重，也就是字体的粗细*/ font-weight: lighter; } </style> </head> <body> <div>div中的文本1</div> <div>div中的文本2</div> <p>段落文本</p> </body> </html>
4.文本颜色：
颜色属性被用来设置文字的颜色，颜色是css最常用的设置，设置方式有：
十六进制值：如：#FF0000
一个RGB值：如：rgb（255.0.0）
颜色的名称-如：yellow
rgba：第四个表示透明度，它的范围是0.0~1.0。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div {color: #FF0000 } p {color: green} span {color: rgb(20,85,5)} ul {color: rgba(255,63,63,0.5)} </style> </head> <body> <ul> <li>列表1</li> <li>列表2</li> </ul> <div>div中的文本1</div> <div>div中的文本2</div> <p>段落文本</p> <span>span文本</span> </body> </html>
三：文字属性：
1.文件对齐：
text-align 规定元素中文本的对齐方式。类型有：
left：向左对齐（默认值）
right：右对齐
center：居中
justify：两端对齐
2.文字装饰：
text-decoration属性，用来给文字添加属性效果，类型有：
none：默认（标准文本）
underline :定义文本的下划线
overline：定义文本的上划线
line-through：定义穿过文本的一条线
inherit：继承父元素text-decoration属性
3.首行缩进：
text-indent：20px 首行缩进20像素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #a {text-decoration: none;text-indent:20px} #b {text-decoration: underline} #c {text-decoration: overline} #d {text-decoration: line-through} #e {text-decoration: inherit} </style> </head> <body> <p id="a">我就是一段文字</p> <p id="b">我就是一段文字</p> <p id="c">我就是一段文字</p> <p id="d">我就是一段文字</p> <p id="e">我就是一段文字</p> </body> </html>
四：背景属性
设置背景颜色：background-color ：red；
设计背景图片：background-img：url（‘文件路径’）；
设置背景图片平铺满整个网页：repeat；
设置背景图片只在水平方向平铺：repeat -x；
设置不平埔：no -repeat
设置背景图片的位置：background -position：left top；或者 background -position：200px 200px；
（简写：background：#56566 url（‘1.png’）no-repeat left top;）
(*****)设置背景图片不动：background-attachment：fixed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>滚动背景图示例</title> <style> * { margin: 0; } .box { width: 100%; height: 500px; background: url('https://hbimg.huabanimg.com/c6284320b4ce56447add62a9a9f99bd27482edbb2e7d0f-eQEdGU_fw658') center center; /*设置图片不动*/ background-attachment: fixed; } .d1 { height: 500px; background-color: purple; } .d2 { height: 500px; background-color: deeppink; } .d3 { height: 500px; background-color: pink; } </style> </head> <body> <div class="d1"></div> <div class="box"></div> <div class="d2"></div> <div class="d3"></div> </body> </html>
五：边框
1.边框属性：
设置边框宽度：border-width
设置边框的类型：border-style
设置边框的颜色：border-color
支持简写：border：2px solid red；
2.边框样式：
无边框：none
点状虚线边框：dotted
矩形虚线边框：dashed
实线边框：solid
ps：（边框可以单独被设置）
圆角边框：borde-radius （如果要将一个边框设置成正圆形，值应该设置为50%）
六：display属性：
主要作用是控制HTML元素的显示效果：
元素存在，但是在浏览器中不显示 ：display:'none'
默认占满整个页面的宽度，如果设置了指定的宽度，用margin填充剩下的部分：display：‘block’
按行类元素显示：display：‘inline’
使的元素同时具有行内元素和块级元素的特点：display：‘inline-block’
ps：display：‘none’ 与 visbility：hidden的区别：
visbility：hidden：可以隐藏某个元素，但是要占用页面空间，当然就会页面布局。
display：‘none’：真正的隐藏了元素，不会占用页面空间。
