Cosmos 项目 CSS 入门实战指南三种引入方式与 Border、Margin、Padding、Position、Z-index 核心属性详解【免费下载链接】cosmosWorlds largest Contributor driven code dataset | Used in Quark Search Engine, OpenGenus IQ, OpenGenus Visual Project项目地址: https://gitcode.com/gh_mirrors/co/cosmos本指南以 Cosmos 开源代码数据集仓库中code/html/css目录下的 CSS 学习文档为骨架系统讲解如何在 HTML 页面中通过 Inline、Internal、External 三种方式引入层叠样式表CSS并逐一深入 Border边框、Margin外边距、Padding内边距、Position定位、Z-index层叠顺序以及 Layout布局与 Hover悬停等核心属性的语法、取值与真实示例。读完本文你将能够独立阅读仓库内 code/html/css 下的全部示例源码并动手实现带边框、留白、定位与层叠效果的完整页面。CSS 基础属性/值对与三种引入方式CSSCascading StyleSheets层叠样式表用于为用普通 HTML 编写的网页添加样式。其最基础的单位是property:value属性:值配对例如color:red、border:2px solid black。在 Cosmos 仓库的 code/html/css/README.md 中明确给出了在 HTML 文件中添加 CSS 样式的三种方式Inline CSS内联样式直接在 HTML 标签内书写样式语法为styleproperty:value;property:value,...。Internal CSS内部样式在 HTML 文件head中的style元素内书写整段 CSS 代码并通过元素类型、ID 属性#idvalue与 Class 属性.classname选择器为对应元素定义样式。External CSS外部样式将 CSS 代码写入独立的.css文件再在 HTML 的head标签内通过link relstylesheet href{path to external css file}引入。三种引入方式的语法与使用场景Inline CSS的写法最为直接适用于单元素、一次性微调{HTML_element} styleproperty:value;property:value,...例如 border/src/Border_style.html 中整页就是通过内联样式演示十种边框样式h1 styleborder-style:dotted;text-align:center; Dotted Border /h1 h1 styleborder-style:dashed;text-align:center; Dashed Border /h1 h1 styleborder-style:solid;text-align:center; Solid Border /h1 h1 styleborder-style:double;text-align:center; Double Border /h1 h1 styleborder-style:groove;text-align:center; Groove Border /h1 h1 styleborder-style:ridge;text-align:center; Ridge Border /h1 h1 styleborder-style:inset;text-align:center; Inset Border /h1 h1 styleborder-style:outset;text-align:center; Outset Border /h1 h1 styleborder-style:none;text-align:center; None Border /h1 h1 styleborder-style:hidden;text-align:center; Hidden Border /h1Internal CSS则将样式集中放在head中通过选择器批量复用head style HTML-element {property:value;property:value,...} #idvalue {property:value;property:value,...} .classname {property:value;property:value,...} /style /head其中HTML-element是元素选择器如h1、p#idvalue是 ID 选择器每个页面中唯一.classname是类选择器可被多个元素共享。仓库中大量示例采用此方式例如 Margin/src/Shorthand_4.htmlstyle #el { border: 10px double black; margin: 10px 100px 0px 400px; } /style h1 idel Generic Heading /h1External CSS是工程化页面最推荐的方案——样式与结构分离便于多个页面共享与维护head link relstylesheet href{path to external css file} /headCSS Borders为元素绘制边框CSS Borders 用于在任何 HTML 标签周围创建边框其相关文档位于 code/html/css/border/README.md。边框包含以下特性Style样式边框类型solid、dashed 等。它是边框的必填属性——未指定 style 时其他边框属性不会生效。Width宽度边框厚度可选属性有内置默认值。Color颜色边框颜色默认颜色为黑色。Radius圆角最新浏览器支持的新特性可为边框添加圆角边缘。仓库目录下提供了六个可运行示例覆盖全部边框特性主题示例源码效果图Border-stylesrc/Border_style.htmlimg/border-style.pngBorder-widthsrc/Border_width.htmlimg/Border_width2.pngBorder-Colorsrc/Border_color.htmlimg/Border_color.pngIndividual Bordersrc/Individual_border.htmlimg/IndividualBorder.pngShorthand propertysrc/Shorthand_property.htmlimg/Shorthand.pngRounded Borderssrc/Rounded_Border.htmlimg/Rounded_border.png从 src/Border_style.html 可以看到style 支持dotted、dashed、solid、double、groove、ridge、inset、outset、none、hidden共十种取值效果图见 img/border-style.png。其中groove/ridge呈现 3D 凹槽/脊状效果inset/outset使元素呈现内陷/外凸感none与hidden均不显示边框hidden在表格等场景中优先级更高。简写属性Shorthand可将宽、样式、颜色合并为一行例如 src/Shorthand_property.htmlstyle #border { border: 2px solid black; } /style h1 idborder Heading /h1此处border: 2px solid black等价于依次声明border-width: 2px; border-style: solid; border-color: black;。若想为四个边分别设置可参考 src/Individual_border.html 中对border-top、border-right、border-bottom、border-left的独立写法圆角则使用 src/Rounded_Border.html 中的border-radius属性实现效果见 img/Rounded_border.png。CSS Margins控制元素外部留白CSS Margin 属性用于在网页边界与 HTML 元素边框若通过 CSS Border 定义之间创建间距即元素外部的透明空间。相关文档位于 code/html/css/Margin/README.md。语法与示例style #idvalue { border: {width} {style} {color}; margin: {value} } /style {html_element} ididvalue {content} /{html_element}仓库文档给出的完整示例原文即为此形式style #margin1 { border: 2px solid black; text-align:center; margin: 100px; } /style h1 idmargin1 Generic Heading with defined margin/h1 h1 Normal heading /h1margin属性支持以下四类取值Length长度带单位的数值如px、cm等。Percentage百分比带%符号的数值。Auto由浏览器自动计算常用于水平居中。Inherit继承父元素的外边距值。文档目录下共提供了 11 个示例源码与 11 张效果图覆盖以下主题主题示例源码效果图单边设置src/Individual.htmlimg/Individual.png简写属性src/Shorthand_1.html 至 src/Shorthand_4.htmlimg/Shorthand1.png 至 img/Shorthand4.pngAuto 关键字src/Auto_keyword.htmlimg/Auto.pngInherit 关键字src/Inherit_keyword.htmlimg/Inherit.pngMargin Collapsesrc/Margin_collapse.htmlimg/Collapse.png简写规则Shorthandmargin接受 1 到 4 个值按上右下左顺时针顺序解析——4 个值对应top right bottom left3 个值对应top (right/left) bottom2 个值对应(top/bottom) (right/left)1 个值作用于四边。例如 src/Shorthand_4.html 中的margin: 10px 100px 0px 400px;即上 10px、右 100px、下 0、左 400px。Auto 居中src/Auto_keyword.html 展示了经典的水平居中写法style #el { width: 250px; border: 8px double black; margin: auto; } /style h1 idel Generic Heading /h1注意margin: auto只在元素设置了确定宽度如width: 250px时才能实现水平居中——浏览器会自动分配两侧剩余空间。Margin Collapse外边距折叠是另一个常见陷阱相邻元素的垂直外边距会取两者较大值而非相加详见 img/Collapse.png 演示。CSS Padding控制元素内部留白CSS Padding 属性用于在 HTML 元素内容与其边框若指定之间创建间距即元素内部的填充区域与 Margin 恰好互补。相关文档位于 code/html/css/Padding/README.md。语法与示例style HTML_element { border: {width} {style} {color}; padding: {value(s)}; } /style HTML_element Content /HTML_element仓库文档给出的完整示例style #el { border: 2px solid black; padding: 40px; } /style h1 idel Heading with Padding specified /h1 h1 styleborder:2px solid black; Heading without padding /h1padding属性接受的取值类型Length数字加单位px、cm等。Percentage数字加%符号。Inherit Keyword从父 HTML 元素继承 padding 值。目录下的示例与效果图同样覆盖单边设置src/Individual_sides.html、img/Individual_sides.png、简写属性src/Shorthand_1.html 至 src/Shorthand_4.html、Inherit 关键字src/Inherit.html、img/Inherit.png以及百分比取值src/Percentage.html、img/percentage.png。padding的简写解析顺序与margin一致上右下左。Box Model 与 box-sizingsrc/BoxModel.html 深入演示了 CSS 盒模型style #box1 { width: 400px; padding: 40px; border: 8px double black; box-sizing: border-box; } #box2 { width: 400px; border: 8px double black; padding: 40px; } /style h1 idbox1 Box with box-sizing defined/h1 h1 idbox2 Generic Box/h1在默认的content-box模型#box2下元素总宽度 widthpaddingborder因此 400px 宽、8px 边框、40px 内边距的盒子实际占满 400 8×2 40×2 496px而设置了box-sizing: border-box的#box1将width视为包含 padding 与 border 的总宽实际渲染仍为 400px。盒模型结构可参考 img/BoxModel.png。CSS Position定位元素在页面中的位置CSSposition属性用于指定 HTML 元素在网页中的位置。一旦设置定位值元素便有了确定的基准点可通过top、bottom、left、right四个关键字进行偏移。相关文档位于 code/html/css/Position/README.md。position属性可取值Static默认值元素按正常文档流排列top/left 等偏移不生效。Fixed相对浏览器视口固定页面滚动时保持原位。Relative相对元素自身原本位置偏移不影响其他元素布局。Absolute相对最近的非 static 定位祖先若无则相对视口/初始包含块定位。Sticky粘性定位元素在滚动到阈值前按正常流之后固定。语法style HTML_element { position: {keyword}; top: {value}; bottom: {value}; right: {value}; left: {value}; } /style示例原文style h1 { position: absolute; top: 40px; left: 100px; } /style h1 Generic Heading /h1输出效果见 img/Position.png。目录下的可运行示例分别演示了各取值Staticsrc/Static.html、Relativesrc/Relative.html、Absolute 无定位祖先src/Absolute_no_ancestor.html、Absolute 有定位祖先src/Absoulte_ancestor.html与 Fixedsrc/Fixed.html。例如 src/Relative.htmlstyle #head1 { position: relative; top: 40px; bottom: 100px; right: 30px; left: 100px; } /style h1 Generic Heading /h1 h1 idhead1 Heading with relative positioning /h1position: relative使元素相对其正常位置同时发生上下左右偏移效果见 img/Relative.png若将示例中的relative改为fixed元素则会脱离文档流并相对浏览器窗口固定参考 img/fixed1.png 与 img/fixed2.png。CSS Z-index控制元素的层叠顺序当 HTML 元素被显式定位后它们可能相互重叠。z-index属性用于指定元素的层叠顺序Stack order。相关文档位于 code/html/css/Z_index/README.md。核心规则层叠顺序值越大的元素越靠前显示元素既可以是正堆叠也可以是负堆叠。语法z-index: auto|number|initial|inherit;auto默认值与父元素同层不创建新层叠上下文。number整数可为负值越大越靠前。initial重置为默认值auto。inherit继承父元素的 z-index。文档明确给出的三条要点层叠规则层叠顺序stack order更大的元素总是位于层叠顺序更小的元素前面。默认顺序若两个元素重叠且未显式指定 z-index则 HTML 源码中后定义的元素层叠顺序更高显示在前。适用前提z-index 仅对已定义 CSSposition属性的元素生效。仓库示例 src/z_index.html 将图片置于文字之下style img { position: absolute; left: 0px; top: 0px; z-index: -1; } h1 { z-index: 1; position: absolute; top: 220px; } /style img srcOpenGenus.jpg altOpenGenus Logo h1 This is overlap Heading over OpenGenus Logo /h1图片被赋予z-index: -1负堆叠标题赋予z-index: 1标题便覆盖在图片之上效果见 img/z_index.png。目录还提供了initialsrc/initial.html与inheritsrc/inherit.html的对照示例及其效果图 img/Initial1.png、img/Inherit.png。延伸主题Layout 布局与 Hover 悬停效果除了上述五大核心属性code/html/css目录还收录了两个实用主题Layout 布局正常文档流code/html/css/Layout/normalflow.html 通过对比演示块级与行内元素的排列差异——块级元素display: block自上而下逐行排列行内元素display: inline则像段落中的单词一样从左到右并排排列。该示例同时综合运用了width、margin、padding、border、background等前文介绍的属性可作为综合练习参考。Hover 悬停效果code/html/css/Hover/src/Hover_effect.html 使用:hover伪类实现鼠标悬停时的样式变化style h1:hover{ color:red; font-size:50px; } /style body h1Move the cursor over this text to see the effects of Hover property/h1 /body当光标移入标题文本时文字颜色变为红色且字号放大至 50px移出后恢复原样。这是交互式页面最常用的伪类之一常与transition结合实现平滑动画。动手实践把文档示例跑起来所有示例均为自包含的静态 HTML 文件无需构建或安装任何依赖。建议的实践路径从 code/html/css/border/src/Border_style.html 开始用浏览器直接打开文件观察十种边框样式的差异。对照 code/html/css/Margin/src/Auto_keyword.html 与 code/html/css/Padding/src/BoxModel.html修改margin、padding的数值与单位px、%、auto体会两者外部留白与内部留白的区别以及box-sizing对盒模型宽度计算的影响。依次打开 code/html/css/Position/src/Static.html、Relative.html、Absolute_no_ancestor.html、Fixed.html并配合 code/html/css/Z_index/src/z_index.html 调整z-index取值直观理解定位与层叠规则。最后将 code/html/css/Hover/src/Hover_effect.html 与 code/html/css/Layout/normalflow.html 中display: block/display: inline的概念结合尝试自定义一个同时包含内联、内部与外部样式link relstylesheet的完整页面。仓库中code/html/css目录下的每一份示例都有配套效果图位于各子目录img/下可在修改前后对照验证自己的理解。通过以上练习你可以系统掌握 CSS 的引入方式、盒模型四大属性与定位层叠机制为后续学习更复杂的布局如 Flexbox、Grid打下坚实基础。【免费下载链接】cosmosWorlds largest Contributor driven code dataset | Used in Quark Search Engine, OpenGenus IQ, OpenGenus Visual Project项目地址: https://gitcode.com/gh_mirrors/co/cosmos创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考