“落座无言行三载，持笔无悔笑苍生！”
文章目录
- 前言
- 文章有误敬请斧正 不胜感恩！
- 1. 选择器类型
- 标签选择器
- 类选择器
- ID选择器
- 通配符选择器
- 复合选择器
- 2. 元素显示模式
- 块级元素
- 行内元素
- 行内块元素
- 3. 背景属性
- 4. 字体和文本属性
- 5.垂直居中的实现方法
- 原理
- 示例代码
- 6. CSS引入方式
- 7. CSS的三大特性
- 总结
前言
写在开始：
今天我们继续学习css的一些知识,并且复复习一下之前的
文章有误敬请斧正 不胜感恩！
以下是本篇文章正文内容，
1. 选择器类型
标签选择器
- 定义: 选择特定的 HTML 标签并应用样式。
- 示例:
p {
font-style: italic; /* 将段落文字设置为斜体 */
}
- 用途: 常用于通用样式设置，如对所有段落统一字体风格。
类选择器
- 定义: 用于选择带有特定类的元素。类选择器以点(.)开头。
- 口诀: 样式点(.)定义，结构(class)调用。
- 示例:
.red {
color: red; /* 文字颜色设置为红色 */
width: 100px; /* 宽度设置为100像素 */
height: 100px; /* 高度设置为100像素 */
background-color: red; /* 背景颜色设置为红色 */
}
- 用途: 可用于多次应用相同样式，比如按钮、卡片等组件。
ID选择器
- 定义: 用于选择具有特定 ID 的元素。ID选择器以井号(#)开头，通常在页面中唯一。
- 示例:
#niuma {
color: purple; /* 将ID为niuma的元素文字颜色设置为紫色 */
}
- 用途: 常用于特定元素的样式设置，如独特的导航条或特定的内容区域。
通配符选择器
- 定义: 选择所有元素，不带任何特定条件。
- 示例:
* {
margin: 0; /* 清除所有元素的外边距 */
}
- 用途: 常用于重置样式或在样式表开头设置基础样式。
复合选择器
- 定义: 由两个或多个选择器组合而成，用于选择符合多个条件的元素。
- 示例:
div, p, .pig li {
color: pink; /* 将div、段落和类为pig的li元素文字颜色设置为粉色 */
}
- 用途: 方便同时设置多种元素的样式，减少重复代码。
2. 元素显示模式
块级元素
- 特点: 独占一行，宽度、高度、内边距和外边距都可以控制，通常用于结构性元素。
- 示例:
<div>块元素</div> <!-- 块元素独占一行，后面的元素会换行 -->
- 用途: 用于布局和分隔内容，例如标题、段落、列表等。
行内元素
- 特点: 不会独占一行，设置宽高无效，宽度默认是内容宽度，常用于文本。
- 示例:
<span>行内元素,内联元素</span> <!-- 行内元素不会独占一行 -->
- 用途: 用于文本装饰或小范围内容，比如超链接和小图标。
行内块元素
- 特点: 结合了块级和行内元素的特性，可以设置宽高，但不会独占一行。
- 示例:
span {
display: inline-block; /* 转为行内块元素，可以设置宽高 */
}
- 用途: 用于需要控制尺寸的文本或图形，例如图标按钮。
3. 背景属性
- 背景颜色:
background-color: #fff; /* 设置背景颜色为白色 */
-
用途: 用于设置元素的背景色，提高可读性。
-
背景图片:
background-image: url("picture/bgi.png"); /* 控制位置的装饰 */
-
用途: 用于美化界面，增强视觉效果。
-
背景平铺:
background-repeat: no-repeat; /* 不平铺 */
-
用途: 设定背景图像的重复方式，通常用于精美的背景图。
-
背景位置:
background-position: center center; /* 居中 */
-
用途: 控制背景图像的显示位置，使其在视觉上更协调。
-
背景附着:
background-attachment: fixed; /* 背景固定 */
-
用途: 用于创建滚动效果，使背景在滚动时保持固定。
-
背景半透明:
background: rgba(255, 255, 255, 0.5); /* 背景半透明 */
- 用途: 用于叠加效果，增加层次感。
4. 字体和文本属性
- 复合字体属性:
font: italic 700 16px 'Microsoft YaHei'; /* 顺序和属性重要 */
-
用途: 一次性设置多个字体属性，提高代码简洁性。
-
文本对齐:
h1 {
text-align: center; /* 水平居中对齐 */
}
-
用途: 控制文本在元素中的排列方式，提升可读性。
-
文本装饰:
a {
text-decoration: none; /* 删除链接自带的下划线 */
}
-
用途: 自定义链接样式，使其更符合整体设计。
-
段落的首行缩进:
p {
text-indent: 20px; /* 段落的首行缩进 */
line-height: 26px; /* 行间距 */
}
- 用途: 提高文本的可读性和美观度。
/* 必须按顺序且必须保留font-size和font-family属性不然不起作用 /
/ font: font-style font-weight font-size/line-height font-family */
5.垂直居中的实现方法
在 CSS 中，单行文字的垂直居中并没有直接的属性。我们可以通过使文字的行高与其父容器（盒子）的高度相等来实现这一效果。这样，文字就能在容器中垂直居中。
原理
- 行高的组成：行高不仅包括文字本身的高度，还包含文字上下的空隙（即行间距）。这些空隙是透明的，因此不会影响文本的可读性。
- 一致性：通过将行高设置为与盒子的高度一致，可以让文字在上下留白之间自动居中。
- 偏移现象：
- 如果行高大于盒子高度，文字会向下偏移。
- 如果行高小于盒子高度，文字会向上偏移。
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直居中示例</title>
<style>
.container {
height: 100px; /* 盒子高度 */
background-color: lightblue; /* 盒子背景色 */
text-align: center; /* 水平居中 */
line-height: 100px; /* 行高与盒子高度一致 */
font-size: 24px; /* 字体大小 */
color: darkblue; /* 文字颜色 */
}
</style>
</head>
<body>
<div class="container">
垂直居中的文字
</div>
</body>
</html>
- .container：这是一个高度为 100px 的盒子，背景颜色为浅蓝色。
- line-height：设置为 100px，使其与盒子的高度一致。这样，文字就能在盒子内垂直居中显示。
- text-align：设置为 center，以确保文字在水平方向上也居中。
6. CSS引入方式
- 内部样式表: 写在
<style>标签内。
<style>
div {
color: purple; /* 设置div元素的文字颜色为紫色 */
}
</style>
-
用途: 适用于小型项目或临时样式。
-
行内样式表: 在元素标签内部的
style属性中设定样式。
<p style="color: purple;">2是紫色</p> /* 直接设置段落的颜色 */
-
用途: 适合快速测试样式，但不建议在生产代码中广泛使用。
-
外部样式表: 通过
<link>标签引入单独的 CSS 文件。
<link rel="stylesheet" href="css引入方式练习.css"> /* 引入外部 CSS 文件 */
- 用途: 推荐使用的方法，便于维护和复用样式。
7. CSS的三大特性
-
层叠性 (Cascading): 当多个样式规则应用于同一元素时，浏览器会根据样式的来源和位置决定哪个样式生效，遵循就近原则。
-
继承性 (Inheritance): 某些 CSS 属性会从父元素继承到子元素，父元素对子元素的样式有影响，但反之则不然。
-
优先级 (Specificity): 选择器的优先级决定样式的最终应用顺序，优先级为：
inline styles > ID选择器 > class选择器 > 标签选择器。更具体的选择器会覆盖更一般的选择器。
总结
光说不练假把式,写这个css啊,还是得多写.
今天就到这里,下次见
