4.CSS属性相关

最新推荐文章于 2024-05-20 22:08:52 发布

小马Mark

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量198

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_45914233/article/details/106880278

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

宽和高

width属性可以为元素设置宽度
height属性可以为元素设置高度
块级标签才设置宽度,内联标签的宽度由内容决定。

字体样式

简写复合

font:font-style font-weight font-variant font-size/line-height font-family

语法说明:

前三个属性值可以不分先后顺序,默认为normal.
大小和字体名称系列必须显式指定,先设置大小再设置字体系列
需要设置行高时,可以写在字体大小的后面,中间用"/"分隔,行高为可选属性
font属性可以继承

字体样式

font-style: normal | italic | oblique

属性值	说明
normal	表示不使用斜体，默认
italic	表示使用斜体显示文字
oblique	表示使用倾斜字体显示

字体系列

font-family:字体1,字体2,....

属性值为多个字体名称时，使用逗号分隔
浏览器依次查找字体，直到找到存在的字体则使用其字体，默认宋体
字体名称中存在空格，需要用双引号将其括起来，例如：Times New Roman

字体变体

font-variant: normal | small-caps

主要设置英文字体

属性值	说明
normal	表示正常字体，默认
small-caps	表示使用小型的大写字母字体

字体粗细

font-width: normal | bold | bolder | lighter | 100 |...|900

属性值	说明
normal	正常字体，默认
bold	标准粗体
bolder	特粗体
lighter	细体
100~900	100表示最细，400等价于normal，700等价于bold
inherit	继承父元素字体的粗细

文本颜色

颜色属性被用来设置文字的颜色
常见格式：
1. 十六进制值 - 如：#FF0000
  - 前两位是表示红色，中间两位表示绿色，后两位表示蓝色
  - F是最高级别，0表示最低级别（无色）
2. 一个RGB值 - 如：RGB(255,0,0)
  - 红绿蓝就是RGB的意思，（Red Green Blue）
  - 最高255，最低0
  - rgba(255,0,0,0.3)
    - 第四个值为alpha，指定了色彩的透明度
    - 范围为0.0到1.0之间
3. 颜色的名称 - 如：red

文本样式

字符间距

letter-spacing:normal | 长度单位

语法说明：

normal:默认间距,长度一般为正数,也可以为负数,取决于浏览器是否支持
word-spacing属性:主要针对英文单词
letter-spacing属性:对中文、英文字符串均起作用

行距

line-height:normal | length

语法说明:

normal:默认行距
length:百分比、数字。由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸

首行缩进

text-indent：长度单位 | 百分比单位

一个字在页面上的默认大小是16px

字符装饰

text-decoration属性用来给文字添加特殊效果

text-decoration:none|underline|overline|line-through

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属值。

为a标签去除默认的自划线:
```
a{text-decoration:none;}
```

水平对齐

text-align:left|right|center|justify

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

垂直对齐

vertical-align:top|middle|bottom|text-top|text-bottom

属性值	说明
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
text-bottom	把元素的底端与父元素字体的底端对齐

英文大小写转换

text-transform:capitalize|uppercase|lowercase|none

属性值	说明
capitalize	将每个单词的第一个字母转换成大写,其余不换
uppercase	转换成大写
lowercase	转换成小写
none	不转换

CSS背景

简写复合

background:background-color background-image background-repeat background-position background-attachment

语法说明:

语法中属性值的设置参考各属性进行设置.

背景颜色

background-color:颜色

背景图像

background-image:url("图像文件名称") | none

语法说明:

none:不用图像作为背景
url("图像文件名称"):图像的相对或绝对路径

背景图像重复

background-repeat属性用于设置背景图像的重叠覆盖方式

background-repeat:repeat|no-repeat|repeat-x|repeat-y

属性值	说明
repeat	使用背景图片重复性完全填充元素大小空间
repeat-x	背景图片在水平方向从左到右填充
repeat-y	背景图片在垂直方向从上到下填充
no-repeat	不使用背景图片重复填充

背景附件

background-attachment属性设置背景图像是否随着滚动条一起滚动

background-attachment:scroll|fixed

语法说明:

scroll:表示在文字页面滚动时,背景附件一起滚动
fixed:表示在文字页面滚动时,背景附件固定不滚动

背景图像位置

background-position属性用于设置背景图像的具体的起始位置

background-position:参数1 参数2

语法说明:

1.图形位置一般需要设置两个参数,且用空格分隔
2.第一个参数表示水平位置,第二个参数表示垂直位置
3.如果只设置一个参数,另一个参数自动为50%或位置居中

属性值	说明
left\|center\|right	表示水平方向居左、居中、居右
top\|center\|right	表示垂直方向顶部、中部、底部
x% y%	x%表示水平位置，y%表示垂直位置（左上角是0% 0%）
xpos ypos	xpos表示水平位置，ypos表示垂直位置（左上角是0 0）

CSS列表样式

基本语法:

list-style-type:属性值;  /*设置列表类型,共九种*/
list-style-image:url("图像文件名称")|none; /*设置列表替代图像*/
list-style-position:outsize|inside  /*设置图像位置*/

list-style-type相关属性值

属性值	说明
disc	实心圆●
circle	空心圆○
square	实心方块■
decimal	阿拉伯数字123…
lower-roman	小写罗马数字ⅰⅱⅲⅳ…
upper-roman	大写罗马数字ⅠⅡⅢⅣ…
lower-alpha	小写英文字母abc…
upper-alpha	大写英文字母ABC…
none	不使用项目符号

list-style-position相关属性值

属性值	说明
outsize	默认,将标志放在文本之外，而且任何换行文本在标志下均不对齐
inside	将标志放在文本之内，而且任何换行文本在标志下均对齐

复合属性

list-style:list-style-type list-style-image list-style-position;

知识来源于网上

小马Mark

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4.CSS属性相关

相关单位绝对单位英寸(in)：使用较为广泛的长度单位（1in=2.54cm）厘米(cm)：生活中最常用的的长度单位。毫米(mm)：在研究领域使用比较广泛。磅(pt)：在印刷领域使用较为广泛，也称为点。CSS也常用pt设置字体大小，12磅的字体等于1/6大小（1pt=1/72in）pica(pc)：在印刷领域使用较多，1pc=12pt，所以也称为12点活字。相对单位emem表示元素的字体的高度能够根据字体的font-size属性值来确定单位的大小p{f
复制链接

扫一扫