21.2 CSS 三大特性与页面布局

业界资讯 2023-08-25 22:45:35 阅读次数: 0

image-20230822200700134

1. 开发者工具修改样式

使用开发者工具修改样式, 操作步骤如下:
* 1. 打开开发者工具: 在浏览器中右键点击页面, 然后选择'检查'或者使用快捷键(一般是 F12 或者 Ctrl+Shift+I)来打开开发者工具.

* 2. 打开样式编辑器: 在开发者工具中, 找到选项卡或面板, 
     一般是'Elements'或者'Elements'选项卡, 然后查找样式编辑器按钮, 点击它来打开样式编辑器.
     
* 3. 修改样式: 在样式编辑器中, 可以找到并选择你想修改的元素, 在右侧的面板中你可以修改该元素的样式.
    可以修改元素的背景颜色, 字体样式, 边框, 内边距等等, 只需在样式规则中修改相关属性即可.

* 4. 预览修改: 在修改样式的过程中, 开发者工具会实时预览你的修改效果. 可以看到元素在页面上的变化.
     如果需要, 还可以在浏览器调整窗口大小或者模拟设备来查看页面在不同屏幕上的效果.
     
* 5. 应用修改: 一旦得到满意的修改, 可以将修改后的样式应用到页面上.
    可以直接在开发者工具中编辑页面的样式, 或者将修改后的样式复制到你的代码中.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Developer Mode</title>
    <style>
        p {
      
      
            font-size: 10px;
            color: red;
        }
    </style>
</head>
<body>
<h1>标题</h1>
<p>段落一</p>
<p>段落二</p>
</body>
</html>

2023-08-17_00019

2. CSS 三大特性

CSS具有三个重要的特性, 分别是:
* 1. 层叠性(Cascading): 相同选择器设置相同的样式会覆盖另一种冲突样式.
     层叠性的特点:
     1. 给同一个标签设置不同的样式, 样式会层叠叠加, 共同作用在标签上.
     2. 给同一个标签设置不同的样式遵循就近原则, 哪个样式离结构近, 就执行哪个样式.
     注意事项: 当样式冲突时, 只有当选择器优先级相同时, 才能通过层叠性判断结果.

* 2. 继承性(Inheritance): 某些样式属性可以从父元素传递到其子元素.
     当父元素应用了某个样式属性时, 其子元素将默认继承这个属性的值, 无需在子元素中重复定义.

* 3. 优先级(Specificity): 当多个选择器都能匹配同一个元素时, 需要根据优先级规则来确定最终应用的样式.
     通常, 选择器的具体性越高, 其优先级越高. 选择器的具体性由选择器的类型, 选择器的数量以及选择器的权重决定.

这三个特性共同组成了CSS强大的样式控制机制.
使用层叠性, 继承性和优先级, 可以准确地控制网页元素的显示样式, 实现丰富多样的布局和设计效果.

2.1 层叠性

给同一个标签设置不同的样式, 样式会层叠叠加, 共同作用在标签上.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cascading</title>
    <style>
        p {
      
      
            color: red;
        }

        p {
      
      
            color: aqua;
        }
    </style>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

2023-08-22_00004

给同一个标签设置不同的样式遵循就近原则, 哪个样式离结构近, 就执行哪个样式(程序至上往下运行).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cascading2</title>
    <style>
        p {
      
      
            color: red;

        }

        p {
      
      
            color: aqua;
            font-size: 14px;
        }
    </style>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

2023-08-22_00006

2.2 继承性

继承性: 子元素可以继承其父元素的某些样式属性.

以下是关于继承性的一些要点:
* 1. 哪些属性可以继承: 只有部分属性是可继承的.
     例如, color(文字颜色), font-family(字体系列), font-size(字体大小), line-height(行高)等.
     这意味着如果父元素设置了这些属性, 子元素将会继承并应用相同的属性值.

* 2. 哪些属性不可继承: 并非所有属性都具有继承性.
     例如, background(背景), height(高度), border(边框), margin(边距), padding(内边距)等属性不会被子元素继承.

* 3. 特殊的继承性规则: 尽管大部分可继承属性可以在父元素和其后代元素之间传递, 但有一些属性具有特殊的继承规则.
     例如, 链接'<a>'标签的文本颜色和文本修饰(如下划线)不会完全继承其父元素的设置,
     标题标签'<h1> - <h6>'的字体大小也不会完全继承其父元素的设置.

* 4. 继承的优先级较低: 如果子元素直接设置了某个属性, 而父元素设置了相同的属性, 子元素会使用自己直接设置的值, 而不是继承父元素的值.
     直接设置的样式会覆盖继承而来的样式.

使用继承性可以方便地应用样式到多个元素, 特别是针对文字和字体样式.
但在某些情况下, 可能需要小心处理继承, 以避免意外的样式传递. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inheritance</title>
    <style>
        div {
      
      
            color: red; /* 文字颜色: 红色 */
            font-size: 20px; /* 文字大小: 20像素 */
            background: grey; /* 背景颜色: 灰色 */
            text-decoration: none; /* 取消下划线 a便签不会继承*/
        }

    </style>
</head>
<body>
<div>
    <h1>一级标签</h1>
</div>
<div>
    <p>段落一</p>
</div>

<div>
    <ul>
        <li>
            <p>段落二</p>
        </li>
    </ul>
</div>

<div>
    <a href="">链接</a>
</div>


</body>
</html>

上例中, h1标签继承了div标签的文字颜色属性, 背景颜色, 取消文字的下划线, 没有继承文字大小的属性.

2023-08-22_00007

上例中, a标签继承了div标签的文字大小, 背景颜色,  取消文字的下划线, 没有继承文字颜色属性.

2023-08-22_00008

2.3 优先级

当多个选择器都能匹配同一个元素时, 需要根据优先级规则来确定最终应用的样式.

CSS会按照如下顺序来计算优先级:
* 1. 内联样式(具有最高优先级): 使用'style'属性直接在元素上定义的样式具有最高优先级, 特定性值为1000.
* 2. ID选择器: 具有ID选择器的样式具有比其他选择器更高的优先级, 特定性值为100.
* 3. 类选择器: 属性选择器和伪类选择器: 这些选择器的特定性值为10.
* 4. 元素选择器和伪元素选择器: 这些选择器的特定性值为1.
* 5. 通用选择器和组合选择器: 这些选择器的特定性值为0.
* 6. 属性值末尾添加!important: 提升优先级为最高.

* 特定性值相等的情况下, 后面出现的规则会覆盖先前的规则, 因为它们在样式表中出现得更晚.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Specificity</title>
    <style>
        p {
      
      
            color: red; /* 特定性值为1的元素选择器 */
        }

        #paragraph {
      
      
            color: blue; /* 特定性值为100的ID选择器 */
        }

        .red-text {
      
      
            color: green; /* 特定性值为10的类选择器 */
        }

        body p {
      
      
            color: purple; /* 特定性值为11的组合选择器: 1个元素选择器 + 1个元素选择器 */
        }
    </style>
</head>
<body>
<p id="paragraph" class="red-text">Hello, World!</p>
</body>
</html>

2023-08-22_00009

属性值中末尾添加!important提升属性优先级.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>important</title>
    <style>


        * {
      
      
            color: aqua !important;
            font-size: 10px;
        }

        p {
      
      
            color: red;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <p>Hello, world!</p>
    </li>
</ul>
</body>
</html>

2023-08-22_00010

3. 页面布局

div标签:  是一个容器级标签, 一般用于配合css完成网页的基本布局. 特点: 独占一行.
span标签: 是一个文本级标签, 一般用于配合css完成网页中的局部信息. 

快捷嵌套标签: div.box$*2+tab; 
<div class="box1">
  <tab></tab>
</div>
<div class="box2">
  <tab></tab>
</div>

$: 自动生成数字.
*: 后面的数字表示生成的标签数量, 例*2, 生成两个标签.
>: 表示生成子表情.

3.1 div页面布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div</title>
    <style>
        .header {
      
       /*头部区域*/
            height: 100px;
            width: 1900px;
            background: red;
        }

        .content {
      
       /*中部区域*/
            height: 750px;
            width: 1900px;
            background: aqua;
        }

        .footer {
      
       /*页尾*/
            height: 100px;
            width: 1900px;
            background: blue;
        }

        .logo {
      
       /*头部logo*/
            height: 50px;
            width: 200px;
            background: #000;
        }
    </style>
</head>
<body>
<div class="header">  <!--头部-->
    <div class="logo"></div> <!--头部中设置logo的布局-->
</div>
<div class="content"></div>  <!--中部-->
<div class="footer"></div>  <!--尾部-->
</body>
</html>

2023-08-22_00011

3.2 span局部更改样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
  <style>
    span {
      
      
      color: red;
    }
  </style>
</head>
<body>
  <p>今天天气 <span>晴</span>，<span>18°</span></p>
</body>
</html>

image-20230822132213266

3.3 结构错误

文本级标签嵌套容器级标签会发生结构错误.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Error examples</title>
</head>
<body>
<p>
  段落1
  <h1>标题</h1>
</p>
</body>
</html>

可以正常显示, 但是层级结构改变了了.

2023-08-22_00013

4. 标签分类

HTML将标签分为: '容器级标签'和'文本级标签'.

容器级标签是可以包含其他标签的标签, 它们用于创建网页的结构和布局.
一些常见的容器级标签有div, h1-h6, ul, ol和li等.
例如, div标签可以用来创建一个容器, 里面可以包含其他任意的标签.

文本级标签用于处理文本内容, 它们一般只能包含文本, 超链接或图片标签.
一些常见的文本级标签包括span, p, em, ins, del等.
例如, p标签用于创建段落, 里面可以包含文字, 也可以包含其他文本级标签或超链接, 图片标签.

通过合理使用容器级标签和文本级标签, 可以实现网页的结构, 样式和内容的显示.

CSS将标签分为: '块级元素', '行内元素'和'行内块元素'.

块级元素通常是容器级标签, 它们独占一行, 默认宽度与父元素相同.
如果没有设置宽度, 块级元素会自动填充父元素的宽度.
块级元素的高度默认是内容的高度, 但可以通过设置宽高来修改显示效果.

行内元素通常是文本级标签(除了p标签), 它们不独占一行.
行内元素的高度默认是内容的高度, 无法设置宽度, 默认与内容一样宽.

行内块元素既可以设置宽高, 也不独占一行.
例如, img标签就是行内块元素, 可以设置宽高.

通过使用不同类型的元素, 可以对页面的布局和样式进行灵活的控制.

4.1 块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block level elements</title>
</head>
<body>
<!--独占一行-->
<div>div标签</div>
<h1>h标题</h1>
<p>p标签</p>
<ul>
    <li>
        ul>li标题标签
    </li>
</ul>
</body>
</html>

image-20230822141027288

4.2 行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline element</title>
</head>
<body>
<!--不独占一行-->
<ins>aaa</ins>
<del>bbb</del>
<em>ccc</em>
<a href="#">网址</a>
</body>
</html>

image-20230822141410899

4.3 行内块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block level elements within rows</title>
</head>
<body>
<img src="image/img.png" alt="图片"> 二次元少女
</body>
</html>

image-20230822141810286

5. display显示模式

display属性: 控制元素的显示模式的.

常用属性值:
- inline: 将元素显示为行内元素, 不会独占一行, 宽度由内容决定, 不能设置宽度和高度.
- block: 将元素显示为块级元素, 独占一行, 宽度默认为父元素的宽度, 可以设置宽度和高度.
- inline-block: 将元素显示为行内块元素, 不会独占一行, 可以设置宽度和高度.
- none: 将元素隐藏, 不会在前端页面展示, 也不占用位置, 但元素仍然存在于文档中.
通过使用display属性和对应的属性值, 可以调整元素的显示模式和布局.

下面是一些用来快速设置常见属性值的快捷键:
- d+tab: display:block;
- h100+tab: height:100px;
- w100+tab: width:100px;

5.1 块级元素转行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display 1</title>
    <style>
        /* 将元素显示为行内元素, 不会独占一行, 宽度由内容决定, 不能设置宽度和高度. */
        div {
      
      
            display: inline;
            height: 100px; /*失效*/
            width: 100px; /*失效*/
            background: red;
        }
    </style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
</body>
</html>

image-20230822142248051

display:inline属性防止高度产生影响.

5.2 行级元素转块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display 2</title>
    <style>
        /* 将元素显示为块级元素, 独占一行, 宽度默认为父元素的宽度, 可以设置宽度和高度. */
        span {
      
      
            display: block;
            width: 100px; /*可以设置宽高*/
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

image-20230822143005002

5.3 转为行内块级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display 3</title>
    <style>
        /* 将元素显示为行内块元素, 不会独占一行, 可以设置宽度和高度. */
        div, span {
      
      
            display: inline-block; /*可以设置宽高*/
            height: 100px;
            width: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div>div标签</div>
<span>span标签</span>
</body>
</html>

image-20230822143142867

6. visibility隐藏标签

visibility属性: 控制元素的可见性.

常用属性值:
- visible: 元素可见(默认值).
- hidden: 元素不可见, 但仍保留其空间.
- collapse: 仅用于表格元素。行或列被移除，单元格不再占据空间。
- initial: 将可见性设置为默认值.
- inherit: 继承父元素的可见性.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>visibility</title>

    <style>
        .c1 {
            display: none;  /* 隐藏标签, 标签不占位置*/
        }

        .c3 {
            visibility: hidden;  /*隐藏标签, 标签占用位置*/
        }
    </style>

</head>

<body>
    <div class="c1">d1</div>
    <div>d2</div>
    <div class="c3">d3</div>
    <div>d4</div>
</body>
</html>

image-20230822143749268

7. 页面布局练习

使用代码实现下面的页面(相似即可).

2023-08-22_00028

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度首页</title>
    <style>
        body {
      
       /*页面的文字大小 颜色*/
            font-size: 18px;
            color: #666;
        }

        div {
      
       /*所有的div标签居中*/
            text-align: center;
        }

        .header {
      
       /*头部页面高300px*/
            height: 300px;
        }

        .content {
      
       /*中间的页面高300px*/
            height: 300px;
        }

        .footer {
      
       /*尾部页面高300px*/
            height: 300px;
        }

        .logo {
      
       /*设置logo的大小*/
            height: 250px;
            width: 500px;
        }

        .location {
      
       /*定位图片大小*/
            height: 15px;
            width: 20px;
        }

        .logoH {
      
      
            height: 250px;
        }

        input[type=text] {
      
       /*输入框*/
            width: 400px;
            height: 30px;
        }

        input[type=submit] {
      
       /*搜索按钮*/
            width: 100px;
            height: 30px;
        }

        .bd {
      
      
            height: 60px;
        }

        .bk {
      
      
            height: 170px;
        }

        .footerH {
      
      
            height: 60px;
        }

    </style>
</head>
<body>
<!--头部-->
<div class="header">
    <!--logo-->
    <div class="logoH">
        <img src="image/logo.png" alt="" class="logo">
    </div>
    <!--导航条-->
    <div>
        <a href="#">新 闻</a>
        <strong>网 页</strong>
        <a href="#">贴 吧</a>
        <a href="#">知 道</a>
        <a href="#">音 乐</a>
        <a href="#">图 片</a>
        <a href="#">视 频</a>
        <a href="#">地 图</a>
    </div>

</div>

<!--中部-->
<div class="content">
    <!--搜索栏-->
    <div class="bd">
        <form action="">
            <input type="text">
            <input type="submit" value="百度一下">
        </form>
    </div>
    <!--链接地址-->
    <div class="bk">
        <a href="">百科</a>
        <a href="">hao123</a>
        |
        <a href="">更多>></a>
    </div>
    <!--广告推广-->
    <div>
        <img src="image/location.png" alt="" class="location">
        <a href="#">百度地图带你吃喝玩乐, 全心全意为人民服务</a>
    </div>
</div>

<!--尾部-->
<div class="footer">
    <!--推广-->
    <div class="footerH">
        <a href="#">把百度设为首页</a>
        <a href="#">安装百度卫士</a>
    </div>
    <!--关于百度-->
    <div class="footerH">
        <a href="#">加入百度推广</a>
        |
        <a href="#">搜索风云榜</a>
        |
        <a href="#">关于百度</a>
        |
        <a href="#">About Baidu</a>
    </div>
    <!--版本-->
    <div class="footerH">
        ©2016 Baidu 使用百度前必读 京ICP证666号
    </div>
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_46137324/article/details/132435577
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022