首页利用css样式三种写法实现span和div元素用于组织和结构文档，并经常联合class和id属性一起使用，span，div字体为红色，并经常联合class和id属性一起使用字体为绿色

利用css样式三种写法实现span和div元素用于组织和结构文档，并经常联合class和id属性一起使用，span，div字体为红色，并经常联合class和id属性一起使用字体为绿色

时间: 2024-10-27 12:11:54 浏览: 17

在HTML中，`<span>` 和 `<div>` 都是用来创建块级或行内元素的重要工具。下面是如何利用CSS的三种常见写法来设置它们的样式： 1. **直接内部样式** (Inline CSS): ```html <span id="redSpan" style="color: red;">这是一段 span 元素</span> <div class="greenDiv" style="color: green;">这是一个 div 元素</div> ``` 这里直接在元素上设置了颜色。 2. **外部样式表** (Link to a stylesheet): ```html <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <span id="redSpan">这是一段 span 元素</span> <div class="greenDiv">这是一个 div 元素</div> </body> ``` 在 `styles.css` 中: ```css #redSpan { color: red; } .greenDiv { color: green; } ``` 3. **内联样式表** (Embedded in the HTML document): ```html <style> #redSpan { color: red; } .greenDiv { color: green; } </style> <span id="redSpan">这是一段 span 元素</span> <div class="greenDiv">这是一个 div 元素</div> ``` `class` 和 `id` 属性通常配合使用，`class` 可以应用于多个元素，而 `id` 是唯一的标识符，仅能给一个元素使用。在这两种情况下，只需在CSS选择器中分别指定 `.greenDiv` 或 `#redSpan` 即可改变对应元素的颜色。

阅读全文