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
【9月更文挑战第2天】内嵌式CSS。
32 3
|
前端开发
|
11月前
|
前端开发 JavaScript UED
CSS 20大酷刑(三)
CSS 20大酷刑(三)
|
Web App开发 前端开发 iOS开发
【CSS3】
【CSS3】
254 3
|
前端开发
很实用的几个css小技巧
很实用的几个css小技巧
93 0
|
前端开发
CSS3介绍
CSS3介绍
91 0
CSS3介绍
|
Web App开发 前端开发 安全
常用 CSS(下)
常用 CSS(下)
152 0
常用 CSS(下)
|
前端开发 JavaScript C++
初识Windi Css
初识Windi Css
812 0
|
前端开发