理解CSS:从<span>到样式控制

需积分: 0 0 下载量 127 浏览量 更新于2024-08-23 收藏 1.15MB PPT 举报
"了解和掌握HTML中的<span>标记以及CSS的基础知识,包括CSS的作用、构造、样式规则、注释和继承特性。" 在HTML中,`<span>`标记是一个非常常见的行内元素,主要用于组合文档中的行内元素,如文字、链接等。它的主要特点是不带有默认的视觉表现,只有当通过CSS(层叠样式表)为其添加样式时,`<span>`元素才会呈现出区别于普通文本的效果。基本的`<span>`元素语法如下: ```html <span id="指定样式名称">…</span> ``` 或者 ```html <span class="指定样式名称">…</span> ``` CSS在网页风格设计中起着至关重要的作用,它可以用来控制网页元素的布局、颜色、字体、大小、间距等样式属性。CSS的引入可以使得样式和内容分离,这意味着样式定义在一个单独的CSS文件中,多个HTML页面可以共享同一份样式,大大提高了代码的复用性和维护性。 CSS构造由选择符和声明组成。选择符决定了哪些元素将受到样式的影响,声明则包含了一个或多个属性和对应的值,如: ```css selector {属性: 属性值; [属性: 属性值; …]} ``` 在这里,`selector`代表HTML元素,`属性: 属性值`定义了元素的样式。多个属性之间使用分号隔开。 在CSS文件中添加注释有助于提高代码的可读性和可维护性。注释的格式如下: ```css /* 这里是注释内容 */ ``` 需要注意的是,CSS注释不能嵌套。 CSS的另一个关键特性是继承。继承允许子元素从其父元素继承某些样式属性,如字体大小、颜色等,减少了重复定义的需要。然而,并非所有属性都能继承,比如边框、背景等属性通常不会被子元素继承。 学习和熟练运用CSS,尤其是结合`<div>`和`<span>`等元素进行布局,能够帮助创建更加美观、响应式的网页。通过CSS控制背景图片的显示方式、滚动条的样式等,可以进一步提升用户体验。掌握这些基础知识是成为一名合格的WEB开发者的重要步骤。

26. (填空题, 3.4分) 使用多种方法获得HTML标记的引用
第一个DIV
<tex><r</tex>
第二个 第一个SAPN <tex><</tex> 第二个SAPN <tex>SAPP</tex>

段落 1

段落 2

<tex><j</tex> <tex>^{2}</tex> <button onclick="useld()">使用id属性</button> <button onclick="useName()">使用name属性</button> <button onclick="useTag()">使用标记名</button> <button onclick="useClass()">使用CSS类</button> <button onclick="useSelector()">使用CSS选择器</button> <script> function useld() { var div1 = document._(1) div1.innerHTML = 'div1' function useName() { var sp1 = document_(2) [0] sp1.innerHTML = 'span1' function useTag() { var ps = document._(3) ps[0].innerHTML = '第一个段落' ps[1] (.innerHTML = '第二个段落' } function useClass() ( var setc = document._(4) setc[0]. = 'blue' setc[1].style.color = 'green' } 26. (填空题, 3.4分) 使用多种方法获得HTML标记的引用
第一个DIV
<tex><r</tex>
第二个 第一个SAPN <tex><</tex> 第二个SAPN <tex>SAPP</tex>

段落 1

段落 2

<tex><j</tex> <tex>^{2}</tex> <button onclick="useld()">使用id属性</button> <button onclick="useName()">使用name属性</button> <button onclick="useTag()">使用标记名</button> <button onclick="useClass()">使用CSS类</button> <button onclick="useSelector()">使用CSS选择器</button> <script> function useld() { var div1 = document._(1) div1.innerHTML = 'div1' function useName() { var sp1 = document_(2) [0] sp1.innerHTML = 'span1' function useTag() { var ps = document._(3) ps[0].innerHTML = '第一个段落' ps[1] (.innerHTML = '第二个段落' } function useClass() ( var setc = document._(4) setc[0]. = 'blue' setc[1].style.color = 'green' )

2023-06-03 上传