一丶字体样式：
属性 含义 举例
font-family 设置字体类型 font-family: "隶书";
font-size 设置字体大小 font-size: 50px;
font-weight 设置字体粗细 font-weight: bold;
前面的三种字体样式设置 = ( font在一个声明中) font: bold 12px "楷体";(设置所有字体属性 )
其中：字体粗细>字体大小>字体类型
normal=400:默认值，定义标准字体
bold=700 :粗体字体
bolder:更粗的字体
lighter:更细的字体
span{
font-family: 楷体;
font-size: 50px;
font-weight:800;
}
span{
font: italic 50px "宋体";
}
上面两段代码都能得到下面的结果
设置后的字体样式
二丶文本属性
属性 含义 举例
color 设置字体颜色 color:red;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本缩进 text-indent:20px;
line-height 设置文本行高 line-height:25px;
text-decoration 设置文本装饰 text-decoration:underline
left:把文本排列到左边
right:把文本排列到右边
center:把文本排列到中间
justify:实现俩端对齐
none:默认值
underline:设置下划线
overline:设置文本上划线
line-through:设置删除线
vertical-align 垂直对齐方式 vertical-align：middle;
middle:垂直居中
top:图片上端对齐
bottom:下端对齐
文本阴影：text-shadow: blue 10px 10px 2px；
从左到右：1.阴影颜色
2.x轴位移，用来制定阴影水平位移
3.y轴位移，用来制定阴影垂直位移
4.阴影模糊半径，代表阴影向外模糊的模糊范围
h2 {
text-indent: 200px;
text-shadow:green 2px 2px 2px ;
vertical-align:top;
}
p{
color:orange;
text-align:left;
text-indent:20px;
line-height:25px;
text-decoration:underline
}
本段代码结果演示
三、超链接伪类：
1.伪类样式 标签名：伪类名{声明；}
伪类名称 含义 示列
a:link 末点击访问时超链接样式 a:link{color:#9ef5f9}
a:visited 单机访问后超链接样式 a:visited{color: #0d7114;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color: #9873f2;}
a:active 鼠标单击末释放的超链接样式 a:active{color: #faa53b;}
列表样式：list-style-type
值 说明 语法举例
none 无标记符号 list-style-type：none;
disc 实心圆 list-style-type：disc;
circle 空心圆 list-style-type：circle;
square 实心正方形 list-style-type：square;
decimal 数字 list-style-type：decimal;
去掉列表前小黑点：list-style:none;
.title{
/*未单击的超链接样式*/
a:link{
color: green;
}
/*单击访问后的超链接样式*/
a:visited {
color: orange;
}
/*鼠标悬浮后的超链接样式*/
a:hover {
color: blue;
}
/*单击未释放的超链接样式*/
a:active{
color: black;
}
a{
list-style-type: none; /!*无标点符号*!/
list-style-type: disc; /!*实心圆*!/
list-style-type: circle; /!*空心圆*!/
list-style-type: square; /!*实心正方形*!/
list-style-type:decimal; /!*数字*!/
}
未点击，鼠标悬浮，实心圆点
点击后，数字标识符
各种超链接前的符号可以随意的变换，大家不妨可以试试。
四、背景样式
1.背景颜色：background-color
2.背景图片：background-image: url("图片路径");
3.背景定位：background-position: Xpos Ypos;
Xpos:left(左边)，center(水平居中)，right(右边)
Ypos:top(上边)，center(垂直居中)，bottom(下边)
背景重复方式
background-repeat:repeat;
1.repeat:沿水平和垂直俩个方向平铺
2.no-repeat:不平埔，即只显示一个
3.repeat-x:只沿水平方向平铺
4.repeat-y:只沿垂直方向平铺
总结：background:背景颜色 url(路径) 背景定位（x,y）背景重复方式;
.title{
width: 50%;
text-indent: 30px;
background: greenyellow url(../images/bang.gif ) 1px center no-repeat;
}
不平铺，显示图片及背景颜色
五、背景图片的大小控制
图片大小控制：background-size
属性 描述
auto 默认值，使用图片保持原样
percentage 当使用百分比值时，不是相对背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover 整个图片放大填充了整个元素
contain 让背景图片保持本身的宽高比列，将背景图片缩放到宽度或者高度正好适应所定义背景的区域
div{
width: 200px;
height: 200px;
border: 1px solid red;
background-image: url(../images/manor-7.jpg);
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat:no-repeat;
background-size: cover;
}
li{
list-style: none url(../images/manor-7.jpg ) inside;
}
大小，图片填充
填充图片
网友评论