CSS笔记之常用CSS属性（三）

最新推荐文章于 2025-03-27 10:44:06 发布

小明的Fire计划

最新推荐文章于 2025-03-27 10:44:06 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css 文章标签： html 学习 css 前端笔记 css3

本文链接：https://blog.youkuaiyun.com/AIMing_byte/article/details/133147285

html+css 专栏收录该内容

27 篇文章

订阅专栏

四，常用CSS属性

1.字体属性

定义字体相关的样式

属性	含义	说明
font-size	大小	可以使用多种单位(px,百分比%)
font-weight	粗细
font-family	字体
font-style	样式
font	简写

1.1 font-size

取值:

inherit 继承，默认从父标签继承字体大小（默认值），所有CSS属性的默认值都inherit

px 像素 pixel

HTML根元素默认字体大小为16px，也称为基础字体大小

1.2 font-weight

取值:

normal 普通（默认）

bold 粗体

自定义 400 normal、700 bold

1.3 font-family

要求系统中要安装指定的字体

一般建议写3种字体：首选、其次、备用，以及逗号隔开

语法格式：

/* 设置英文字体和中文字体 */  
font-family: "Helvetica Neue", "Microsoft YaHei", Arial;  
  
/* 设置英文字体和特殊字体 */  
font-family: "Helvetica Neue", cursive;

特点：

font-family属性值可以设置一个或多个字体名称，浏览器将按照设定的顺序依次尝试加载这些字体。如果找不到用户指定的字体，浏览器将使用默认的字体来显示文本。

在font-family属性值中，每种字体名称必须用逗号分隔。如果字体系列名称包含空格或中文字符，则需要用引号括起来。

1.4 font-style

取值:

normal 普通

italic 斜体

1.5 font

简写属性：font:font-style | font-weight | font-size | font-family

必须按此顺序书写

2.文本属性

属性	含义	说明
color	颜色
line-height	行高	行之间的高度
text-align	水平对齐方式	取值：left、center、right
vertical-align	垂直对齐方式	取值：top、middle、bottom 可用于图片和文字的对齐方式
text-indent	首行缩进
text-decoration	文本修饰	取值：underline（下划线）、overline（上划线）、line-through（穿越线）
text-transform	字母大小写	取值：lowercase（小写）、uppercase(大写)、capitalize（首字母大写）
letter-spacing	字符间距
word-spacing	单词间距	只对英文有效
white-space	空白的处理方式	文本走出后是否换行，取值：nowrap
overflow	文本超出范围	文本超出是否不显示，取值:hidden(不显示)

2.1 color

取值，四种写法：

颜色名称，使用英文单词

16进制的RGB值：#RRGGBB
特定情况下可以缩写：

#FFFFFF ---> #FFF
#000000 ---> #000
#FF0000 ---> #F00
#00FF00 ---> #0F0
#0000FF ---> #00F
#CCCCCC ---> #CCC
#FF7300 ---> 无法缩写

注：不区分大小写

rgb函数：rgb(red,green,blue)
每个颜色的取值范围：[0,255]

rgb(255,0,0) ---> 红
rgb(0,255,0) ---> 绿
rgb(0,0,255) ---> 蓝

rgba函数：rgba(red,green,blue,alpha)

可以设置透明度，alpha取值范围：[0,1]，0表示完全透明，1表示完全不透明

rgba(255,0,0,1)---> 纯红
rgba(255,0,0,0,5)---> 红色半透明

3.背景属性

属性	含义
background-color	背景颜色
background-image	背景图片
background-repeat	背景图片的重复方式
background-position	背景图片的显示位置
background-attachment	背景图片是否跟随滚动
background	简写

3.1 background-color

取值：

transparent 透明
代表颜色的英文单词（red,green,blue等）
rgba()格式

3.2 background-image

必须使用url()方式指定图片的路径

如果是在.css样式文件中使用相对路径，此时是相对于css文件，不是相对于html文件

	background-image:url("./images/heihei.gif");

3.3 background-repeat

取值：repeat（默认）、repeat-x、repeat-y、no-repeat

3.4 background-position

默认背景图片显示在左上角

取值：

关键字： top、bottom、left、right、center

坐标：左上角为(0,0)坐标，向右为x正方向，向下为y正方向

	background-position:150px,100px;  //x,y

CSS雪碧图，即CSS Sprites，也称为CSS精灵，是一种CSS图像合并技术

含义：将网页中许多非常小的图标/图片整合到一张大图中，当访问该页面时只需要下载一次，可以减少访问服务器的次数，提高性能

原理：使用backgroundposition进行背景定位，使用坐标精确的定位出背景图片的背景

3.5 background-attachment

取值：scroll（默认）、fixed固定不动，local

scroll：背景图片附着在背景容器上，它是相对于背景容器（元素）固定，它会随着背景容器的滚动，而不是随着它的内容滚动（也可以看成是对元素边框固定）。

fixed：背景图片附着在浏览器的可视区域。因为浏览器的可视区域不具备滚动的性格，所以它是不滚动的。

local：这是CSS3新增的属性值。背景图片附着在背景容器的内容区域。它会随着内容的滚动而滚动。

3.6 background-size

作用：设置背景图片的大小。

语法：

backgrounf-size:宽度  高度;

取值：

数字+px

百分比：相对于当前盒子自身的宽高百分比

contain：包含，将背景图片等比例缩放，直到不会超出盒子的最大（有可能留有空白）

cover：覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

.box{
            width:400px;
            height:300px;  /* 盒子大小比例为4：3 */
            background-color:pink;
            background-image:url(../images/1.jpg); /*图片大小比例为1：1 */
            background-repeat:no-repeat;
           /*  background-size:contain;  如果图的宽或高与盒子的尺寸相同了，另一个方向停止缩放，导致盒子可能留有空白*/

            /*保证图的宽或高和盒子尺寸完全相同，导致图片显示不全 */
            background-size:cover; /*将背景图片等比例缩放，直到**刚好填满整个盒子**没有空白 */

            /* 工作中，图的比例和盒子的比例都是相同的，contain和cover效果完全相同*/
        }

<body>
     <div class="box"></div>
</body>

3. background

简写属性：background:background-color | background-image | background-repeat | background-position/background-size

以空格隔开，书写顺序没有要求

注意：

background-size一般分开写。

4.列表属性

属性	含义	说明
list-style-type	设置列表前的标记
list-style-image	将图像作为列表前的标记
list-style-position	设置标记的位置	取值:outside(默认)，inside
list-style	简写

4.1 list-style-type

取值：none、disc、circle、square、decimal

此时不再区分有序列表还是无序列表，只要设置列表前的标记就可以了

更多取值：

disc（实心圆）
circle（空心圆）
square（实心方块）
decimal（数字，默认值）
lower-roman（小写罗马数字）
upper-roman（大写罗马数字）
lower-alpha（小写字母）
upper-alpha（大写字母）
none（无标记）
armenian（ Armenian 数字）
cjk-ideographic（日语，中文和韩文字符）
georgian（乔治亚数字）
lower-greek（希腊小写字母）
hebrew（希伯来数字）
hiragana（平假名）
katakana（片假名）

4.2 list-style

简写属性：list-type:list-style-type | list-style-image | list-style-position

书写顺序没有要求

.math{
     	list-style-type:decimal;
     }
     .english{
     	list-style-image:url("./images/male.gif");
     }
     .biology{
     	list-style-type:square;
     	list-style-position:inside;
     }
     .chemical{
     	list-style:none;
     }
     .nav{
     	list-style:none;
     	float:left;
     	width:200px;
     }
	</style>
</head>
<body>
<ul>
<li class="math">数学</li>
<li class="english">英语</li>
<li class="biology">生物</li>
<li class="chemical">化学</li>
</ul>