CSS属性

七号码农

已于 2023-04-23 16:44:49 修改

阅读量182

点赞数

文章标签：前端 html css

于 2023-04-23 14:54:58 首次发布

本文链接：https://blog.csdn.net/m0_57491320/article/details/130321618

版权

1、字体

    字体 font-family
    字体样式 font-style
    缩写形式 font的缩写形式依次为font-style、font-weight、font-size、font-family，分别对应了字体样式、字体粗细、字号、字体族.

2、字号与颜色属性

1 、设置字体粗细：font-weight，可选属性值：bold加粗、lighter细体或者填写100-900的数字（400为正常，700为加粗）
2、设置字体大小：font-size，属性值通常为px或者%
3、设置字体颜色：color 属性值有三种表达方式

     1）直接写颜色的英文名字：red、green、blue 等。
     2）十六进制写法：#FFFFFF，#后每位可选值为数字 0～9 以及英文的 a～f，每两位表
     示一种颜色，分别对应红绿蓝的比例（最常用，推荐）。
     3）rgb 写法：
         rgb(0～255,0～255,0～255)
         rgba(0～255,0～255,0～255,0～1) 第 4 位数表示透明度，0 表示全透明，1 表示不透明。

4、设置透明度：opacity: 属性值为0-1的数字。此处需要注意一个点，那就是使用opacity时当前元素以及子元素都会透明，而使用rgba调整时，只会使当前元素透明，不会改变子元素透明度。

3、文本属性

1.line-height

设置行高，属性值有三种表达方式

1）像素单位，如48px

2）纯数值，表示正常行高的倍数

3）百分数，表示正常行高的百分数

2.text-align

设置块级元素中文字的水平对齐方式，属性值有left、center、right.

3.letter-spacing

设置字符间距，即字与字之间的间距，属性值通常为**px。

4.text-decoration

文本修饰属性，常用的有四个，分别为下划线underline、删除线line-through、上划线overline、不做修饰none。

5.overflow（overflow-x和overflow-y）

控制超出范围文本的显示方式，常用属性值有以下三个。

1）auto：根据文字多少自动显示滚动条

2）scroll：始终显示滚动条。

3）hidden：超出范围文本隐藏，可以通过overflow-x和overflow-y分别设置水平垂直方向的隐藏。

6.text-overflow

设置多余文字的显示方式，常用属性值有两个。

1）clip：剪裁文本；

2）ellipsis：使用省略号代替多余文字。

7.white-space

设置元素内的空白符怎样处理，常用属性有三个

1）normal：默认，空白会被浏览器忽略

2）nowrap：设置中文行末不断行显示。

3）pre：空白会被浏览器保留。作用类似于HTML中的<pre>标签

重点：如何让每行多余文字显示省略号？

1）white-space：nowrap；如果是中文，需设置行末不断行。

2）overflow：hidden；设置控件超出范围隐藏。

3）text-overflow：ellipsis；设置多余文本省略号显示。

8.text-shadow

设置文本阴影，有四个属性值。

1）水平阴影距离：必写，数值越大，阴影右移。

2）垂直阴影距离：必写，数值越大，阴影下移。

3）阴影模糊距离：可写，数值越大，阴影越模糊。默认为0，不模糊。

4）阴影颜色：可写，默认为黑色。

进阶版也可以设置多个阴影，看个人需求吧，中间以逗号隔开就可。

9.text-indent

首行缩进，可以使用像素值调整段落文字的首行缩进大小。

10.text-stroke

设置文字描边，需要注意text-stroke只能在webkit内核浏览器使用，所以平时我们必须使用前缀“-webkit-”，共接收两个属性值分别为描边的粗细，描边的颜色。

4、CSS常用的背景属性
1 背景颜色属性

background-color;
2. 背景图像属性
1、background-image

设置背景图像，背景和背景色同时存在时，背景图会覆盖背景色
2、background-repeat

当背景图大小小于元素实际区域时，会默认将背景图进行平铺展示，可选属性有四个分别为
1、no-repeat：不平铺
2、repeat：平铺（默认）
3、repeat-x：水平方向平铺
4、repeat-y：垂直方向平铺
3、background-size

设置背景图大小，可以分为两种方式设置
（1）指定宽度和高度
指定宽高的写法也分为两种，第一种是直接写带像素单位的数值；第二种是写百分比（即宽高为父容器宽高的百分比）.两种方式都有两个属性值，第一个属性值为宽度。第二个属性值为高度。
当只有一个属性值时，默认为宽度和高度等比缩放。
当有两个属性值时，会按照指定的高度与宽度进行压缩或拉伸显示。
（2）等比缩放
等比缩放也有两种方式，分别是contain和cover。
contain：图片等比缩放，缩放到宽或高的某一边等于父容器的宽高，另一边按照图片大小缩放（可能导致部分区域无法覆盖）.
cover：图片等比缩放，使背景图完全覆盖背景区域（可能导致背景图部分区域无法显示）
4、background-position

设置背景图像的起始位置，属性值有两种写法，第一种使用指定位置关键字；第二种是使用数值。
（1）指定位置关键字：属性值有left、right、top、bottom和center。当只写一个属性值时，另一个默认为center。
（2）使用数值：两个值，分别表示水平位置和垂直位置，可以采用像素值或百分比形式。
在使用background-position属性时需要注意以下三点：
1）当只写一个属性值时，默认为水平方向，垂直设为居中。
2）当使用像素时，数值表示图片的左上角往各个方向移动的实际距离。
需要注意的是，在水平方向上，正数右移，负数左移，在竖直方向上，正数下移，负数上移
3）当使用百分数时，一般只能拿正数。百分数表示去掉图片的大小后，元素中剩余空白距离的分布比例。
5、background-origin

设置背景图的定位方式，属性值有三个：
（1）border-box：从边框外缘开始。
（2）padding-box：从边框内缘开始。
（3）content-box：从文字内容区开始。
background-origin不改变背景图显示区域大小，只决定左上角定位位置。
6、background-clip

裁切背景图和背景色显示区域，其属性值有三个：
（1）border-box：从边框外缘开始显示。
（2）padding-box：从边框内缘开始显示。
（3）content-box：从文字内容区开始显示。
7、background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动，主要属性值有两个：
（1）scroll：默认值，背景图像会随着页面其余部分的滚动而滚动。
（2）fixed：当页面的其余部分滚动时，背景图像不会随之移动。
8、background

背景的简写属性，在一个声明中设置所有的背景属性，当使用简写属性时，属性值的顺序如下所示：
background-color
background-image
background-repeat
background-attachment
background-position
5、css其他常用属性
1、列表常用属性

list-style规定列表的样式，即每个列表前的标志
属性值   方式
none   无样式
circle   空心圆
disc   实心圆
square   实心正方形
decimal   数字
2、超链接样式属性

超链接与其他标签相比比较特殊，可以选择多个状态，如“未访问状态”“已访问状态”等，而用于表示不同状态样式的选择器就叫做伪类选择器
a:link 未被访问的状态
a:visited 已被访问的状态
a:hover 鼠标指针移动到链接上
a:active 正在被单击的链接
需要注意的时，当为链接不同状态设置不同样式时，按如下规则
1）a:hover必须位于a:link和a:visited之后。
2）a:active必须位于a:hover之后

6.表格属性

表格的CSS属性:
   1.表格的高度 height: 100px;
   2.表格的宽度 width:100px;
   3.表格的表框 border:1px;
   4.表格的背景色 bgcolor:red;(也可以使用16进制表示法,如红色16进制表示为 #ff0000);
   5.单元格与单元格之间的间距 cellsapcing:2px;
   6.单元格与内容之间的空隙 cellspdding:2px;
   7.水平对齐方式 align:left(左对齐)/center(居中对齐)/right(右对齐);
   8.垂直对齐方式 valign:top(顶对齐)/middle(中间对齐)/bottom(底部对齐);
   9. 合并单元格属性:
       (1) 合并行 rowspan="所需要合并的行数";
       (2) 合并列   colspan="所需要合并的列数";
       (以下为表单高级)
   10.合并相邻的单元格边框
        border-collapse:separate(边框分开)/collapse(边框合并,可以用来制作1像素边框的表格);
   11. 单元格间距(这个属性一定要加在table上)
       border-sapcing:2px;
   12. 无内容单元格的显示/隐藏
        empty-cells:show(显示)/hide(隐藏);
   13.固定宽度,不会虽内容的多少改变单元格的宽度
        table-layout:auto(自动)/fixed(固定);
   14. 表格的列标题
         <th></th> 要放到tr里边,
   15.添加组分割线
        rules:rows(行与行之间)/cols(列与列之间)/all(行与列之间)/
        groups(行组与列组之间)/none(没有线条)
   16 .数据的行分组
       <thead></thead> 表头
       <tbody></tbody> 表体
       <tfoot></tfoot> 表尾
                (一个table中只能包含一个thead,一个tfoot,可以有多个tbody)
     17. 数据列分组
        <colgroup span="value" > </colgroup>
        <col span="value"> </col>