背景属性-background
背景就不多解释了吧,就跟桌面壁纸一样,设置一个合适的背景可以的整个布局显得更加和谐,舒适。
至于属性呢,就是给这个背景设置其他的样式,总不能总是给这个背景添加图像吧,我们可以对它进行简单的操作,使它达到我们想要的效果。
当我们在制作网页时在网页中添加一些背景颜色、背景图像可以让网页更加美观。
-
background-color:设置元素的背景颜色;
- 取值:英文颜色表示法、rgb表示法、十六进制表示法
-
background-image:设置元素的背景图像;
-
- 元素的尺寸小于图片的尺寸,图片是从元素的左上角角开始显示,超出的部分不可见
-
元素的尺寸大于图片的尺寸,图片在水平方向和垂直方向平铺的
-
div{ background-image: url("路径"); }
添加背景颜色
显示效果如下
-
-
background-repeat: 背景图片平铺方式;
/* 背景图片平铺 默认*/ div{ background-repeat: repeat; } /* 背景图片不平铺 */ div{ background-repeat: no-repeat; } /* 背景图片水平平铺 */ div{ background-repeat: repeat-x; } /* 背景图片垂直平铺 */ div{ background-repeat: repeat-y; }
-
background-position: 设置背景图片位置;
X允许的取值方式 Y允许的取值方式 left左对齐 center水平居中 right右对齐 top顶部对齐 center垂直居中 bottom底部对齐 px px 如果只给一个值,那么第二个值默认center
精灵图技术 :为了减少网络请求,可以将所有的小图标拼接在一张图片上,一次网络请求全部得到;借助于background-position进行背景图片位置的调整,实现显示不同的图标
- background-size:设置背景图片的尺寸;
background-size:X Y;
X和Y和原图宽高对应,同时X Y可以是自己设定的百分比或像素background-size:cover;
等比例缩放直到铺满X轴和Y轴;background-size:contain;
等比例缩放直到铺满X或Y轴其中一个;
字体属性-font
字体设置是网页设计中的重要组成部分,合适的字体不仅会使页面更加美观,也可以提升用户体验。CSS中提供了一系列用于设置字体样式的属性,比如更改字体,控制字体大小和粗细等等。
字体大小
其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。
font-size: px / % / em / rem;
- 百分比:根据父元素的字体大小来设置
- em:根据父元素的字体大小来设置
- rem:根据根元素的字体大小来设置
字体颜色
color:英文单词 / 十六进制 / rgb ;
- 英文单词表示法 做测试使用
- rgb 三原色
- #RRGGBB # RBG 0~9 A~F
字体类型
font-family: 字体名称 ;
字体粗细
font-weight: 值;
值 | 说明 |
---|---|
bold | 定义粗的字体 |
bolder | 定义更粗的字体 |
lighter | 定义更细的字体 |
normal | 定义正常的字体大小 |
100-900的整百数数值
字体斜体
font-style: 值; \
值 | 说明 |
---|---|
normal | 正常 |
italic | 斜体,换成一种斜体字体 |
行高
line-height: px\%\倍数;
- 会按照字体大小的1.32倍去设置行高
文本相关属性-text
文本缩进
text-indent
文本水平对齐方式
text-align
值 | 说明 |
---|---|
left | 居左对齐 |
center | 居中对齐 |
right | 局右对齐 |
justify | 两端对齐 |
-
垂直对齐:vertical-align
-
文本修饰:text-decoration
值 说明 none 没有文本线 underline 下划线 line-through 中划线 overline 上划线
单词间距
word-spacing单词间距
字间距
letter-spacing每一个字符之间的间隙
溢出显示方式
text-overflow
- ellipsis 显示省略符号来代表被修剪的文本