当前位置：首页 > news >正文

网站关键词提高企业宣传ppt

news 2025/7/21 12:03:23

网站关键词提高,企业宣传ppt,wordpress返回顶部,临朐县网站建设1. CSS 产生的背景一、CSS 产生的背景：从「样式混乱」到「结构分离」的必然 HTML 早期的样式困境（1990 年代） 纯文本时代：HTML 最初（1993 年）仅用于描述网页结构（标题、段落、列表等&#x…

1. CSS 产生的背景

一、CSS 产生的背景：从「样式混乱」到「结构分离」的必然

HTML 早期的样式困境（1990 年代）

纯文本时代：HTML 最初（1993 年）仅用于描述网页结构（标题、段落、列表等），无任何样式功能。
内联样式泛滥：随着网页视觉需求增加，HTML 引入 <font>、<center> 等样式标签，导致代码臃肿（如：<font color="red" size="5">标题</font>），维护成本极高。
浏览器竞争：Netscape 和 IE 为抢占市场，各自推出私有样式属性（如 filter、behavior），导致网页兼容性极差。

CSS 的诞生：分离「结构」与「表现」

1994 年：Håkon Wium Lie 提出「层叠样式表」概念，旨在让样式独立于 HTML 结构。
1996 年：W3C（万维网联盟）发布 CSS1 规范，首次定义背景、字体、布局等基础样式，例如：
```
p { color: red; font-size: 16px; } /* 统一设置所有段落的样式 */
```
核心价值：
- 代码复用：一套样式可应用于多个页面，避免重复编写。
- 维护便捷：修改样式时只需调整 CSS 文件，无需改动 HTML。
- 响应式设计基础：为后续网页适配不同设备（手机、电脑）奠定基础。

二、CSS 与 HTML 的配合方式：三种集成方案

内联样式（直接写在 HTML 标签中）

语法：通过 style 属性直接定义样式。

示例：

<p style="color: blue; font-weight: bold;">这段文字是蓝色粗体</p>

适用场景：临时修改单个元素样式（极少使用，不利于复用）。

内部样式表（写在 HTML 的中）

语法：用 <style> 标签包裹 CSS 代码。

示例：

<head><style>h1 { color: green; text-align: center; }.box { background-color: #f0f0f0; padding: 10px; }</style>
</head>
<body><h1>标题</h1><div class="box">内容区块</div>
</body>

适用场景：单个页面的样式（如个人博客、临时网页）。

外部样式表（最推荐的方案）

步骤：

创建独立的 CSS 文件（如 style.css）：

/* style.css */
body { font-family: Arial, sans-serif; }
.btn { background-color: #3498db; color: white; }

在 HTML 中通过 <link> 标签引入：

<head><link rel="stylesheet" href="style.css">
</head>

优势：
- 多个页面可共用一套样式，减少代码量。
- 浏览器会缓存 CSS 文件，加速后续页面加载。

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

三、CSS 选择器：连接 HTML 元素与样式的桥梁
CSS 通过「选择器」指定样式应用的目标元素，常见类型：

选择器类型	语法	示例（选中 HTML 元素）
标签选择器	`标签名`	`p { }` → 所有 `<p>` 段落
类选择器	`.类名`	`.content { }` → 所有 `class="content"` 的元素
ID 选择器	`#ID名`	`#header { }` → 唯一 `id="header"` 的元素
组合选择器	标签+类/ID	`div.box { }` → 所有 `<div class="box">`

2 实战

采用外联

2.1 简单

1.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 外联样式表示例</title><link rel="stylesheet" href="styles.css">
</head>
<body><header><h1>CSS 样式表示例</h1><p>展示文本、字体、链接、列表、表格和盒子模型的样式</p></header><main><!-- 文本和字体样式 --><section class="text-section"><h2>文本和字体样式</h2><p class="paragraph">这是一个普通段落，使用默认字体和样式。</p><p class="emphasis">这是一个强调段落，使用不同的字体和颜色。</p><p class="small-text">这是一个小字体段落，用于辅助信息。</p><blockquote>这是一个引用块，用于引用他人的话语。</blockquote></section><!-- 链接样式 --><section class="links-section"><h2>链接样式</h2><p>访问我的 <a href="#" class="normal-link">个人网站</a> 或 <a href="#" class="button-link">查看项目</a>。</p><p>悬停在链接上查看效果。</p></section><!-- 列表样式 --><section class="lists-section"><h2>列表样式</h2><div class="list-container"><div><h3>无序列表</h3><ul class="custom-list"><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li></ul></div><div><h3>有序列表</h3><ol class="custom-ol"><li>第一步</li><li>第二步</li><li>第三步</li></ol></div><div><h3>定义列表</h3><dl class="custom-dl"><dt>HTML</dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表</dd></dl></div></div></section><!-- 表格样式 --><section class="table-section"><h2>表格样式</h2><table class="custom-table"><thead><tr><th>姓名</th><th>年龄</th><th>职业</th><th>城市</th></tr></thead><tbody><tr><td>张三</td><td>28</td><td>工程师</td><td>北京</td></tr><tr><td>李四</td><td>35</td><td>设计师</td><td>上海</td></tr><tr><td>王五</td><td>24</td><td>学生</td><td>广州</td></tr></tbody></table></section><!-- 盒子模型示例 --><section class="box-model-section"><h2>盒子模型示例</h2><div class="box-container"><div class="box"><p>这是一个盒子</p><p>包含内容、内边距、边框和外边距</p></div><div class="box-alt"><p>这是另一个盒子</p><p>使用不同的尺寸和样式</p></div></div></section></main><footer><p>© 2025 CSS 样式示例</p></footer>
</body>
</html>

2.css 文件

/* 全局样式 */
body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 1.6;margin: 0;padding: 0;background-color: #f8f9fa;color: #333;
}header, main, footer {padding: 20px;max-width: 1200px;margin: 0 auto;
}header {background-color: #343a40;color: white;text-align: center;
}section {margin-bottom: 40px;padding: 20px;background-color: white;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}h2 {color: #007bff;border-bottom: 2px solid #007bff;padding-bottom: 10px;margin-bottom: 20px;
}/* 文本和字体样式 */
.paragraph {font-size: 16px;margin-bottom: 15px;
}.emphasis {font-family: 'Georgia', serif;font-size: 18px;color: #6c757d;font-style: italic;
}.small-text {font-size: 14px;color: #6c757d;
}blockquote {border-left: 4px solid #007bff;padding-left: 20px;margin-left: 0;font-style: italic;color: #6c757d;
}/* 链接样式 */
a.normal-link {color: #007bff;text-decoration: none;border-bottom: 1px dotted #007bff;transition: all 0.3s ease;
}a.normal-link:hover {color: #0056b3;border-bottom: 1px solid #0056b3;
}a.button-link {display: inline-block;background-color: #007bff;color: white;padding: 8px 16px;text-decoration: none;border-radius: 4px;transition: background-color 0.3s ease;
}a.button-link:hover {background-color: #0056b3;
}/* 列表样式 */
.list-container {display: flex;flex-wrap: wrap;gap: 30px;
}.list-container > div {flex: 1;min-width: 250px;
}.custom-list {list-style-type: square;padding-left: 25px;
}.custom-list li {margin-bottom: 8px;
}.custom-ol {list-style-type: upper-roman;padding-left: 25px;
}.custom-ol li {margin-bottom: 8px;
}.custom-dl dt {font-weight: bold;margin-top: 15px;
}.custom-dl dd {margin-left: 20px;color: #6c757d;
}/* 表格样式 */
.custom-table {width: 100%;border-collapse: collapse;margin-top: 20px;
}.custom-table th, .custom-table td {padding: 12px 15px;text-align: left;border-bottom: 1px solid #ddd;
}.custom-table th {background-color: #f2f2f2;color: #333;font-weight: bold;
}.custom-table tr:hover {background-color: #f5f5f5;
}/* 盒子模型示例 */
.box-container {display: flex;flex-wrap: wrap;gap: 30px;margin-top: 30px;
}.box {width: 250px;height: 200px;background-color: #e9ecef;border: 3px solid #007bff;padding: 20px;margin: 15px;text-align: center;border-radius: 5px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}.box-alt {width: 200px;height: 200px;background-color: #f8d7da;border: 2px dashed #dc3545;padding: 15px;margin: 25px;text-align: center;border-radius: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}/* 页脚样式 */
footer {background-color: #343a40;color: white;text-align: center;padding: 15px;margin-top: 50px;
}

解析

继承：CSS 继承是一种强大的特性，允许子元素自动应用父元素的某些样式属性，从而减少代码重复。
px:是你显示屏的像素点单位

一、全局结构与基础样式

body {font-family: 'Segoe UI', Tahoma, sans-serif; /* 字体：从左到右尝试加载 */line-height: 1.6; /* 行高：文字上下间距，默认值是 1，1.6 更易读 */margin: 0; padding: 0; /* 移除默认边距，让内容贴边 */background-color: #f8f9fa; /* 背景色：浅灰色 */color: #333; /* 文字颜色：深灰色（比纯黑更柔和） */
}

新手提示：

font-family 中的多个字体是“备胎”关系，浏览器会按顺序尝试加载。
line-height 是提升阅读体验的关键，建议正文设置为 1.5-1.8。

二、页面布局与盒子模型

header, main, footer {padding: 20px; /* 内边距：内容与边框的距离 */max-width: 1200px; /* 最大宽度：防止内容在大屏幕上太宽 */margin: 0 auto; /* 水平居中：左右边距自动均分 */
}

新手提示：

max-width 是响应式设计的基础，确保内容在大屏上保持舒适宽度。
margin: 0 auto 是 水平居中的万能公式，但只对有宽度的块级元素有效。

三、颜色与视觉层次

header {background-color: #343a40; /* 深灰色背景 */color: white; /* 白色文字 */text-align: center; /* 文字居中 */
}h2 {color: #007bff; /* 蓝色标题 */border-bottom: 2px solid #007bff; /* 下划线装饰 */padding-bottom: 10px; /* 下划线与文字的距离 */
}

新手提示：

header 和上面是继承关系
颜色代码（如 #007bff）是十六进制表示法，前两位是红色，中间是绿色，最后是蓝色。
border-bottom 是创建下划线的优雅方式，比 <u> 标签更灵活。

四、文本样式与排版

.paragraph {font-size: 16px; /* 基础字号 */margin-bottom: 15px; /* 段落间距 */
}.emphasis {font-family: 'Georgia', serif; /* 衬线字体（带装饰线） */font-size: 18px; /* 稍大的字号 */color: #6c757d; /* 中灰色 */font-style: italic; /* 斜体 */
}

新手提示：

网页正文字号建议 16px 以上，太小会影响阅读体验。
衬线字体（如 Georgia）适合长文本，无衬线字体（如 Arial）适合标题。

五、链接样式与交互

a.normal-link {color: #007bff; /* 蓝色文字 */text-decoration: none; /* 移除默认下划线 */border-bottom: 1px dotted #007bff; /* 用虚线代替下划线 */transition: all 0.3s ease; /* 悬停时的平滑过渡效果 */
}a.normal-link:hover {color: #0056b3; /* 悬停时颜色变深 */border-bottom: 1px solid #0056b3; /* 实线代替虚线 */
}

在这里插入图片描述

新手提示：

:hover 是 伪类选择器，用于定义鼠标悬停时的样式。
transition 是让交互更自然的关键，建议所有悬停效果都加上。

六、列表样式与布局

.list-container {display: flex; /* 弹性布局：让子元素水平排列 */flex-wrap: wrap; /* 换行：空间不足时自动换行 */gap: 30px; /* 元素间距：30px 的空隙 */
}.list-container > div {flex: 1; /* 弹性因子：平均分配空间 */min-width: 250px; /* 最小宽度：防止在小屏幕上挤变形 */
}

新手提示：

.list-container：选择类名为 list-container 的元素（通常是 div class=“list-container”>）。>：直接子元素选择器，表示 “直接包含” 的关系。div：选择所有 div元素。
display: flex 是现代布局的核心，flex-wrap 和 gap 让布局更简洁。
flex: 1 相当于 flex-grow: 1，让元素“长大”填满剩余空间。

七、表格样式与可读性

.custom-table th, .custom-table td {padding: 12px 15px; /* 单元格内边距 */text-align: left; /* 文字左对齐 */border-bottom: 1px solid #ddd; /* 底边分隔线 */
}.custom-table tr:hover {background-color: #f5f5f5; /* 悬停时的背景色 */
}

新手提示：

表格可读性的关键：适当的内边距、分隔线和悬停反馈。
border-collapse: collapse 让边框合并，避免双线问题。

八、盒子模型可视化

.box {width: 250px;height: 200px;background-color: #e9ecef; /* 背景色 */border: 3px solid #007bff; /* 边框：粗细、样式、颜色 */padding: 20px; /* 内边距 */margin: 15px; /* 外边距 */border-radius: 5px; /* 圆角 */box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影：水平偏移、垂直偏移、模糊半径、颜色 */
}

新手提示：

盒子模型 = 内容区 + 内边距 + 边框 + 外边距。
box-shadow 的最后一个参数是透明度（0 完全透明，1 完全不透明）。

九、新手必记的 5 个核心概念

盒模型：内容区、内边距、边框、外边距。
选择器：body（标签选择器）、.class（类选择器）、#id（ID 选择器）。
弹性布局：display: flex、flex-wrap、gap。
颜色表示：十六进制（#333）、RGB（rgb(255,0,0)）、RGBA（带透明度）。
伪类：:hover（悬停）、:active（点击）、:focus（聚焦）。

2.2 网页布局

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入外部CSS文件 --><link rel="stylesheet" href="style.css"> <title>网页布局示例</title>
</head><body><!-- 头部区域 --><header class="header">头部区域</header> <!-- 菜单导航区域 --><nav class="nav">菜单导航区域</nav> <!-- 主要内容容器 --><main class="main"> <!-- 左侧内容区域 --><section class="content left-content">内容区域</section> <!-- 中间内容区域 --><section class="content middle-content">内容区域</section> <!-- 右侧内容区域 --><section class="content right-content">内容区域</section> </main><!-- 底部区域 --><footer class="footer">底部区域</footer> 
</body></html>

语义化标签：
- header（头部）、nav（导航）、main（主要内容）、section（章节）、footer（页脚）。
- 优点：结构清晰，搜索引擎友好，屏幕阅读器可理解。
嵌套关系：
main 包含三个 section，形成 “三栏布局” 的结构基础。

/* 全局样式重置，清除默认边距和内边距，方便统一控制 */
* {margin: 0;padding: 0;box-sizing: border-box; 
}/* 身体样式设置，设置字体等基础样式 */
body {font-family: Arial, sans-serif; 
}/* 头部样式，设置背景色、内边距、文本居中 */
.header {background-color: #e5e5e5; padding: 20px;text-align: center; 
}/* 导航样式，设置背景色、内边距、文本居中 */
.nav {background-color: #e5e5e5; padding: 10px;text-align: center; margin-top: 10px; 
}/* 主要内容容器样式，使用Flex布局实现多列布局 */
.main {display: flex; justify-content: space-between; padding: 10px;margin-top: 10px; 
}/* 内容区域通用样式，设置背景色、内边距、文本居中、Flex占比等 */
.content {background-color: #e5e5e5; padding: 80px 0; text-align: center; 
}/* 左侧内容区域，设置Flex占比 */
.left-content {flex: 1; margin-right: 10px; 
}/* 中间内容区域，设置Flex占比 */
.middle-content {flex: 4; margin: 0 10px; 
}/* 右侧内容区域，设置Flex占比 */
.right-content {flex: 1; margin-left: 10px; 
}/* 底部样式，设置背景色、内边距、文本居中、 margin-top 用于与上面内容拉开距离 */
.footer {background-color: #e5e5e5; padding: 20px;text-align: center; margin-top: 10px; 
}

flex: 1 等价于 flex-grow: 1, flex-shrink: 1, flex-basis: 0。
最终效果：
左侧和右侧各占 1/6 宽度，中间占 4/6 宽度，实现 1:4:1 的比例布局。
水平排列：
display: flex 默认让子元素水平排列（flex-direction: row）。
若想垂直排列，添加 flex-direction: column。

查看全文

http://www.tj-hxxt.cn/news/49527.html