css层叠样式-样式表
字体样式属性：
|
属性值 |
说明 |
|
font-family |
字体类型 |
|
font-size |
字体大小 |
|
font-weight |
字体粗细 |
|
font-style |
字体斜体 |
|
color |
颜色 |
css
#d1{
font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
font-size: 30px;
font-weight:100;
font-style: italic;
color: red;
}
文本样式
|
属性 |
说明 |
|
text-decoration |
下划线、删除线、顶划线 |
|
text-transform |
文本大小写 |
|
text-indent |
段落首行缩进 |
|
text-align |
文本水平对齐方式 |
|
line-height |
行高 |
#p1{
text-decoration: underline;
text-transform:lowercase;
text-indent: 2em;/*2em连个字符*/
text-align: left;
line-height: 50px;
}
边框样式
|
属性 |
说明 |
|
border-width |
边框的宽度 |
|
border-style |
边框的外观 |
|
border-color |
边框的颜色 |
#d2{
border-top: 600px solid #FFFCFC;
border-left: 600px solid red;
border-bottom: 0px solid blue;
border-right: 0px solid blue;
}
背景样式
|
属性 |
说明 |
|
background-color |
背景颜色 |
|
background-image |
定义背景图像的路径，这样图片才能显示 |
|
background-repeat |
显示方式，例如纵向平铺、横向平铺 |
|
background-attachment |
是否随内容而滚动 |
body{
background-image: url(../img/1.jpeg);
background-repeat: no-repeat;
background-attachment: fixed;
}
超链接样式
|
属性 |
说明 |
|
a:link |
定义a元素未访问时的样式 |
|
a:visited |
定义a元素访问后的样式 |
|
a:hover |
定义鼠标经过显示的样式 |
|
a:active |
定义鼠标单击激活时的样式 |
<style>
a:link{
color: red;
/*清楚下划线*/
text-decoration: none;
}
a:visited{
color: blanchedalmond;
}
/*当鼠标放到a标签上时的样式*/
a:hover{
color:blue;
}
a:active{
color:chartreuse;
}
</style>
列表样式
list-style-type属性取值
|
属性值 |
序号类型 |
|
decimal |
数字1、2、3 |
|
lower-alpha |
小写英文字母a、b、.. |
|
upper-alpha |
大写英文字母A、B、.. |
|
lower-roman |
小写罗马数字i、ii、 |
|
upper-roman |
大写罗马数字I、I I、… |
|
属性值 |
序号类型 |
|
disc |
实心圆● |
|
circle |
空心圆○ |
|
square |
实心方块■ |
|
none |
取出符号 |
