1.4Web前端基础笔记

最新推荐文章于 2024-11-05 15:31:54 发布

至暗

最新推荐文章于 2024-11-05 15:31:54 发布

阅读量81

点赞数

分类专栏： 1.web前端——html、css基础文章标签：前端 css html web html5

本文链接：https://blog.csdn.net/m0_64838786/article/details/123495180

版权

1.web前端——html、css基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文档介绍了CSS中的基础概念，包括继承原则，选择器权重的计算，像素、百分比、em和rem尺寸单位的使用，以及颜色的表示方式如RGB、RGBA、十六进制和HSL。同时讲解了文档流（normal flow）中的块元素和行内元素布局特点。

摘要由CSDN通过智能技术生成

一、继承

为一个元素设置的样式，同时也会应用到后代元素中，但不是所有的样式都会继承。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{
            color: aqua;
            background-color: bisque;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <p>我是P
        <div
        <span>我是p里的span</span>
    </p>
</body>
</html>

二、选择器的权重

样式的冲突：当我们通过不同的选择器选中同一个元素，并设置不同的样式时，就发生了央视冲突。

样式冲突时，应用样式由权重（优先值）决定，优先值越高权重越大。

内联样式 —— 1000

id选择器 —— 100

类和伪类选择器 —— 10

元素选择器 —— 1

通配选择器 —— 0

继承的样式 —— 没有优先级

比较优先值时，应该把所有优先值相加，取最高显示（分组计算器单独计算——p,span,div）。

选择器累加不能跨层级——id选择器永远不能超过内联样式。

可以在某一个样式后面加 !impartant，改样式会成为最高优先级。

相同优先级，取位于下方的样式，相当于被“覆盖”。

注：link>visited>hover>active。

三、像素和百分比

1.像素

我们使用的手机、电脑屏幕是由很多个小点组成的，不同屏幕的像素大小是不一样的发，像素越小的屏幕显示的越清晰，所以同样的200px在不同屏幕中显示效果不同。

2.百分比

可以将属性设置为相对于父元素像素百分比。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .box2{
            width: 50%;
            height: 50%;
            background-color: yellow;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>

</body>
</html>