Web前端开发------网页分组元素

简介: Web前端开发------网页分组元素

1.分组选择器

分组选择器和普通的CSS选择器用法一致。

只是使用时,需要以英文逗号,将多个选择器间隔开。

比如,这里h3,p就能同时设置h3和p元素的样式。

<style>
    /*使用分组选择器设置样式*/
    h3,p{
        text-align:center;
        }
</style>

001.<div>一个块级元素,它可以对网页中的元素进行布局。

<div>把网页划分为一块一块的区域,然后结合CSS就可以对某一区域内的多种元素设置样式。

<html>
<head>
    <meta charset="UTF-8">
    <style>
        div {
            background-color: #5E80F4;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <h3>haha编程</h3>
        <p>网页开发</p>
    </div>
</body>
</html>

/*body中定义了一个div元素,style中设置div元素的背景颜色和对齐方式。h3和p元素都是div的一部分,这里通过div选择器直接可以设置h3,p。*/

简单来说,div元素是对网页进行整体布局,结合CSS,可以设置一块区域的样式。

但是有时候,我们还需要对网页中的内容进行局部样式的修改。

002.这时候,就需要用到HTML中的重要元素:span

<span> 标签用于配合CSS,修改网页中的一些局部样式。

<span> 标签也没有什么特殊的显示效果。

简单来说,<sapn>标签中的内容会被标记,当它结合CSS设置样式时,其中的内容才会有视觉上的变化。

<html>
<head>
    <meta charset="UTF-8">
    <style>
        /* TODO 使用span标签选择器,给所有span设置样式
          要求:字体颜色为#FFFFFF,背景颜色为#5E80F4 */
        span{
            color:#FFFFFF;
            background-color:#5E80F4;
        }
    </style>
</head>
<body>
    <p>Python是一门语言,应用于<span>数据分析基础</span>、<span>数据分析进阶</span>、<span>网络爬虫</span>方面。</p>
</body>
</html>

如果span元素出现很多,那么使用span标签选择器会改变所有span元素的样式,如果我们要设置指定元素内的span元素样式,就需要用到

2.后代选择器

后代选择器使用时,需要以空格将多个选择器间隔开。

比如,这里p span,表示只设置p元素内,span元素的样式.

div属于块级元素,会独占一行;

span属于行内元素,不会独占一行。

<html>
<head>
    <meta charset="UTF-8">
    <style>
        /* TODO 使用span标签选择器,给所有span设置样式
          要求:字体颜色为#FFFFFF,背景颜色为#5E80F4 */
        p span{
            color:#FFFFFF;
            background-color:#5E80F4;
        }
    </style>
</head>
<body>
    <p>Python是一门语言,应用于<span>数据分析基础</span>、<span>数据分析进阶</span>、<span>网络爬虫</span>方面。</p>
</body>
</html>
相关文章
|
4天前
|
缓存 前端开发 JavaScript
使用Web前端性能优化提高网站加载效率
前端性能优化关键在于提高用户体验和降低资源消耗,Webpack是重要工具。基础优化策略包括减少HTTP请求、资源压缩与缓存、异步加载。Webpack优化配置涉及Tree Shaking、代码分割。高级策略涵盖Long-term Caching、缓存提升和插件优化。打包部署时,自动化流程和环境管理也至关重要。通过这些方法,可提升Web应用速度和体验。
64 0
|
5天前
|
前端开发 JavaScript Java
web 技术中前端和后端交互过程
客户端:上网过程中,负责浏览资源的电脑,叫客户端
15 0
|
5天前
|
前端开发
web前端作业3
web前端作业3
10 1
|
5天前
|
前端开发 安全 数据安全/隐私保护
web前端第二天
web前端第二天
7 1
|
11天前
|
Web App开发 缓存 前端开发
前端性能优化的整理笔记(一)
前端性能优化的整理笔记(一)
110 0
|
8天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
11天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
45 1
|
11天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
12 0
|
11天前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
38 0
|
11天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
22 1