前端——CSS2常用属性

最新推荐文章于 2024-10-14 18:12:09 发布

caffeinelala

最新推荐文章于 2024-10-14 18:12:09 发布

阅读量110

点赞数

分类专栏：前端文章标签：前端 css

本文链接：https://blog.csdn.net/qq_41880932/article/details/95772806

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS文本样式

font特性

font-style
- normal：默认值。浏览器显示一个标准的字体样式。
- italic：浏览器会显示一个斜体的字体样式。
- oblique：浏览器会显示一个倾斜的字体样式。
- inherit：规定应该从父元素继承字体样式。
font-weight
- normal：默认值。定义标准的字符。
- bold：定义粗体字符。
- bolder：定义更粗的字符。
- 400 等同于 normal，而 700 等同于 bold。
- inherit：规定应该从父元素继承字体的粗细。
font-size
- xx-small、x-small、small、medium、large、x-large、xx-large：默认值：medium。
- smaller：把 font-size 设置为比父元素更小的尺寸。
- larger：把 font-size 设置为比父元素更大的尺寸。
- %：把 font-size 设置为基于父元素的一个百分比值。
- inherit：规定应该从父元素继承字体尺寸。
font-family
- family-name - 指定的系列名称：具体字体的名称，比如：“times”、“courier”、“arial”。
- generic-family - 通常字体系列名称：比如：“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”。
- {font-family:"Times New Roman",Georgia,Serif;}
line-height
- normal:默认。设置合理的行间距。
- number:设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
- %:基于当前字体尺寸的百分比行间距。
- inherit:规定应该从父元素继承 line-height 属性的值。
font-variant
- small-caps：浏览器会显示小型大写字母的字体。
font
- 综合简写：{font:italic bold 12px/20px arial,sans-serif;}

text文本格式

color：设置文本颜色
letter-spacing：设置字符间距
word-spacing：设置字间距
white-space：设置元素中空白的处理方式
- pre：空白会被浏览器保留。其行为方式类似 HTML 中的 pre标签。
- nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
- pre-wrap：保留空白符序列，但是正常地进行换行。
- pre-line：合并空白符序列，但是保留换行符。
direction：设置文本方向。
- ltr：默认。文本方向从左到右。
- rtl:文本方向从右到左。
vertical-align：设置元素的垂直对齐
- top：把元素的顶端与行中最高元素的顶端对齐
- middle：把此元素放置在父元素的中部。
- baseline：默认。元素放置在父元素的基线上。
- bottom：把元素的底端与行中最低的元素的顶端对齐。
- %：使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
- sub：垂直对齐文本的下标。
- super：垂直对齐文本的上标
- text-bottom：把元素的底端与父元素字体的底端对齐。
text-align：对齐元素中的文本
text-decoration：向文本添加修饰
text-indent：缩进元素中文本的首行
text-shadow：设置文本阴影
text-transform：控制元素中的字母
- capitalize：文本中的每个单词以大写字母开头。
- uppercase：定义仅有大写字母。
- lowercase：定义无大写字母，仅有小写字母。

CSS背景

background-image：指定要使用的一个或多个背景图像
background-color：指定要使用的背景颜色
background-position：指定背景图像的位置
background-size：指定背景图片的大小
background-repeat：指定如何重复背景图像
background-origin：指定背景图像的定位区域、
- border-box：背景图像边界框的相对位置，默认
- padding-box：背景图像填充框的相对位置
- content-box：背景图像的相对位置的内容框
background-clip：指定背景图像的绘画区域
- border-box：默认值。背景绘制在边框方框内
- padding-box：背景绘制在衬距方框内
- content-box：背景绘制在内容方框内
background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动。
- scroll：背景图片随页面的其余部分滚动。默认
- fixed：背景图像是固定的
background：: #000000 url(“img/bg-little.png”) no-repeat center fixed;

CSS列表

list-style-image：将图象设置为列表项标志。
- url：图像的路径。
list-style-position：设置列表中列表项标志的位置。
- inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
- outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
list-style-type：设置列表项标志的类型。
list-style：简写属性。用于把所有用于列表的属性设置于一个声明中
- {list-style:square url("sqpurple.gif");}

CSS定位

position
- absolute：绝对定位
- relative：相对定位
- fixed：固定定位
- sticky：粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。