背景属性字体属性

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;

背景属性 字体属性

猜你喜欢

背景属性字体属性