CSS3入门

最新推荐文章于 2022-04-02 21:16:42 发布

小平头＠king

最新推荐文章于 2022-04-02 21:16:42 发布

阅读量502

点赞数

分类专栏： HTML+CSS3 文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_53545557/article/details/112772590

版权

HTML+CSS3 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

一.CSS核心基础

1.CSS样式规则

CSS样式规则，具体格式如下：

选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

例：对标题标记进行控制

h2{font-size:20px; color:red;}

CSS代码结构中的几个特点，具体如下：

CSS样式中的选择器严格区分大小写，属性和属性值不区分大小写，按照书写习惯一般将“选择器、属性和属性值”都采用小写的方式
多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。例如p{font-family:"Times New Roman"；}
在编写CSS代码时，为了提高代码的可读性，通常加上CSS注释。例如/*这是CSS注释文本，此文本不会显示在浏览器窗口中*/
在CSS代码中空格是不被解析的，花括号及分号前后的空格可有可无

2.引入CSS样式表

（1.）行内式

格式：<标记名 style="属性1：属性值1;属性2：属性值2；属性3：属性值3；">内容</标记名>
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行内式引入CSS样式表</title>
	</head>
	<body>
		<h2 style="font-size: 20px; color: red;">
			使用CSS行内式修饰二级标题的字体颜色和大小
		</h2>
	</body>
</html>

效果：在这里插入图片描述

（2.）内嵌式

格式：

<head>
<style type="text/css">
   选择器 {属性1：属性值1；属性2：属性值2；属性3：属性值3；}
</style>
</head>

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内嵌式引入CSS样式表</title>
		<style type="text/css">
			h2{text-align: center;}
			p{
				font-size: 16px;
				color: red;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<h2>内嵌式CSS样式</h2>
		<p>使用CSS标记可定义内嵌式CSS样式表</p>
	</body>
</html>

效果：在这里插入图片描述

（3.）链入式(外部式）

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标记将外部样式表文件链接到HTML文档中，格式：

<head>
<link href="css文件的路径" type="text/css" rel="stylesheet"/>
</head>

该语法中，<link/>标记需要放在<head>头部标记中，并且必须指定<link/>标记的属性，具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径
type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件

3.CSS基础选择器

（1.）标记选择器

标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。
格式：

标记名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

例如：用p标签定义HTML页面中所有段落的样式，示例：

p{font-size:12px;color:red;font-family:"微软雅黑";}

（2.）类选择器（class选择器）

类选择器使用"."(英文点号）进行标识，后面紧跟类名，格式：

.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类选择器</title>
		<style type="text/css">
			.red{color: red;}
			.green{color: green;}
			.font22{font-size: 22px;}
			p{
				text-decoration: underline;
				font-family: "微软雅黑";
			}
		</style>
	</head>
	<body>
		<h2 class="red">二级标题文本</h2>
		<p class=" green font22">段落一文本内容</p>
		<p class="red font22">段落二文本内容</p>
		<p>段落三文本内容</p>
	</body>
</html>

效果：在这里插入图片描述

（3.）id选择器

id选择器使用“#”进行标识，后面紧跟id名，格式：

#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3}

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>id选择器</title>
		<style type="text/css">
			#bold{font-weight: bold;}
			#font24{font-size: 24px;}
		</style>
	</head>
	<body>
		<p id="bold">博主真帅</p>
		<p id="font24">博主真帅</p>
		<p id="font24">博主真帅</p>
		<p id="bold font24">博主真帅</p>
	</body>
</html>

效果：
在这里插入图片描述

（4.）通配符选择器

通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。格式

*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

例：

*{
  margin:0；   /*定义外边距*/
  padding:0;   /*定义内边距*/
}

（5.）标签指定式选择器

标签指定式选择器又称交集选择器，由两个选择器构成，其中一个为标记选择器，第二个为class选择器或id选择器

（6.）后代选择器

后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后代选择器</title>
		<style type="text/css">
			p strong{color: red;}    /*后代选择器 */
			strong{color: blue;}
		</style>
	</head>
	<body>
		<p>博主<strong>是真的好帅</strong></p>
		<strong>博主好帅</strong>
	</body>
</html>

在这里插入图片描述

（7.）并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、类选择器及id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为他们定义相同的CSS样式。
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>并集选择器</title>
		<style type="text/css">
			h2,h3,p{color: red; font-size: 14px;}    /* 不同标记组成的并集选择器 */
			h3,.special,#one{text-decoration: underline;}   /* 标记,类,id组成的并集选择器 */
		</style>
	</head>
	<body>
		<h2>博主好帅</h2>
		<h3>博主好帅（有下划线）</h3>
		<p class="special">博主真的好帅（有下划线）</p>
		<p>博主好帅</p>
		<p id="one">博主好帅（有下划线）</p>
	</body>
</html>

效果：
在这里插入图片描述

二.文本样式属性

1.字体样式属性

（1.）font-size:字号大小

用于设置字号大小，单位一般为px（像素）
格式：

p{font-size:12px;}

（2.)font-family:字体

用于设置字体，网页中常用的字体有宋体，微软雅黑，黑体等
格式：

p{font-family:"微软雅黑";}

(3.)font-weight:字体粗细

定义字体粗细，属性值表如下：

值	描述
normal	默认值。定义标准字符
bold	定义粗体字符
bolder	定义更粗的字符
ligher	定义更细的字符

（4.）font-style:字体风格

定义字体风格，如设置斜体、倾斜或正常

normal:默认值，浏览器会显示标准的字体样式
italic:浏览器会显示斜体的字体样式
oblique:浏览器会显示倾斜的字体样式

（5.）font：综合字体样式

font属性用于对字体样式的综合设置，其基本语法格式为：

选择器{font：font-style font-weight font-size/line-hingt font-family;}

使用font属性时，必须按照上面的语法格式书写，各个属性以空格隔开。例如：

p{
   font-family:Arial,"宋体";
   font-size:30px;
   font-style:italic;
   font-weight:bold;
}

等价于：

p{font:italic bold 30px Arial,"宋体"；}

（6.）word-wrap属性

用于实现长单词和URL地址的自动换行，格式：

选择器{word-wrap:属性值：}

word-wrap取值有两种：

值	描述
normal	只在允许的断字点换行
break-word	在长单词或URL地址内部进行换行

2.文本外观属性

（1.）color：文本颜色

用于定义文本的颜色，取值如下：

预定义的颜色值，如red、green、bule等
十六进制，如#FF0000,#FF6600,#29D94等。实际工作中，十六进制是最常用的定义颜色的方式

（2.）letter-spacing：字间距

定义字间距，所谓的字间距就是字符与字符之间的空白

（3.）word-spacing：单词间距

用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可以是不同单位的数值，允许使用负值，默认为normal。
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的是字母之间的间距，而word-spacing定义的为英文单词之间的间距。
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>word-spacing和letter-spacing</title>
		<style type="text/css">
			.letter{letter-spacing: 20px;}
			.word{word-spacing: 20px;}
		</style>
	</head>
	<body>
		<p class="letter">letter spacing(字母间距)</p>
		<p class="word">word spacing word spacing（单词间距）</p>
	</body>
</html>

效果：
在这里插入图片描述

（4.）line-height：行间距

用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。
line-height常用的属性值单位有3种，分别为像素px,相对值em和百分比%，实际使用中使用最多的是像素px。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行高line-height的使用</title>
		<style type="text/css">
			.one{
				font-size: 16px;
				line-height: 18px;
			}
		</style>
	</head>
	<body>
		<p class="one">
			段落1：使用像素px设置
		</p>
	</body>
</html>

效果：在这里插入图片描述

（5.）text-transform：文本转换

用于控制英文字符的大小，属性值：

none：没有装饰（正常文本默认值）
capitalize：首字母大写
uppercase：全部字符转换为大写
lowercase：全部字符转换为小写

（6.）text-decoration：文本装饰

属性如下：

none：没有装饰（正常文本默认值）
underline：下划线
overline：上划线
line-through：删除线

（7.）text-align水平对齐方式

用于设置文本内容的水平对齐，属性值如下：

left：左对齐（默认值）
right：右对齐
center：居中对齐

（8.）text-indent：首行缩进

用于设置首行缩进的文本，其属性值可谓不同单位的数值，em字符宽度的倍数，或相对于浏览器窗口的百分比%，允许使用负值，常用em作为设置单位
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首行缩进text-indent</title>
		<style type="text/css">
			.one{text-indent: 2em;}
		</style>
	</head>
	<body>
		<p>首行缩进</p>
		<p class="one">
			首行缩进
		</p>
	</body>
</html>

效果：在这里插入图片描述

（9.）text-shadow：阴影效果

用于为页面中的文本添加阴影效果，格式：

选择器{text-shadow：h-shadow v-shadow blur color；}

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>text-shadow属性</title>
		<style type="text/css">
			p{font-size: 50px;
			text-shadow: 10px 10px 10px red;}
		</style>
	</head>
	<body>
		<p>博主真帅</p>
	</body>
</html>

效果：
在这里插入图片描述

CSS高级特性

1.CSS层叠性和继承性

（1.）层叠性

层叠性是指多种CSS样式的叠加。例如，在使用内嵌式CSS样式表定义p标记字号大小为12像素，链入式定义p标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS样式叠加</title>
		<style type="text/css">
			p{
				font-size: 12px;
				font-family: "微软雅黑";
			}
			.special{font-size: 16px;}
			#one{color: red;}
		</style>
	</head>
	<body>
		<p class="special" id="one">博主真帅</p>
		<p>博主真帅</p>
	</body>
</html>

效果：
在这里插入图片描述

（2.）继承性

所谓继承性，就是指子标记会继承父标记的某些样式，如文本的颜色和字号。如果定义主题元素body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他标记都嵌套在<body>标记中，是<body>标记的子标记
并不是所有属性都可以继承，如下面这些属性就不可以继承：

边框属性
外边距属性
内边距属性
北京属性
定位属性
布局属性
元素宽高属性

2.CSS优先级

定义CSS样式时，经常出现两个或者更多规则应用在同一个元素上，这时就会出现优先级的问题。
在每一个基础选择器中都分配了一个权重，其中标记选择器权重为1，类选择器权重为10，id选择器权重为100。例：

    p strong{color:black;}              /* 权重为1+1 */
	strong.blue{color: green;}          /* 权重为1+10 */
	.father strong{color: yellow;}      /* 权重为10+1 */
	p.father strong{color: orange;}     /* 权重为1+10+1 */
	p.father .blue{color: gold;}        /* 权重为1+10+10 */
	#header strong{color: pink;}        /* 权重为100+1 */
	#header strong.blue{color: red;}    /* 权重为100+1+10 */

以下为特殊情况：

继承性权重为0时。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，它的权重都为0，也就是说子元素定义的样式会覆盖继承性的样式
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100.总之，它拥有比上面提到的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式叠优先级最大。
CSS定义了一个！important命令，该命令被赋予最大的优先级。也就是说不管权重如何及样式位置的远近，！important都具有最大优先级。例如：#header{color:red!important;}