一:宽和高:
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’:真正的隐藏了元素,不会占用页面空间。