<meta charset="utf-8">
使用 opacity 属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度
RGBA 颜色值设置背景色而不是文本的不透明度
background-position 属性用于指定背景图像的位置。
background-attachment 属性指定背景图像是应该滚动还是固定的(不会随页面的其余部分一起滚动)
指定应该固定背景图像:background-attachment: fixed;
指定背景图像应随页面的其余部分一起滚动:background-attachment: scroll;
在使用简写属性时,属性值的顺序为:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
border-style 属性指定要显示的边框类型。
允许以下值:
- dotted - 定义点线边框
- dashed - 定义虚线边框
- solid - 定义实线边框
- double - 定义双边框
border 属性是以下各个边框属性的简写属性:
- border-width
- border-style(必需)
- border-color
border-radius 属性用于向元素添加圆角边框
auto 值
您可以将 margin 属性设置为 auto,以使元素在其容器中水平居中。
然后,该元素将占据指定的宽度,并且剩余空间将在左右边界之间平均分配。
inherit 值
本例使 <p class="ex1"> 元素的左外边距继承自父元素(<div>):
实例
使用 inherit 值:
div { border: 1px solid red; margin-left: 100px; } p.ex1 { margin-left: inherit; }
使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距,则可用的内容空间会减少。
CSS 轮廓
轮廓是在元素周围绘制的一条线,在边框之外,以凸显元素。
CSS 拥有如下轮廓属性:
- outline-style
- outline-color
- outline-width
- outline-offset
- outline
注意:轮廓与边框不同!不同之处在于:轮廓是在元素边框之外绘制的,并且可能与其他内容重叠。同样,轮廓也不是元素尺寸的一部分;元素的总宽度和高度不受轮廓线宽度的影响。
除非设置了 outline-style 属性,否则其他轮廓属性都不会有任何作用!
使用 outline-color: invert,执行了颜色反转。这样可以确保无论颜色背景如何,轮廓都是可见的
outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。
下例指定边框边缘外 25px 的轮廓:
此段落的边框外有 25px 的轮廓。
实例
p { margin: 50px; border: 1px solid black; outline: 1px solid red; outline-offset: 25px; }
text-align 属性设置为 "justify" 后,将拉伸每一行,以使每一行具有相等的宽度,并且左右边距是直的
direction 和 unicode-bidi 属性可用于更改元素的文本方向:
实例
p { direction: rtl; unicode-bidi: bidi-override; }
vertical-align 属性设置元素的垂直对齐方式。
text-transform 属性用于指定文本中的大写和小写字母。
它可用于将所有内容转换为大写或小写字母,或将每个单词的首字母大写
text-indent 属性用于指定文本第一行的缩进
letter-spacing 属性用于指定文本中字符之间的间距
line-height 属性用于指定行之间的间距
word-spacing 属性用于指定文本中单词之间的间距
white-space 属性指定元素内部空白的处理方式
text-shadow 属性为文本添加阴影。
在 CSS 中,有五个通用字体族:
- 衬线字体(Serif)- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
- 无衬线字体(Sans-serif)- 字体线条简洁(没有小笔画)。它们营造出现代而简约的外观。
- 等宽字体(Monospace)- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
- 草书字体(Cursive)- 模仿了人类的笔迹。
- 幻想字体(Fantasy)- 是装饰性/俏皮的字体。
font-family 属性规定文本的字体。
font-style 属性主要用于指定斜体文本。
此属性可设置三个值:
- normal - 文字正常显示
- italic - 文本以斜体显示
- oblique - 文本为“倾斜”
font-variant 属性指定是否以 small-caps 字体(小型大写字母)显示文本
cursor 属性指定要显示的光标类型
list-style-image 属性将图像指定为列表项标记
list-style-position 属性指定列表项标记(项目符号)的位置。
"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。
"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分,因此它将成为文本的一部分,并在开头推开文本
border-collapse 属性设置是否将表格边框折叠为单一边框
如需控制边框和表格内容之间的间距,请在 <td> 和 <th> 元素上使用 padding 属性
position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对(relative)和固定(fixed)之间切换
z-index 属性指定元素的堆栈顺序
overflow 属性可设置以下值:
- visible - 默认。溢出没有被剪裁。内容在元素框外渲染
- hidden - 溢出被剪裁,其余内容将不可见
- scroll - 溢出被剪裁,同时添加滚动条以查看其余内容
- auto - 与 scroll 类似,但仅在必要时添加滚动条
overflow 属性仅适用于具有指定高度的块元素
设置元素的 display 属性仅会更改元素的显示方式,而不会更改元素的种类。因此,带有 display: block; 的行内元素不允许在其中包含其他块元素。