css样式的边框样、背景样式、超链接样式、列表样式
今天学习了css样式的边框样、背景样式、超链接样式、列表样式
一、边框样式
1.边框的宽度 border-width
2.边框的外观(实线 solid、虚线dashed、点线dotted、边框双线double、无样式none)
3.边框颜色 border-color
4.简单写法border:1px solid red
5.局部边框样式;
border-top
border-bottom
border-left
border-right
二、背景样式
background-color 背景颜色
background-image 背景图片
background-repeat 显示方式(不平铺no-repeat、水平方向平铺repeat-x、垂直方向平铺repeat-y)
background-attachment 是否随内容而滚动
三、超链接样式
a:link |
定义a元素未访问时的样式 |
a:visited |
定义a元素访问后的样式 |
a:hover |
定义鼠标经过显示的样式 |
a:active |
定义鼠标单击激活时的样式 |
定义这4个伪类,必须按照(link、visited、hover、active)LVHA的顺序进行,不然浏览器可能无法正常显示这4种
样式
四、列表样式
列表项符号list-style-type
1.有序列表
语法:
<ol type="">
<li>有序列表项</1i>
<1i>有序列表项</1i>
<1i>有序列表项</1i>
</ol>
属性值 |
序号类型 |
1 |
数字1、2、3 |
a |
小写英文字母a、b、.. |
A |
大写英文字母A、B、.. |
i |
小写罗马数字i、ii、 |
I |
大写罗马数字I、I I、… |
2.无序列表
语法:
<ul type="">
<li>有序列表项</1i>
<1i>有序列表项</1i>
<1i>有序列表项</1i>
</ul>
属性值 |
序号类型 |
disc |
实心圆● |
circle |
空心圆○ |
square |
实心方块■ |
我们用css样式:
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 |
取出符号 |