• 三 CSS基础入门


    CSS介绍

    CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。

    当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。

    CSS语法

    CSS实例

    每个CSS样式由两个组成部分:选择器和声明(属性和属性值),每个声明之后用分号结束。

    CSS的几种引入方式

    行内样式

    行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

    <p style="color: red; font-size: 20px">Hello world.</p>

    内部样式

    嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    p{
    background-color: #2b99ff;
    color: #4cae4c;
    font-size: 20px;
    }
    </style>
    </head>
    <body>
    <p >Hello world.</p>
    </body>
    </html>

    外部样式

    外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可。推荐使用此方式。

    <link href="mystyle.css" rel="stylesheet" type="text/css"/>
    rel:指定引入样式表;href:指定了CSS样式表位置。

    导入外部样式文件

    在内部样式表<style>标记中,使用@import导入一个外部样式表,具体格式:@import“CSS样式表”;

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
           /*导入外部CSS样式表*/
           @import "../06lianxi/05-mi.com/css/mi.css";
        </style>
    </head>
    <body>
    
    </body>
    </html>

    选择器的优先级

    CSS优先性

    注:内联样式即为行内样式!

    !important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认属性值

    !import方式来强制让样式生效,但并不推荐使用。因为如果过多的使用!import会使样式文件混乱不易维护。

    万不得已可以使用!import

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #a1 {
                color: red;
            }
            .a2 {
                color: green!important;
            }
        </style>
    </head>
    <body>
    <P id="a1" class="a2" style="color: black">!important优先性最高</P>
    <P ></P>
    </body>
    </html>

    CSS继承性 

    继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代;

    例如一个body定义了的字体颜色值也会应用到段落的文本中。

    body {
      color: red;
    }

    此时页面上所有标签都会继承body的字体颜色。

    我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

    p {
      color: green;
    }

    继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。

    在CSS中以text-、font-、line-开头的属性以及color属性都可以继承

    但有一些属性不能被继承,如:<a>标签颜色,必须对<a>标签本身设置、<h>标签字体不能继承,必须对<h>标签本身进行设置、

    border、margin、padding、background等。

  • 相关阅读:
    洛谷5495:Dirichlet前缀和
    SP5971 LCMSUM
    洛谷1829:crash的数字表格
    洛谷3172:选数
    Codeforces 1295 D. Same GCDs
    洛谷3768:简单的数学题
    NTT学习笔记
    洛谷1169:棋盘制作(悬线法)
    洛谷2444:病毒
    后缀自动机
  • 原文地址:https://www.cnblogs.com/hudaxian/p/13852832.html
Copyright © 2020-2023  润新知