Day04 CSS

简介: CSS
样式的继承
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        /* 
            样式的继承:我们为一个元素设置的样式同时也会应用到它的后代元素上。

            继承是发生在祖先后代之间的。

            利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上
            这样只需要设置一次即可让所有的元素都具有该样式。

            但并不是所有的样式都会被继承。(背景、布局相关的)

        */

        p {
            color: red;
            background-color: orange;
        }

    </style>


</head>
<body>
    
    <p>
        我是P标签
        <span>我是SPAN标签</span>
    </p>

</body>
</html>
选择器的权重
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

    <style>

        /* 
            样式冲突:
                通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的属性值时。
                发生样式冲突时,应用哪个样式由选择器的权重决定。

            选择器的权重(优先级):
                内联样式 > id选择器 > 类和伪类选择器 > 元素选择器
                (从左到右,权重越来越低)

            比较优先级时,需要将所有的选择器的优先级进行计算,谁优先级高显示谁的样式。
            选择器的累加不会超过其最大的数量级,类选择器再高也不会超过id选择器
            如果优先级相同,则优先使用靠下(最后设置)的样式。
            继承的样式没有优先级。

            可以在某个样式的后面加 !important ,则此时该样式会获取到最高的优先级,甚至超过内联样式。
            

        */
        div {
            color: aqua;
        }

        #box {
            color: blue;
        }

        .common {
            color: white;
        }

        div#box{
            color: green;
        }

    </style>

<body>
    
    <div id="box" class="common" style="color: black;">
        我是一个DIV标签
    </div>

</body>
</html>
CSS单位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        /* 
            长度单位:
                像素:px
                    屏幕〔显示器〕实际上是由一个一个的小点点构成的
                    不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰
                    所以同样的200px在不同的设备下显示效果不—样
                百分比:%
                    可以将属性值设置为相对于其父元素属性的百分比
                    设置百分比可以使子元素跟随父元素的改变而改变
                em
                    是相对于元素的字体大小来计算的
                    1 em = 1 font-size
                    em会根据字体的大小的改变而改变
                rem
                    是相对于根元素的字体大小来计算的



        */
        .box1 {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .box2 {
            width: 50%;
            height: 50%;
            background-color: black;
        }

        .box3 {
            font-size: 30px;
            width: 10em;
            height: 10em;
            background-color: green;
        }

        html {
            font-size: 50px;
        }
        .box4 {
            width: 10rem;
            height: 10rem;
            background-color: green;
        }

    </style>

</head>
<body>
    
    <div class="box1">
        <div class="box2">

        </div>
    </div>

    <div class="box3">

    </div>

    <div class="box4">

    </div>

    

</body>
</html>
CSS颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        /* 
            颜色:
                直接使用颜色名称来表示,比如:red、greed等等。

                使用RGB值:
                    通过三种颜色的不同浓度来调配出不同的颜色。
                    R red G greed B blue
                    每一种颜色的范围在0-255(0%-100%)之间
                    语法:RGB(红色,绿色,蓝色);

                使用RGBA值:
                    在RGB的基础上增加一个A表示不透明度
                    语法:RGBA(红色,绿色,蓝色,不透明度);
                    0表示完全透明 .5表示半透明  1表示完全不透明

                十六进制的RGB值:
                    语法:#
                    颜色浓度范围: 00-ff
                    如果颜色两位两位重复,可以简写。#aabbcc -> #abc

                HSL值 HSLA值
                    H 色相(0 - 360)
                    S 饱和度(0% - 100%)
                    L 亮度(0% - 100%)


        
        */
        .box1 {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color:rgb(1, 2, 3);
        }

        .box3 {
            width: 300px;
            height: 300px;
            background-color:rgba(1, 2, 3,.5);
        }

        .box4 {
            width: 300px;
            height: 300px;
            background-color:hsl(0, 100%, 0%);
        }


    </style>

</head>
<body>
    
    <div class="box1">

    </div>

    <div class="box2">

    </div>

    <div class="box3">

    </div>

    <div class="box4">

    </div>

</body>
</html>
文档流
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 
        文档流(normal flow)
            网页是一个多层的结构,一层叠着一层
            通过CSS可以分别为每一层来设置样式
            用户只能看到最顶上的一层
            而最底下的一层称为文档流
            文档流是网页的基础,所创建的元素默认都是在文档流中进行排列
            元素主要有两个状态:在文档流中、不在文档流中(脱离文档流)

        元素在文档流中的特点:
            块元素:
                在页面中独占一行。
                默认宽度是父元素的全部(把父元素撑满)
                默认高度是被里面的内容撑开(子元素)

            行内元素:
                不会独占一行,只占自身的大小
                在页面中左向右水平排列
                如果一行中不能容纳所有的行内元素,则会自动换到第二行继续自左向右排列
                默认的宽度和高度都是被内容撑开

     -->

     <div class="box1"></div>
     <div class="box2"></div>
     <span></span>
     <span></span>

</body>
</html>
目录
相关文章
|
2月前
|
前端开发
CSS枫叶纷飞
CSS枫叶纷飞
44 1
|
5月前
|
前端开发
CSS外部样式
CSS外部样式
|
6月前
|
存储 前端开发
什么是 CSS
什么是 CSS。
54 6
|
6月前
|
前端开发 UED
CSS
CSS
41 0
|
6月前
|
前端开发
CSS总结干货
行内样式表(行内式) 行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式. ​ 语法:
|
前端开发 安全 容器
CSS(2)
在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。 复合选择器可以更准确、更高效的选择目标元素(标签)。 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的。 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。
55 1
|
前端开发
CSS内嵌式
CSS内嵌式
60 0
|
前端开发
18. css
18. css
102 0
18. css
|
前端开发
为什么不会有CSS4?
简单地说,就是从CSS3开始,CSS规范就被拆成众多模块(module)单独进行升级,或者将新需求作为一个新模块来立项并进行标准化。因此今后不会再有CSS4、CSS5这种所谓大版本号的变更,有的只是CSS某个模块级别的跃迁。
2011 0