css属性相关
高度宽度设置,主要:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的
1 <style> 2 div{ 3 background-color: red; 4 width: 100px; 5 height: 100px; 6 } 7 span{ 8 background-color: pink; 9 height: 100px; 10 width: 100px; 11 } 12 </style>
1 .c1 a{ 2 color: red; 3 } 补充:a标签的字体颜色设置必须选中a标签才行
字体属性 1 .c1{ 2 font-family: '楷体'; 3 }
字体大小 1 .c1{ 2 font-size: 20px; 3 }
字重 1 .c1{ 2 font-weight: bold; 3 } 字的粗细
normal 默认值,标准粗细
bold 粗体
bolder 更粗
lighter 更细
inherit 继承父元素字体的粗细值
颜色
1 p{ 2 /*color: red;*/ 3 /*color: #78FFC9;*/ 4 /*color: rgb(123,199,255);*/ 5 color: rgba(123,199,255,0.3); 多了一个透明度的数字:0-1的一个数字 6 }
文字属性text-align
1 <style> 2 div{ 3 width: 200px; 4 height: 200px; 5 background-color: yellow; 6 text-align: center; 文字对齐 7 } 8 </style>
left 左对齐默认
center 居中对齐
right 右对齐
文字装饰 text-decoration 1 a{ 2 text-decoration: overline; 3 }
overline 上划线
none 默认,下划线 一个文字大小默认为16px
uderline 定义文本下的一条线
line-through 定义穿过文本下的一条线
首行缩进 1 p{ 2 text-indent: 32px; 3 }
背景属性
背景颜色
1 div{ 2 width: 600px; 3 height: 600px; 4 background-color: red; 5 }
背景图片
1 <style> 2 div{ 3 width: 600px; 4 height: 600px; 5 background-color: red; 6 } 7 div{ 8 width: 600px; 9 height: 850px; 10 background-image: url("2.jpg"); 11 background-repeat: repeat-y; 12 background-position: center; 13 } 14 div{ 15 width: 600px; 16 height: 600px; 17 background: url("2.jpg") no-repeat center right; 简写方式 颜色 图片路径 是否平铺 图片位置 18 } 19 </style>
1 背景颜色 2 background-color: red; 3 4 div{ 5 width: 600px; 6 height: 600px; 7 /*background-color: red;*/ 8 /*background-image: url("yeye.jpg");*/ 9 /*background-repeat: no-repeat;*/ 10 /*background-position: 100px 50px;*/ 相对于div标签的,距离左边100px,距离上面50px 11 background:url("yeye.jpg") no-repeat left center; 12 /*background-position: right top;*/ 13 14 } 15 简写方式,颜色 图片路径 是否平铺 图片位置 16 background:#ffffff url('1.png') no-repeat right top;