css--背景,边框,列表,链接等属性

2018-06-07  本文已影响0人  王绘的名字被注册了

浏览器支持IE为-ms-,Firefox为-moz-,chrome和iPhone自带浏览器为-webkit-,Opera为-o-

1.背景:

·由于默认情况向图像在水平和垂直方向上都是重复的,所以用background-repeat来解决这个问题,它的默认值是repeat,使得整个元素的背景被填充,常见的值为:
no-repeat: 图像将不会重复:它只会显示一次。
repeat-x: 图像将在整个背景中水平地重复。
repeat-y: 图像会在背景下垂直地重复。
例如:HTML文件中:<p>Exciting box!</p>
CSS 文件中:
p {
font-family: sans-serif;
padding: 20px;
background-color: yellow;
background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
background-repeat: no-repeat;
}
结果如下:

不重复的背景图片
·但是这样看起来怪怪的,它现在重叠了文本。我们需要把它放在一个更好的地方。所以我们用到了background-position在指定任意位置放置背景图片,通常,该属性将使用两个通过空格分隔的值,该空间指定了图像的水平(x)和垂直(y)坐标。图像的左上角是原点(0,0)。把背景想象成一个图形,x坐标从左到右,y坐标从上到下。
常用的值类型有:
图片定位
还应该注意,您可以混合并匹配这些值,比如 background-position: 99% center。还要注意,如果您只指定一个值,那么该值将被假定为水平值,而垂直值将默认为center。
在上面CSS文件的代码p中添加:background-position: 99% center;
结果如下:
图片定位为占据水平99%,垂直方向为center
·background-size:可以使用你期望的所有长度单位来指定你想要的值——px,百分比, rem等,例如:background-size:30% 30%;

2.边框:CSS边框属性允许你指定一个元素边框的样式和颜色。


边框

边框简写属性 border:5px solid red;5px指定border-width,solid指定border-style,red指定了border-color

3.列表:
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}


列表实例 列表的所有属性

4.链接:
伪类a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面


链接样式

text-decoration 属性主要用于删除链接中的下划线:a:link {text-decoration:none;}

上一篇 下一篇

猜你喜欢

热点阅读