文本规则
文本规则: css核心属性中的文本属性
属性 | 属性值 |
---|---|
font-size:字体大小 | 默认16px,最小10px |
font-family:字体族科 | 可以跟中文字体,中文字体不用带引号;可以跟英文字体,如果英文字体是一个单词组成,不用单引号,如果是多个单词组成需要带引号;后面可以跟多个取值,从左侧依次进行匹配;默认字体是宋体。 |
color:文本颜色 | rgb、颜色单词、六位十六进制的颜色值 |
font-weight:文本加粗 | 数值类型(100-900;100=细体 400=正常字体 700=加粗字体 900=更粗字体);关键词类型(lighter=细体 normal=正常字体 bold==粗字体 bolder=更粗字体) |
font-style:文本倾斜 | normal:普通正常字体 italic:倾斜 oblique:斜体字(强调) |
text-decoration:文本修饰线 | underline:下划线 line-through:中划线 overline:上划线 none:取消 |
text-align:水平对齐方式 | left center right |
line-height:单行文本垂直居中对齐 | 等于高度时文本垂直居中 |
text-indent:首行缩进 | 2em,em是一个相对单位,相对于本标签大小缩放的一个倍数,默认是16像素,1em=16px; |
letter-spacing:字符间距 | px |
word-spacing:单词间距 | px |
列表规则
只针对列表标签使用,实际开发中常使用ul>li=====无序列表
标签 | 属性 | 属性值 |
---|---|---|
ul | 列表项显示类型:list-style | none;square;circle |
li,ul | 列表项显示类型:list-style-type | none;square;circle;添加到父元素上面能实现,添加到子元素也能实现,这称之为继承性。 |
ul,li | 列表项显示图片类型:list-style-image | url(图片的路径) |
li | 列表项的位置:list-style-position | outside inside,列表项在li里面还是外面; |
使用列表项的时候,所有的效果目前做开发的时候,以上三个属性都不使用,上面是单一属性,
主用:list-style:复合属性
list-style:url(图片路径) none inside
经常使用的一行代码:list-style:none;
边框规则
含义:元素的边缘位置
属性:border(复合属性)
border:10px solid gray
用边框宽度,和边框形态和边框颜色组成。
注意:1)边框样式是必须值
2)如果只添加了边框样式的话,会实现一个3px的黑色的实现边框
3)如果只跟了样式和粗细的话,实现的是对应样式和粗细的黑色边框。
属性的取值======单一属性为例(粗细为例)
取值 | 实现的效果 |
---|---|
V1 | 实现四个方向边框 |
V1 V2 | 实现四个方向边框,V1代表上下边框,V2代表左右边框 |
V1 V2 V3 | 实现四个方向边框,V1代表上边框,V2代表左右,V3代表下边框 |
V1 V2 V3 V4 | 实现四个方向边框,V1代表上边框,V2代表右边框,V3代表下边框,V4代表左边框 |
border-color和border-style一样可以这样表示
问题:能否设置一个方向的边框?
border-top:
border-left:
border-bottom:
border-right:
背景规则
含义:元素在文本底下显示的内容:背景图片,直播的背景图等等。
1)背景颜色:
background-color:
a)颜色单词
b)rgb
c)#六位十六进制的颜色值
d)rgba(red,green,blue,alpha)
alpha代表的是透明度:透明度为0-1,保留1位小数。例如0.1小数点前面的0可以省略掉。
1代表的是不透明 0代表的是透明。
2) 背景图片
background-image:url(路径);
如果图片大小<盒子的大小,会显示平铺,直接会看到。
如果图=盒子大小,会显示一样大,但是实际上还是会有平铺的效果。
如果图>盒子大小,图片照样会平铺,只不过盒子只会显示图片的一部分,但实际上还是平铺。
3)背景的平铺属性
background-repeat:默认值是平铺的
repeat=平铺
no-repeat=不平铺
repeat-x=水平平铺
repeat-y=垂直平铺
4)背景的位置属性
background-position:x y
x水平位置 y垂直属性
x取值为正时,水平向右
x取值为负时,水平向左
y取值为正,垂直向下
y取值为负,垂直向上
也可使用关键词:x=====left、right、center
y=====top、bottom、center
5)背景的固定和滚动
background-attachment
scroll===滚动
fixed===固定
只要添加了背景的固定之后,背景图片就会默认的固定在浏览器窗口的左上角位置
不会随着滚动条的滚动而被滚上去
如果有多个盒子,每个盒子的背景图片都添加了固定,也会提前定过渡
6)背景图片尺寸
background-size:x y
x====水平方向的尺寸大小
y====垂直方向的尺寸大小
使用px单位和%单位的时候,会让图片变形,质量不高的话容易失真。
同样,还会有以下两个取值:
cover======覆盖,能把背景图片等比例放大,直到铺满为止,但是容易出现裁剪效果
contain=====包含,也能把背景图片等比例放大,只要有一个边铺满就结束了。
7)背景的复合属性
background:color image repeat x y/ x y attachment
斜杠前面的x,y代表的位置
斜杠后面的x,y代表的是大小