CSS样式引入方式 约定不等于承诺〃 2022-11-13 00:48 175阅读 0赞 ### CSS样式引入方式 ### * 任务描述 * 相关知识 * * 样式引入方式 * 内部样式表 * 外部样式表 * 内部样式 * 使用哪一种样式表 * 样式的优先级顺序 # 任务描述 # 本关任务:在上一关中,我们了解了CSS的基础概念。这一关中,我们将要理解CSS继承和多种样式引入方式。 本关任务完成之后的效果图如下: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70] # 相关知识 # ## 样式引入方式 ## CSS样式有三种引入方式: * 内部样式表:如同之前实例中所示,在文档头部中引入; * 外部样式表:通过外部文件引入; * 内联样式:直接在特定元素中引入。 下面,我们将为大家一一介绍这三种引入方式。 ## 内部样式表 ## 首先,对于内部样式表,书写的方式是直接在HTML文件的头部,添加`<style type="text/css"> </style>`元素。 具体举例如下: <head> <meta charset="utf-8"> <title>Hello World</title> <style type="text/css"> /*样式添加在这里*/ </style> </head> 在之前的实例中,为了方便大家同时看到HTML和CSS代码,我们都是使用的这一种方式。 ## 外部样式表 ## 第二种方式,是将CSS单独书写在文件后缀名为`.css`的文件中。然后在HTML的`<head>`中添加CSS文件链接。 <head> <meta charset="utf-8"> <title>Hello World</title> /* 引入外部的CSS文件 */ <link rel="stylesheet" href="style.css" /> </head> 属性`rel`的值`stylesheet`代表样式表,通常不变。`href`属性值,代表文件的位置。与图像路径的链接方式类似,`href`属性值的书写方式要根据具体的CSS文件位置。 例如,当HTML文件与要引入的CSS文件不在同一文件夹时: ![在这里插入图片描述][20210324175441798.png] 可以如下书写: <link rel="stylesheet" href="CSS/style.css" /> 在实际的项目中,推荐将样式表统一放在CSS文件夹中,使得项目结构更清晰,资源管理更容易。 ## 内部样式 ## * 内联样式是指直接在标签内添加样式属性。 举例如下: <p style="color: Red; margin-left: 24px; font-size:20px;">内联样式CSS表格<p> 显示如下: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1] 通用的书写格式: <tag style="样式表"> <tag style="样式表"></tag> ## 使用哪一种样式表 ## 在实际开发过程中,通常建议使用第二种外联样式表的方式。 **主要优点如下:** * 内容与样式分离; * 易于开发和维护样式。 * 样式易于复用; * 可在多个HTML文件中引入相同的样式文件。 * 加载更快。 如果在不同的页面中引入相同的样式文件。通常浏览器会直接从缓存中读取,而不再需要再一次访问服务器资源。 ## 样式的优先级顺序 ## 三种样式引入的优先级顺序是: 外部样式< 内部样式 < 内联样式 也就是说,如果同时有三种样式的方式作用于同一元素,会优先的使用内联样式。 **编程要求** **选择index.html文件,完成:** * 引入外部样式表 `style.css`, 引入的路径为`step2/CSS/style.css`;(注意路径中CSS是大写) * 设置 `h1` 元素内联样式的字体颜色(`color`)为`cornflowerblue`; * 修改 `samll` 元素内联样式:设置字体大小(`font-size`)为`10px`; 颜色(`color`)为`lightslategray`。 **选择style.css 文件,完成:** * 设置 p 元素的 `font-weight`为 粗体(`bold`); **`代码 文件:`** index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>O Captain! My Captain!</title> <!-- ********** BEGIN ********** --> <link rel="stylesheet" href="step2/CSS/style.css"> <!-- ********** END ********** --> <style type="text/css"> h1 { color:darkblue; } img { float: left; margin-right: 1em; } </style> </head> <body> <div> <!-- ********** BEGIN ********** --> <h1 style="color:cornflowerblue">O Captain! My Captain!</h1> <!-- ********** END ********** --> <img src="https://www.educoder.net/attachments/download/170157" width="300" height="175" alt="Blue Flax (Linum lewisii)" /> <p>O Captain! my Captain! our fearful trip is done, The ship has weather’d every rack, the prize we sought is won, The port is near, the bells I hear, the people all exulting, While follow eyes the <em>steady keel</em>, the vessel grim and daring;</p> <!-- ********** BEGIN ********** --> <p ><small style="color:lightslategray;font-size:10px;"> © Walt Whitman</small></p> <!-- ********** END ********** --> </div> </body> </html> `step2/CSS/style.css`: body { font-family: 'Times New Roman', Times, serif; } div { border: 1px solid #000; overflow: hidden; padding: 0 1em .25em; } h1 { color: green; } p { /* ********** BEGIN ********** */ font-weight: bold; /* ********** END ********** */ } > 试错是一种方法,但没有目的的试错只不过是瞎折腾,只能越试越错;很多人把挣扎当成努力,殊不知努力首先要面对现实,承认弱点。 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20221022/880a20e8604c4f2a914b8aec720d006f.png [20210324175441798.png]: /images/20221022/5e4a7b5420b040b4b6d6c7bcb04209fc.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20221022/34252197244c4ecdaa48c1f0d934900c.png
还没有评论,来说两句吧...