张孝祥JavaScript教程笔记：CSS与样式应用

下载需积分: 3 | TXT格式 | 11KB | 更新于2024-09-26 | 87 浏览量 | 举报

"JavaScript笔记——张孝祥的JavaScript教程视频配套" 在JavaScript的学习中，我们往往会接触到与网页样式紧密相关的CSS（层叠样式表）。CSS的主要作用是定义网页中元素的布局、颜色、字体等视觉表现，使网页内容更加美观且易于阅读。下面将详细介绍CSS的四种样式应用方式。 1. 内联样式（Inline styles）内联样式是最直接的CSS应用方式，通过在HTML元素内部使用`style`属性来设置样式。例如，在一个段落元素`<p>`中，我们可以这样设置内联样式： ```html <p style="font-size: 20pt; color: blue; font-family: Arial; list-style-type: circle; text-decoration: underline;">这是一段带有内联样式的文字。</p> ``` 内联样式优先级最高，但不推荐大量使用，因为它会使HTML代码变得冗长且不易维护。 2. 嵌入式样式（Embedded stylesheets）嵌入式样式将CSS代码写在HTML文档的`<head>`标签内的`<style>`标签中，适用于整个页面的样式定义。例如： ```html <head> <style type="text/css" media="screen, projection"> /* 多行注释 */ p { font-size: 20pt; color: blue; font-family: Arial; list-style-type: circle; text-decoration: underline; } </style> </head> ``` 这种方式使得样式代码与HTML结构分离，但仍然局限在单个文档内。 3. 链接外部样式表（Linked stylesheets）外部样式表通常存储在独立的`.css`文件中，可以被多个HTML文档共享。首先创建一个`test.css`文件，包含以下内容： ```css p { font-size: 20pt; color: blue; font-family: Arial; list-style-type: circle; text-decoration: underline; } ``` 然后在HTML文档中使用`<link>`标签引入这个外部样式表： ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="test.css" type="text/css" media="screen"> </head> <body> <p>这是链接外部样式表的测试。</p> </body> </html> ``` 这种方式使得样式代码更加集中，便于管理和维护，尤其适合大型项目。 4. 导入样式表（Imported stylesheets）导入样式表允许在一个CSS文件中引入另一个CSS文件。可以在`<style>`标签内或外部CSS文件中使用`@import`规则。例如： ```css @import url('test.css'); ``` 或者 ```html <style type="text/css"> @import url('test.css'); </style> ``` 这种导入方式可以用来合并多个样式表，但其性能可能略逊于直接链接外部样式表。了解并熟练掌握这些CSS的应用方式，有助于提升网页设计和开发的效率，同时让JavaScript在与CSS交互时更加得心应手。在JavaScript中，可以通过DOM操作改变元素的样式，或者使用CSSOM（CSS Object Model）来动态修改样式表，这些都是JavaScript与CSS深度结合的重要技术。