Day03常用样式

小猪VS恒哥

已于 2022-08-06 13:49:35 修改

阅读量220

点赞数

分类专栏： 3.HTML5+CSS 文章标签： html css

于 2022-08-06 13:41:50 首次发布

本文链接：https://blog.csdn.net/qq_42263859/article/details/126193778

版权

3.HTML5+CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Day03常用样式

作者：何张恒

时间：2022-08-05

章节博客地址：https://blog.csdn.net/qq_42263859/article/details/126179093?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22126179093%22%2C%22source%22%3A%22qq_42263859%22%7D&ctrtid=SNUrL

01、CSS Fonts字体属性

属性	描述
font	在一个声明中设置所有的字体属性
font-family	设置文本的字体类型(如：宋体、楷体)
font-style	设置文本的字体样式(如：normal、oblique、italic)
font-size	设置文本的字体大小
font-weight	设置字体的粗细(如：默认值正常normal、加粗bold)
font-variant	以小型大写字体或者正常字体显示文本。

1、简写属性：font

font 简写属性在一个声明中设置所有字体属性。

可设置的属性是（按顺序）：

①字体样式：font-style

②字体是否正常显示：font-variant

③字体粗细：font-weight

④字体大小/行高：font-size/line-height

⑤字体类型：font-family

/* 设置字体：斜体、加粗、字体大小12px/行高30px、楷体 */
font: oblique bold 12px/20px "楷体";

2、字体类型：font-family

font-family 属性设置文本的字体类型。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意：①如果字体系列的名称超过一个字，它必须用引号；②多个字体系列是用一个逗号分隔指明

font-family: times,"Times New Roman","宋体";

3、字体样式：font-style

主要是用于指定斜体文字的字体样式属性。

这个属性有3个值

normal：正常-正常的显示文本。默认值。
oblique：斜体-以斜体字显示的文字
italic：斜体。对于没有斜体变量的特殊字体，将应用 oblique，故不建议使用

font-style: normal;    /* 正常-正常显示文本 */
font-style: oblique;   /* 斜体-以斜体字显示的文字 */

4、字体大小：font-size

font-size 属性设置文本的大小。

font-size: 24px;    /* 设置字体大小为24px */

三种设置字体大小的方式：

设置字体大小像素

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

用em来设置字体大小

h1 {font-size:2.5em;}    /* 40px/16=2.5em */
h2 {font-size:1.875em;}  /* 30px/16=1.875em */
p {font-size:0.875em;}   /* 14px/16=0.875em */

使用百分比和em组合

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

5、字体粗细：font-weight

三段文字设置****的粗细：

font-weight:normal;   /* 设置字体正常显示*/
font-weight:bold;     /*设置字体加粗*/
font-weight:900;      /* 设置字体字体粗细为900 */

属性值：

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100~900	定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细

6、定义小型大写字母文本：font-variant

font-variant 属性主要用于定义小型大写字母文本

font-variant: normal;      /*默认值。浏览器会显示一个标准的字体。*/
font-variant:small-caps;   /*把段落设置为小型大写字母字体*/

02、CSS Text文本

属性	描述
color	设置文本颜色
text-indent	缩进元素中文本的首行
text-decoration	向文本中添加修饰(例如：underline下划线)
text-align	对齐元素中的文本
vertical-align	设置元素的垂直对齐
line-height	设置行高

7、文本颜色：color

颜色属性被用来设置文字的颜色。

表示颜色的方式：

方式1：颜色英文单词表示法，如：红色red、蓝色blue
方式2：RGB表示法 rgb(r,g,b) r,g,b分别表示0-255之间的数字
方式3：rgba表示法 rgba(r,g,b,a) r,g,b,a分别是0-255 a是表示透明度，数字介于0-1之间，数字越小越透明
方式4：十六进制表示法

color: red; 
color: rgb(255,0,0); 
color: rgba(255,0,0,0.5); 
color: #ff0000;

8、文本缩进：text-indent

文本缩进属性是用来指定文本的第一行的缩进。

text-indent: 2em;   /* 设置文本的缩进2em */
ext-indent: 32px;   /* 32px/16 = 2em */

属性值	描述
left	默认值，左对齐
right	右对齐
center	居中对齐
justify	两端对齐

9、文本装饰：text-decoration

text-decoration 属性用来设置或删除文本的装饰。

（1）从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

text-decoration:none;   /* 删除下划线 */

（2）也可以用于装饰文字：

text-decoration: underline;     /* 设置下划线 */
text-decoration: overline;      /* 设置上划线 */
text-decoration: line-through;  /* 设置贯穿线 */
text-decoration: none;          /* 去除装饰 */

属性值	描述
none	默认值。无装饰
blink	闪烁
underline	下划线
line-through	贯穿线
overline	上划线

10、文本对齐方式：text-align

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

text-align: left;      /* 文本左对齐 */
text-align: right;     /* 文本右对齐 */
text-align: center;    /* 文本居中对齐 */
text-align: justify;   /* 文本两端对齐 */

属性值	描述
left	默认值。左对齐
right	右对齐
center	居中对齐
justify	两端对齐

11、垂直对齐方式：vertical-align

vertical-align 属性设置一个元素的垂直对齐方式。

vertical-align: top;     /* 垂直顶端对齐 */
vertical-align: middle;  /* 垂直居中对齐 */
vertical-align: bottom;  /* 垂直底端对齐 */

以下为参考图片

![img](file:///D:\InstalledSoftware\3.QQ\保存消息\820732120\Image\C2C\AT_SJ[%GAKU]NQ)K6M2XX.png)

12、设置行高：line-height

字体最底端与字体内部顶端之间的距离（属性用于指定行之间的间距）

长度单位（em、ex、px）

line-height:38px;   /* 设置行高为38px */

03、CSS Link超链接

注意：设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

链接状态	描述
a:hover	当用户鼠标放在链接上时
a:active	链接被点击的那一刻
a:link	正常，未访问过的链接
a:visited	用户已访问过的链接

			a{
				text-decoration: none; /* 去除下划线 */
			}
			/* 当用户鼠标放在链接上时 ：显示红色red、显示下划线*/
			a:hover{
				color: red;   /* 设置字体颜色red */
				text-decoration: underline;   /* 添加下划线 */
			}
			/* 当链接被点击的那一刻 ：显示蓝色blue、显示贯穿线*/
			a:active{
				color: blue;  /* 设置字体颜色blue */
				text-decoration: line-through;  /* 添加贯穿线 */
			}
			
			a:link{
				color: #FFFF00;
			}
			a:visited{
				color: red;
			}

13、超链接样式：a:hover

a:hover表示当用户鼠标放在链接上时，显示里面内容设置的属性

/* 当用户鼠标放在链接上时 ：显示红色red、显示下划线*/
a:hover{
	/* 以下两个为常见设置的的链接样式*/
	color: red;   /* 设置字体颜色red */
	text-decoration: underline;   /* 添加下划线 */
}

04、CSS 列表：

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-type	设置列表项标志的类型（例如：实心圆、空心圆、实心方块等）
list-style-position	设置列表中列表项标志的位置
list-style-image	使用图像来替换列表项的标记

14、列表-简写属性：list-style

list-style:简写属性，用于把所有用于列表的属性设置于一个声明中。

可以设置的属性（按顺序）:

list-style-type：设置列表项标志的类型（例如：实心圆、空心圆、实心方块等）
list-style-position：设置列表中列表项标志的位置
list-style-image：使用图像来替换列表项的标记。

list-style:none;  /* 无标记(去除列表前的项目符号) */

ul
{	
    list-style:square url("sqpurple.gif");
}

15、list-style-type

设置列表项标志的类型（例如：实心圆、空心圆、实心方块等）

list-style-type: none;   /* 无标记(去除列表前的项目符号) */
list-style-type: disc;   /* 实心圆，默认 */
list-style-type: circle; /* 空心圆 */
list-style-type: square; /* 实心方块 */

属性	描述
none	无标记(去除列表前的项目符号)
disc	实心圆，默认
circle	空心圆
square	实心方块

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a{
				list-style-type: none;   /* 无标记(去除列表前的项目符号) */
			}
			.b{
				list-style-type: disc;   /* 实心圆，默认 */
			}
			.c{
				list-style-type: circle; /* 空心圆 */
			}
			.d{
				list-style-type: square; /* 实心方块 */
			}
		</style>
	</head>
	<body>
		<!-- 无序列表 -->
		<ul>
			<li class="a">第1项</li>
			<li class="b">第2项</li>
			<li class="c">第3项</li>
			<li class="d">第4项</li>
		</ul>	
	</body>
</html>

16、list-style-position

list-style-position属性指示如何相对于对象的内容绘制列表项标记。

属性值：

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

解析：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQSXuA03-1659764955278)(C:\Users\HeZhangHeng\AppData\Roaming\Typora\typora-user-images\image-20220806114347751.png)]

17、list-style-image

指定列表中的列表项标记的图像：

url：图像的路径
none：默认。无图形被显示
inherit：规定应该从父元素继承 list-style-image 属性的值

ul
{
	list-style-image:url('sqpurple.gif');
}

05、CSS Backgrounds背景

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-repeat	设置背景图片是否及如何重复(水平平铺、垂直平铺、不平铺)
background-position	指定背景图像的位置(通过：background-position-x和background-position-y)

18、背景简写：background

背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性值，各值之间用空格分隔，不分先后顺序：

background-color
background-image
background-repeat
background-attachment
background-position

background-color: #C00;   /*背景色*/
background-image: url(../image/arrow-down.gif);  /* 插入背景图片 */
background-repeat: no-repeat;     /* 不平铺 */
background-position-x: 205px;     /* 向右移动205px */
background-position-y:10px ;      /* 向下移动10px */

/* 上述5个注释可简写为如下所示 */
/* 设置背景色#C00、插入图片、向右移动205px、向下移动10px、不平铺 */
background: #C00 url(../image/arrow-down.gif) 205px 10px no-repeat;

18、背景颜色：background-color

background-color 属性定义了元素的背景颜色.

/* 四种设置背景颜色的方式 */
background-color: red;       
background-color:#0000A8;
background-color:rgb(0,0,255);
background-color:rgba(0,0,255,0.8);

19、背景图像：background-image

background-image 属性设置一个元素的背景图像。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

background-image: url(../image/arrow-down.gif);

20、背景重复：background-repeat

设置如何平铺对象的 background-image 属性。

默认情况下，重复background-image的垂直和水平方向。

值	说明
repeat	默认。背景图像将向垂直和水平方向重复。
repeat-x	水平平铺
repeat-y	垂直平铺
no-repeat	不平铺
inherit	指定 background-repeat 属性设置应该从父元素继承

（1）水平平铺、垂直平铺、不平铺

background-repeat: repeat-x;    /* 水平平铺 */
background-repeat: repeat-y;    /* 垂直平铺 */
background-repeat:no-repeat;    /* 不平铺 */

21、背景图像起始位置：background-position

background-position属性设置背景图像的起始位置。

/* 第一个值是水平位置，第二个值是垂直。 */
/* 左上角是原点0,向右为x轴正方向，向下为y轴正方向 */
/* 单位可以是像素、百分数等 */
background-position-x: 205px;     /* 向右移动205px */
background-position-y:10px ;      /* 向下移动10px */