标签:样式 字体 background font border CSS
1. CSS 背景样式
(1) background-color:背景颜色
(2) background-image:背景图片
(3) background-repeat:图片的平铺方式
repeat-x 水平方向平铺
repeat-y 竖直方向平铺
no-repeat 都不平铺
repeat:x、y方向都平铺
(4) background-position:背景图片的位置
x y: number | 单词
x: left center right
y: top center bottom
(5) background-attachment:背景图片随滚动条的移动方式
scroll:背景图相对于当前元素偏移
fixed:背景图相对于浏览器偏移
img:显示大图片
background-image:显示装饰性的图片,小图标
2. CSS 边框样式
(1) border-style: 边框的样式
dotted: 点线
dashed: 虚线
solid: 实线
(2) border-width: 边框的大小
px...
(3) border-color: 边框的颜色
颜色、十六进制表示法、RGB表示法
边框也可以针对某一条边单独进行设置
border-left-style 其中left可以换成top、bottom、right
3. CSS文字样式
(1) font-family:字体类型
英文字体:Arial, Times New Roman
中文字体:微软雅黑
注意事项:
(1) 设置多字体的目的: 确保计算机可以匹配
(2) 添加引号的目的: 字体中出现空格,需要添加引号,否则不需要添加引号
(2) font-size:字体的大小
默认大小:16px
写法:
xx-small 最小
x-small 较小
small 小
medium 正常
x-large 较大
xx-large 最大
number(px)
注:字体的大小一般为偶数,有时要对文字进行对齐,一般进行居中对齐,所以使用偶数
(3) font-weight:字体的粗细
normal:正常
bold:加粗
(4) font-style:字体的样式
normal:正常
italic:斜体
注:oblique也是表示斜体,一般不用
区别:italic 带有倾斜属性的斜体字才可以设置倾斜
oblique不论是否带有斜体字都可以设置倾斜
(5) color:字体的颜色
4. CSS 段落样式
(1) text-decoration:文本修饰
underline: 下划线
line-through: 删除线
overline: 上划线
none: 不加任何装饰
注: 添加多个文本修饰 line-through underline overline
(2) text-transform:文本大小写(针对英文段落)
lowercase:小写
uppercase:大写
capitalize:首字母大写,其余小写
(3) text-indent: 文本缩进
em:缩进单位
1em 永远和字体大小相同
(4) text-align: 文本对齐方式
left、center、right、justify(两端对齐)
(5) line-height: 行高
行高: 一行文字的高度 = (上边距+字体大小+下边距),其中上边距和下边距是等价关系
默认行高:不是固定值,是随着字体大小而变化的
取值: number (px) | scale (比例值) 同文字大小成比例
(6) letter-spacing: 定义字间距
(7) word-spacing: 定义词间距
(8) 强制折行
word-break:break-all (非常强烈的折行)
word-wrap:break-word (不那么强烈的折行)
5. CSS 复合样式
一个CSS属性只控制一种样式,叫做单一样式
一个CSS属性控制多种样式,叫做复合样式
复合样式的写法是通过空格实现的,有的复合样式的写法没有顺序,如background和border、有的则有顺序,如font
例:
background: red url() no-repeat 0 0
border: 1px solid black
font:最少要有两个属性size和family,且size和family在最后
标签:样式,字体,background,font,border,CSS 来源: https://www.cnblogs.com/programming-era/p/15750664.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。