Html-CSS级联样式表

Posted 863652104kai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Html-CSS级联样式表相关的知识,希望对你有一定的参考价值。

CSS

CSS3就是css语言,数字3是该语言的版本号;css语言开发的文件是以.css为后缀,通过在html文件中引入该css文件来控制html代码的样式(css语言代码也可以直接写在html文件中),采用的语言是级联样式表 (Cascading Style Sheet),也属于标记语言。用来完成页面样式与布局

css三种引入方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css的引入</title>
    <!--2、内联式-->
    <!--书写位置:在head标签中的style标签内-->
    <!--css语法:css选择器  样式1; 样式2;  -->
    <!--优缺点: 可读性强,有复用性,样式被html页面绑定了,不能提供给其它html页面使用-->
    <style>
        h2 
            color: red;
            font-size: 100px;
            text-align: center;
        
    </style>

    <!--3、外联式-->
    <!--书写位置:在外部css文件中,在html文件中通过link标签引入css文件-->
    <!--css语法:css选择器  样式1; 样式2;  -->
    <!--优缺点: 可读性强,有复用性,适合团队开发(文件级别的复用性)-->
    <link rel="stylesheet" href="css/样式引入.css">
</head>
<body>
    <!--1、行间式-->
    <!--书写位置:在标签的style属性中书写样式-->
    <!--优缺点: 可读性差,没有复用性,书写直接-->
    <h1 style="color: red; font-size: 100px; text-align: center;">css的引入</h1>
    <h1>h1标签</h1>

    <h2>h2标签</h2>
    <h2>h2标签</h2>

    <h3>h3标签</h3>
    <h3>h3标签</h3>

    <h4>h4标签</h4>
    <h4>h4标签</h4>
</body>
</html>
------------------------------------------------------------------------------
/* css/样式引入.css */
h3 
    color: green;

h4 
    font-size: 50px;
    text-align: center;

三种css引入直接的优先级

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css的引入</title>
    <!--优先级:
    1、内联与外联之间没有优先级区别,由于html属于解释性语言,书写在下方的会覆盖上方的样式
    2、行间式的优先级要高于一切
    -->

</head>
<body>
    <h3>h3标签</h3>
    <h3>h3标签</h3>

    <h4>h4标签</h4>
    <h4 style="font-size: 100px">h4标签</h4>
</body>

<style>
    h4 
        color: #ff7800;
        font-size: 20px;
    
</style>
<link rel="stylesheet" href="css/样式引入.css">
</html>

css基础选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css基础选择器</title>
    <style>
        /*优先级:可以从作用范围来判断 - 作用范围越精确,优先级越高 */
        /*1、统配选择器*/
        * 
            color: pink;
            font-size: 12px;
        
        /*2、标签选择器*/
        h1 
            font-size: 20px;
        

        /*3、类选择器*/
        .h 
            font-size: 30px!important;
        

        .h2 
            font-size: 40px;
        

        .h.h2 
            font-size: 50px;
        

        /*4、id选择器*/
        #hhh 
            font-size: 100px;
        

    </style>
</head>
<body>
    <h1 class="h">1标题</h1>
    <h2 id="hhh" class="h h2" style="font-size: 12px">2标题</h2>
</body>
</html>

优先级:!important > 行间式 > id > class > 标签 > 统配,作用范围越精确,优先级越高

以上是关于Html-CSS级联样式表的主要内容,如果未能解决你的问题,请参考以下文章

html-css样式表

小程序样式表不支持级联选择器

在JSF中包含级联样式表(CSS)

CSS怎样改变行内样式(通过外部级联样式表) css !important用法CSS样式使用优先级判断

级联样式表不适用于角度Js

CSS之字体和层叠样式表引入