一直在学习python小兵

导航

CSS字体的属性

1.CSS字体的属性

font                    简写，作用是把所有的针对字体的属性设置在一个声明中
font-family             设置字体系列
font-size               设置字体尺寸
font-style              设置字体风格,italic或者normal;
font-variant            以小型大写字体或者正常字体显示文本
font-weight             设置字体的粗细,normal/bold/bolder/lighter

实例：在一个声明上设置所有的字体属性：

font:italic bold 12px;//设置字体大小
font-size:200%;

2.CSS的文本属性：

color                   设置文本颜色
direction               设置文本方向
line-height             设置行高
letter-spacing          设置字符间距
text-align              对齐元素中的文本
text-decoration         向文本中添加修饰
text-indent             缩进元素中文本的首行
text-transform          控制元素中的字母
unicode-bldl            设置文本的方向
white-space             设置元素中空白的处理方式
word-spacing            设置字间距

3 背景
背景
上=>右=>下=>左
">background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平铺满)
background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

注意：如果将背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片，另外，如果此时要设置一个width＝100px，你也看不出效果，除非你设置出html。

实例：

<p style="color:red;
        line-height:40px;
        letter-spacing:10px;
        background-color:silver;
        width:300px;
        height:300px;
        text-align:center;">hello world<br>hello world<br>
    </p>

4、链接
● a:link - 普通的、未被访问的链接
● a:visited - 用户已访问的链接
● a:hover - 鼠标指针位于链接的上方
● a:active - 链接被点击的时刻
注释：为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！
注释：为了使定义生效，a:active 必须位于 a:hover 之后！！

5、列表
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

ul,ol{
list-style: decimal-leading-zero;
list-style: none; #经常作为去掉ul前面的符号
list-style: circle;
list-style: upper-alpha;
list-style: disc;
}

6、表格
border
border-collapse：边框合并模型separate、collapse、inherit
width
height
text-align
vertical-align
padding：td里面文本和边框的距离
color
background-color

7、轮廓
outline ： #00ff00 dotted thick 颜色、虚线、粗的
outline-color：轮廓颜色
outline-style:轮廓样式
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit 规定应该从父元素继承轮廓样式的设置。
outline-width：轮廓宽度

效果：

 
image

posted on 2020-10-24 21:53  一直在学习python小兵  阅读(133)  评论(0)  编辑  收藏  举报