CSS3常见样式声明

—Miss. Z—

已于 2022-09-03 16:55:08 修改

阅读量256

点赞数 1

分类专栏： HTML5/CSS3 文章标签： css3 html

于 2022-08-02 11:44:02 首次发布

本文链接：https://blog.csdn.net/weixin_42071236/article/details/125356152

版权

HTML5/CSS3 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

CSS3常见样式声明

color：元素内部的文字颜色

使用方式1：使用颜色的英文名称作为属性值(例：lightblue)
使用方式2：十六进制数值表示(例：#008c8c)
使用方式3：是方式2的简写，如#aabbcc的颜色值就可以简写为#abc
使用方式4：分别给出红、绿、蓝3个颜色分量的十进制数值(例：rgb(0,255,255))
使用方式5：分别给出红、绿、蓝3个颜色分量的百分比(例：hsl(0,79%,72%)或rgb(0%,0%,100%))

背景图

背景图和img元素的区别： img元素是属于HTML的概念；背景图属于css的概念

当图片属于网页内容时，必须使用img元素
图片仅用于美化页面时，必须使用背景图

background-image：用于为一个元素设置一个或者多个背景图像

在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。

background-color：元素背景颜色
background-repeat：定义背景图像的重复方式
background-size：指定背景图像大小，以像素或百分比显示

预设值：contain、cover，类似于object-fit

background-position：设置每一个背景图片的初始位置

预设值：left、bottom、right、top、center

雪碧图：雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位
background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的
fixed	背景图片不会随着页面的滚动而滚动
local	背景图片会随着元素内容的滚动而滚动
initial	设置该属性的默认值
inherit	指定 background-attachment 的设置应该从父元素继承

设置透明度
方法一： opacity：它设置的是整个元素的透明，它的取值是0 ~ 1

方法二：在颜色位置设置alpha通道(rgba)
font-size：元素内部文字的尺寸大小

长度单位px
px是一个长度单位，表示在浏览器上一个像素的大小。因为不同访问者的显示器的分辨率不同，而且每个像素的实际大小也不同，所以px被称为相对单位，也就是相对于一个像素的比例。
在CSS中，除了可以使用px作为长度单位，还可以使用以下5种单位设置大小(包括文字、div的高度和宽度等)，这5种单位都被称为绝对长度单位，它们不会随显示器的变化而变化。

绝对长度单位	含义
in	inch，英寸
cm	centimeter，厘米
mm	millimeter，毫米
pt	point，印刷的点数。在一般的显示器中，1pt相当于1/72inch
pc	pica，1pc=12pt

长度单位em和ex
它们和px类似，也是相对长度单位。1em表示的长度是其父元素中字母m的标准宽度，1ex则表示字母x的标准高度。当父元素的文字大小变化时，使用这两个单位的子元素的大小会同比例变化。

font-weight：文字粗细程度，可以取值数字，可以取值为预设值
strong元素：默认加粗
font-family：文字类型
必须用户计算机中存在的字体才会有效(建议使用多个字体，以匹配不同环境)
sans-serif：非衬线字体
font-style：字体样式，通常用它设置斜体
i元素，em元素：默认样式是倾斜字体
text-decoration：文本修饰，给文本加线
del元素：错误的内容
s元素：过期的内容
text-indent：首行文本缩进
对于中文的页面，首行缩进两字符：text-index:2em
line-height：每行文本的高度，该值越大，每行文本的距离越大
设置行高为容器的高度，可以让单行文本垂直居中
行高可以设置为纯数字，表示相对于当前元素的字体大小

line-height的取值：

<数字>：该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。如：line-height: 3.5;(先继承，再计算)
<长度>：指定<长度>用于计算 line box 的高度。参考<长度>了解可使用的单位。以 em 为单位的值可能会产生不确定的结果如：line-height: 3em;(先计算像素值，再继承)
<百分比>：与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果如：line-height: 34%;(先计算像素值，再继承)

letter-space：文字间隙
text-align：元素内部文字的水平排列方式
要设置左对齐或者右对齐，只需将text-align属性设置为left或right即可。如果要设置两端对齐，就将text-align属性设置为justify
font-variant ：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体
inherit	规定应该从父元素继承 font-variant 属性的值