CSS简述（1） - 技术栈

CSS概述

CSS（层叠样式表，Cascading Style Sheets）是一种样式表语言，用于对HTML文档控制外观，定义布局。例如、css涉及字体、颜色、边距、高度、背景图像、高级定位等方面

CSS的主要用途：

1. 分离内容和样式

可将页面内容和表现形式分隔开，页面内容存放在HTML文档中，而用于定义表现形式的css在一个.css文件中或HTML文档的某一部分

2. 提供了丰富的样式描述

CSS提供了丰富的样式描述能力，可以精确地控制网页中每一个元素的外观和布局。例如，你可以使用CSS来设置文本的颜色、字体、大小、间距等，以及元素的背景色、边框、边距、内边距等。

3. 层叠性

CSS的层叠性（Cascading）是指当多个样式应用于同一个元素时，这些样式会按照一定的规则进行叠加和覆盖。这种机制使得你可以为不同的元素或情境定义不同的样式，并通过优先级规则来决定最终应用哪个样式。

基本语法-行内样式表

在HTML元素的style属性中直接进行添加CSS样式的方法

行内样式表直接在HTML元素中使用style属性，并在其中定义CSS属性和值。每个CSS属性和值之间使用分号（;）分隔，整个style属性的值使用引号（可以是单引号或双引号）包裹起来，但属性值本身（如颜色值）通常不需要引号

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- css的基本语法 行内样式表（直接写在标签内部的属性）-->
		<p style="color: indianred;font-size: 20px;font-weight: bold;">静夜思</p>
		<!-- px指的是像素单位 ，font-size字体所占的像素尺寸，font-weight字体加粗-->
		<!-- 那么我们利用css的行内样式表去完成一首古诗的书写 -->
		<p style="color: limegreen;font-size: 16px;">床前明月光</p>
		<p style="color: limegreen;font-size: 16px;">疑是地上霜</p>
		<p style="color: limegreen;font-size: 16px;">举头望明月</p>
		<p style="color: limegreen;font-size: 16px;">低头思故乡</p>
		<!-- 当我们使用css的行内样式表使发现还不能避免冗余 -->
	</body>
</html>

虽然行内样式表在某些情况下（如快速测试或一次性样式）可能很有用，但它们通常不推荐用于大型或复杂的项目，原因如下：

难以维护：如果样式分布在HTML文件的多个位置，管理和维护这些样式将会变得困难。
重复代码：如果你需要在多个元素上应用相同的样式，使用行内样式表会导致代码重复。
无法利用CSS的强大功能：行内样式表只能用于单个元素，因此你无法利用CSS的选择器、伪类、媒体查询等强大功能。

基本语法-内嵌样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 内嵌样式表 -->
		<style>
			/* 对p标签的属性进行创建 */
			/* 标签选择器 */
			p{
				font-size: 16px;
				color: blueviolet;
				font-weight: 100;
			 }
		</style>
	</head>
	<body>
		<p>静夜思</p>
		<p>床前明月光</p>
		<p>疑是地上霜</p>
		<p>举头望明月</p>
		<p>低头思故乡</p>
	</body>
</html>

在HTML中的style标签中对p标签中样式进行定义

虽然内嵌样式表在某些情况下很有用，但通常不推荐在大型项目中过度使用它们。这是因为：

难以维护：如果你的样式分布在HTML文件的多个位置，那么管理和维护这些样式将会变得困难。
重复代码：如果你需要在多个元素上应用相同的样式，那么使用内嵌样式表将会导致重复的代码。
无法利用CSS的强大功能：内嵌样式表只能用于单个元素，因此你无法利用CSS的选择器、伪类、媒体查询等强大功能。

基本语法-外部样式表

外部样式表是将所有的样式放在或者多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式文件链接到HTML文档中

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../css/new_file.css" rel="stylesheet"/>
		<!-- rel="stylesheet"为指定导入的为一个样式表文件 -->
	</head>
	<body>
		<p>静夜思</p>
		<p>床前明月光</p>
		<p>疑是地上霜</p>
		<p>举头望明月</p>
		<p>低头思故乡</p>
	</body>
</html>

html 复制代码

p{
	font-size: 16px;
	color: blueviolet;
	font-weight: 100;
 }

rel: 定义了当前文档与被链接文档之间的关系。对于CSS文件，该值通常为stylesheet
type: 定义了被链接文档的MIME类型。对于CSS文件，该值通常为text/css,但在HTML5中，这个属性是可选的，因为浏览器默认将.css文件的MIME类型视为text/css
href: 指定了被链接文档的位置，可以是相对路径或绝对路径。在这个例子中，我们假设styles.css文件与HTML文件位于同一目录下

使用外部样式表的好处包括：

易于维护 ：所有的样式规则都集中在一个或多个.css文件中，使得修改和更新样式变得更加容易。
代码复用：你可以在一个或多个HTML文件中引用同一个外部样式表，从而实现样式的复用。
提高性能：浏览器会缓存外部样式表文件，这意味着如果多个页面使用了相同的样式表，那么浏览器只需要下载一次样式表文件。
内容与表现分离：使用外部样式表可以使HTML文件更加专注于内容，而CSS文件则专注于表现，这符合Web开发中的"内容与表现分离"的原则。

选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这是需要用到CSS选择器

选择器（Selector） 是CSS（层叠样式表）中用于"定位"或"选择"要应用样式规则的HTML元素的方式。选择器决定了哪些元素会受到影响，而声明块则包含了这些元素应如何展示的指令

常用的选择器：

标签选择器

通过标签选择器可以选择页面中所有的指定标签

标签名{}

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 内嵌样式表 -->
		<style>
			/* 对p标签的属性进行创建 */
			/* 标签选择器 */
			p{
				font-size: 16px;
				color: blueviolet;
				font-weight: 100;
			 }
		</style>
	</head>
	<body>
		<p>静夜思</p>
		<p>床前明月光</p>
		<p>疑是地上霜</p>
		<p>举头望明月</p>
		<p>低头思故乡</p>
	</body>
</html>

类选择器

通过标签的class属性值选中一组标签

.cclass属性值{}

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 类选择器 */
			.p1{
				color: aqua;
				font-size: 20px;
			}
			.p2{
				color: aquamarine;
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<p class="p1">静夜思</p>
		<p class="p2">床前明月光</p>
		<p class="p2">疑是地上霜</p>
		<p class="p2">举头望明月</p>
		<p class="p2">低头思故乡</p>
	</body>
</html>

id选择器

通过标签的id属性选中一组标签

#id属性值

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* id选择器 */
			#id1{
				color: aqua;
				font-size: 20px;
			}
			#id2{
				color: aquamarine;
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<p id="id1">静夜思</p>
		<p id="id2">床前明月光</p>
		<p id="id2">疑是地上霜</p>
		<p id="id2">举头望明月</p>
		<p id="id2">低头思故乡</p>
	</body>
</html>

通配选择器

可以用来选中页面中的所有标签

*{}

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 标签选择器  */
			p{
				font-weight: 300;
				font-family: 宋体;
			}
			/* id选择器 */
			#id{
				color: blue;
				font-size: 16px;
			}
			/* 类选择器 */
			.p{
				color: azure;
			    font-family: 楷体 ;
			}
			/* 通配选择器 */
			*{
				font-family: 楷体;
			}
			#id,.p{
			    font-weight: bold;
			}
		</style>
	</head>
	<body>
		<p id="id">静夜思</p>
		<p class="p">床前明月光</p>
		<p>疑是地上霜</p>
		<p>举头望明月</p>
		<p>低头思故乡</p>
		<h1>作者：李白</h1>
		<b>类型：古诗</b>
	</body>
</html>

文本

在CSS（层叠样式表）中，文本样式是一个重要的组成部分，用于控制网页中文本的外观和布局。以下是一些常见的CSS文本属性：

1.颜色（color）

使用color属性定义文本颜色

html 复制代码

p {  
  color: red;  
}

2.字体大小（font-size）

使用font-size属性可以设置文本字体大小

html 复制代码

h1 {  
  font-size: 24px;  
}

也可以使用相对单位，如em、rem、%等

字体家族 (Font Family)

使用font-family属性可以设置文本的字体

html 复制代码

body {  
  font-family:楷体;  
}

如果第一个字体不可用，浏览器将尝试使用列表中的下一个字体

4.字体风格 (Font Style)

使用font-style属性可以设置文本是否为斜体

html 复制代码

em {  
  font-style: italic;  
}

字体粗细 (Font Weight)

使用font-weight属性可以设置文本的粗细

html 复制代码

strong {  
  font-weight: bold;  
}

也可以使用数字值，如400（正常）和700（粗体），其中700表示的字体粗细与bold相同，这也是平常见到的字体粗体

文本装饰 (Text Decoration)

使用text-decoration属性可以设置文本的下划线、上划线或删除线

html 复制代码

a {  
  text-decoration: none; /* 移除下划线 */  
}

移除超链接文本的下划线

文本对齐 (Text Align)

使用text-align属性可以设置文本的水平对齐方式

html 复制代码

div {  
  text-align: center; /* 居中对齐 */  
}

文本缩进 (Text Indent)

使用text-indent属性可以设置文本的首行缩进

html 复制代码

p {  
  text-indent: 2em; /* 首行缩进两个字符的宽度 */  
}

行高 (Line Height)

使用line-height属性可以设置文本行之间的垂直间距

html 复制代码

p {  
  line-height: 1.5; /* 行高为字体大小的1.5倍 */  
}

文本转换 (Text Transform)

使用text-transform属性可以控制文本的大小写

html 复制代码

h1 {  
  text-transform: uppercase; /* 转换为大写 */  
}

字间距 (Letter Spacing)

使用letter-spacing属性可以设置字符之间的间距

html 复制代码

h2 {  
  letter-spacing: 2px; /* 字符间距增加2像素 */  
}

词间距 (Word Spacing)

使用word-spacing属性可以设置单词之间的间距

html 复制代码

p {  
  word-spacing: 5px; /* 单词间距增加5像素 */  
}

文本阴影 (Text Shadow)

使用text-shadow属性可以为文本添加阴影效果

html 复制代码

h1 {  
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 阴影向右下方偏移，模糊半径为4像素，颜色为半透明的黑色 */  
}

应用：

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.demo1{
				/* 设置字体颜色 */
				color: green; 
				/* 设置字体的大小 */
				font-size: 20px;
				/* 设置相应字体 */
				font-family: 楷体;
				/* 设置字体的加粗 */
				font-weight: 700;
				/* 设置字体格式--italic(斜体) */
				font-style: italic;
				/* 设置文本的对齐方式------------(默认left)*/
				text-align: left;
				/* text---...   对文本的一些修饰 */
				/* 设置行高 */
				line-height: 30px;
				/* 指定字符的间距 */
				/* 中文 */
				letter-spacing: 5px;
				/* 英文（分隔单词） */
				word-spacing: 10px;
				/* 段落首行缩进  em---当前文档中一个字符的大小 */
				text-indent: 2em;
				}
				a{
				/* 去除超链接标签的下划线 */
					text-decoration: none;
					/* none表示什么都没有，去除原有的多余修饰 */
				}
		</style>
	</head>
	<body>
		<p class="demo1"">
			在刚过去的一周，两站世界乒联（WTT）常规挑战赛在中国太原和巴西里约热内卢同时进行，均完美落幕。
			国乒再度包揽WTT太原赛的全部五项冠军，雨果·卡尔德拉诺同样在主场夺得WTT巴西赛的男单冠军。
		</p>
		<a href="">百度</a>
	</body>
</html>

背景

在CSS中，你可以使用多种属性来修饰元素的背景。以下是一些常用的CSS属性，用于定制元素的背景：

background-color：设置元素的背景颜色

html 复制代码

div {  
    background-color: #f00; /* 红色背景 */  
}

background-image：设置元素的背景图像

html 复制代码

div {  
    background-image: url('image.jpg'); /* 使用指定的图片作为背景 */  
}

background-repeat：设置背景图像是否及如何重复。

repeat：默认值，水平和垂直方向都重复。
repeat-x：只在水平方向重复。
repeat-y：只在垂直方向重复。
no-repeat：不重复

html 复制代码

div {  
    background-image: url('image.jpg');  
    background-repeat: no-repeat; /* 不重复背景图像 */  
}

background-position：设置背景图像的位置。

可以使用关键字（如top, bottom, left, right, center）或百分比、像素值来定位

html 复制代码

div {  
    background-image: url('image.jpg');  
    background-position: right top; /* 将背景图像定位到右上角 */  
}

background-size：设置背景图像的大小。

可以使用关键字（如cover, contain）或百分比、像素值来设置大小

html 复制代码

div {  
    background-image: url('image.jpg');  
    background-size: cover; /* 确保背景图像覆盖整个元素区域，可能部分图像不可见 */  
}

background-attachment：设置背景图像是否固定或随页面滚动。

fixed：背景图像不会随页面的其余部分滚动。
local：背景图像与元素内容一起滚动。
scroll：默认值，背景图像随页面的其余部分一起滚动。

html 复制代码

div {  
    background-image: url('image.jpg');  
    background-attachment: fixed; /* 固定的背景图像 */  
}

background：这是一个简写属性，用于设置所有背景属性

html 复制代码

div {  
    background: #f00 url('image.jpg') no-repeat right top fixed;  
    /* 简写形式，设置颜色、图像、不重复、位置（右上角）、固定 */  
}

注意：当使用多个背景图像时，后面的图像会覆盖前面的图像。你可以通过逗号分隔每个背景声明来设置多个背景图像。例如：

html 复制代码

div {  
    background: url('image1.jpg') no-repeat left top, url('image2.jpg') no-repeat right bottom;  
    /* 左侧顶部显示image1.jpg，右侧底部显示image2.jpg */  
}

应用：

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				color: red;
				/* 背景颜色 */
				background-color: aquamarine;
				width:800px;
				height:600px;
				/* 背景图片 */
				background-image: url("../img/pear.jpg");
				/* 控制背景图片是否重复 */
				background-repeat: no-repeat;
				/* 背景位置 */
				background-position: center center;
				/* 背景尺寸 */
				background-size: 400px 400px;
			}
		</style>
	</head>
	<body>
		<p>段落</p>
	</body>
</html>

css列表、css伪类、透明度、块级、行级、行级块标签、Display、div和span、盒子模型见下篇