坑梓网站建设市场,保山市建设厅官方网站,wordpress year,中国钓鱼网站大全1. CSS 产生的背景
一、CSS 产生的背景#xff1a;从「样式混乱」到「结构分离」的必然
HTML 早期的样式困境#xff08;1990 年代#xff09;
纯文本时代#xff1a;HTML 最初#xff08;1993 年#xff09;仅用于描述网页结构#xff08;标题、段落、列表等#x…1. CSS 产生的背景
一、CSS 产生的背景从「样式混乱」到「结构分离」的必然
HTML 早期的样式困境1990 年代
纯文本时代HTML 最初1993 年仅用于描述网页结构标题、段落、列表等无任何样式功能。内联样式泛滥随着网页视觉需求增加HTML 引入 font、center 等样式标签导致代码臃肿如font colorred size5标题/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 stylecolor: blue; font-weight: bold;这段文字是蓝色粗体/p适用场景临时修改单个元素样式极少使用不利于复用。
内部样式表写在 HTML 的 中
语法用 style 标签包裹 CSS 代码。示例headstyleh1 { color: green; text-align: center; }.box { background-color: #f0f0f0; padding: 10px; }/style
/head
bodyh1标题/h1div classbox内容区块/div
/body适用场景单个页面的样式如个人博客、临时网页。
外部样式表最推荐的方案
步骤 创建独立的 CSS 文件如 style.css/* style.css */
body { font-family: Arial, sans-serif; }
.btn { background-color: #3498db; color: white; }在 HTML 中通过 link 标签引入headlink relstylesheet hrefstyle.css
/head优势 多个页面可共用一套样式减少代码量。浏览器会缓存 CSS 文件加速后续页面加载。 内联样式Inline style 内部样式Internal style sheet 外部样式External style sheet 浏览器默认样式 三、CSS 选择器连接 HTML 元素与样式的桥梁 CSS 通过「选择器」指定样式应用的目标元素常见类型
选择器类型语法示例选中 HTML 元素标签选择器标签名p { } → 所有 p 段落类选择器.类名.content { } → 所有 classcontent 的元素ID 选择器#ID名#header { } → 唯一 idheader 的元素组合选择器标签类/IDdiv.box { } → 所有 div classbox
2 实战 采用外联 2.1 简单
1.html
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS 外联样式表示例/titlelink relstylesheet hrefstyles.css
/head
bodyheaderh1CSS 样式表示例/h1p展示文本、字体、链接、列表、表格和盒子模型的样式/p/headermain!-- 文本和字体样式 --section classtext-sectionh2文本和字体样式/h2p classparagraph这是一个普通段落使用默认字体和样式。/pp classemphasis这是一个强调段落使用不同的字体和颜色。/pp classsmall-text这是一个小字体段落用于辅助信息。/pblockquote这是一个引用块用于引用他人的话语。/blockquote/section!-- 链接样式 --section classlinks-sectionh2链接样式/h2p访问我的 a href# classnormal-link个人网站/a 或 a href# classbutton-link查看项目/a。/pp悬停在链接上查看效果。/p/section!-- 列表样式 --section classlists-sectionh2列表样式/h2div classlist-containerdivh3无序列表/h3ul classcustom-listli列表项 1/lili列表项 2/lili列表项 3/li/ul/divdivh3有序列表/h3ol classcustom-olli第一步/lili第二步/lili第三步/li/ol/divdivh3定义列表/h3dl classcustom-dldtHTML/dtdd超文本标记语言/dddtCSS/dtdd层叠样式表/dd/dl/div/div/section!-- 表格样式 --section classtable-sectionh2表格样式/h2table classcustom-tabletheadtrth姓名/thth年龄/thth职业/thth城市/th/tr/theadtbodytrtd张三/tdtd28/tdtd工程师/tdtd北京/td/trtrtd李四/tdtd35/tdtd设计师/tdtd上海/td/trtrtd王五/tdtd24/tdtd学生/tdtd广州/td/tr/tbody/table/section!-- 盒子模型示例 --section classbox-model-sectionh2盒子模型示例/h2div classbox-containerdiv classboxp这是一个盒子/pp包含内容、内边距、边框和外边距/p/divdiv classbox-altp这是另一个盒子/pp使用不同的尺寸和样式/p/div/div/section/mainfooterp© 2025 CSS 样式示例/p/footer
/body
/html2.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; /* 行高文字上下间距默认值是 11.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类选择器、#idID 选择器。弹性布局display: flex、flex-wrap、gap。颜色表示十六进制#333、RGBrgb(255,0,0)、RGBA带透明度。伪类:hover悬停、:active点击、:focus聚焦。
2.2 网页布局
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0!-- 引入外部CSS文件 --link relstylesheet hrefstyle.css title网页布局示例/title
/headbody!-- 头部区域 --header classheader头部区域/header !-- 菜单导航区域 --nav classnav菜单导航区域/nav !-- 主要内容容器 --main classmain !-- 左侧内容区域 --section classcontent left-content内容区域/section !-- 中间内容区域 --section classcontent middle-content内容区域/section !-- 右侧内容区域 --section classcontent right-content内容区域/section /main!-- 底部区域 --footer classfooter底部区域/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。
