CSS样式精粹-优快云博客

本文链接：https://blog.youkuaiyun.com/Gguo464652/article/details/107185854

web 内容大部分都是文本。CSS 里面的text-align属性可以控制文本的对齐方式。

text-align: justify;可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。

text-align: center;可以让文本居中对齐。

text-align: right;可以让文本右对齐。

text-align: left;是text-align的默认值，它可以让文本左对齐。

CSS提供的伪类是可以添加到选择器上的关键字，用来选择元素的指定状态。

比如，超链接可以使用:hover伪类选择器定义它的悬停状态样式。下面是悬停超链接时改变超链接颜色的 CSS：

a:hover {
color: red;
}

CSS 提供font-weight属性用于设置文本中所用的字体的粗细

CSS 提供line-height属性来设置行间的距离。行高，顾名思义，用来设置每行文字所占据的垂直空间。

CSS 里面的width属性来指定元素的宽度。属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。下面这个例子把图片的宽度设置为 220px：

img {
width: 220px;
}

CSS 里面的height属性来指定元素的高度。下面这个例子把图片的高度设置为 20px：

img {
height: 20px;
}

术语：Strong => s => 加粗。

你可以使用strong标签来加粗文字。添加了strong标签后，浏览器会自动给元素应用font-weight:bold;。

术语：Underline => u => 下划线。

你可以使用u标签来给文字添加下划线。添加了u标签后，浏览器会自动给元素应用text-decoration: underline;。

术语：emphasis => em => 强调。

你可以使用em标签来强调文本。由于浏览器会自动给元素应用font-style: italic;，所以文本会显示为斜体。

术语：Strikethrough => s => 删除线。

你可以用s标签来给文字添加删除线，~~我是明晃晃的删除线~~，它代表着这段文字不再有效。添加了s标签后，浏览器会自动给元素应用text-decoration: line-through;。

术语：Horizontal Rule => hr => 水平线。

你可以用hr标签来创建一条宽度撑满父元素的水平线。它一般用来表示文档主题的改变，在视觉上将文档分隔成几个部分。

文字的父元素上添加background-color属性还可以使用rgba();

rgba 代表：
  r = red 红色
  g = green 绿色
  b = blue 蓝色
  a = alpha 透明度

RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。rgba()非常棒，因为你可以设置颜色的透明度，这意味着你可以做出一些很漂亮的半透明效果。

box-shadow属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。

box-shadow属性的每个阴影依次由下面这些值描述：

offset-x阴影的水平偏移量；
offset-y阴影的垂直偏移量;
blur-radius模糊距离；
spread-radius阴影尺寸；
颜色。

其中blur-raduis和spread-raduis是可选的。

下面是创建了多个阴影的 CSS 例子，阴影加了模糊效果，颜色是透明度很高的黑色:

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

CSS 里的opacity属性用来设置元素的透明度。

值 1 代表完全不透明。
值 0.5 代表半透明。
值 0 代表完全透明。

透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。

CSS 里面的text-transform属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示，且无需直接改变 HTML 元素中的文本。

下面的表格展示了text-transform的不同值对文字 “Transform me” 的影响。

Value	Result
`lowercase`	"transform me"
`uppercase`	"TRANSFORM ME"
`capitalize`	"Transform Me"
`initial`	使用默认值
`inherit`	使用父元素的`text-transform`值。
`none`	Default:不改变文字。

更改元素的相对位置

CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。

当元素的 position 设置为relative时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。 CSS 里控制各个方向偏移量的对应的属性是left、right、top和bottom。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems。下面的例子展示了段落向上偏移 10 像素：

p {
position: relative;
bottom: 10px;
}

把元素的 position 设置成 relative 并不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。CSS 里面的top、bottom、left和right定义了元素在相应方位的偏移距离。

绝对定位的参照物是元素的父元素

CSSposition属性的取值选项absolute，absolute相对于其包含块定位。和relative定位不一样，absolute定位会将元素从当前的文档流里面移除，周围的元素会忽略它。可以用 CSS 的 top、bottom、left 和 right 属性来调整元素的位置。absolute定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是position:relative;）,浏览器会继续寻找直到默认的 body 标签。