CSS 引入方式和三种特性和属性优先级

最新推荐文章于 2024-04-30 07:25:25 发布

玖商

最新推荐文章于 2024-04-30 07:25:25 发布

阅读量1.2k

点赞数 3

分类专栏： HTML # css3 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_58139900/article/details/120358049

版权

HTML 同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

css3

39 篇文章 0 订阅

订阅专栏

CSS介绍，引入

css 层叠样式表 cascading 层叠 style 样式 sheets表标记语言负责样式也就是网页上那些内容的样式 (宽高，位置，字体样式，背景样式，动画，阴影，边框)

属性名:属性值;
属性名:属性值;
属性名:属性值;

...
属性名:属性值;

width:300px;

属性毫无逻辑性
不能计算

CSS引入（3种方式）

1，行内引入

<div style="width:300px;height:200px;background-color:red"></div> style样式对象 包含着这个div的所有css属性

缺点：1. 结构不清晰 2. 代码重复冗余3. 与官方提倡的结构与样式相分离不符合

2，内部嵌入

<head>
    <!-- 嵌入样式style标签 通过css选择器挑选出来 在加css样式！ 
    css选择器： 挑选html标签

    1.标签选择器 {
        利用标签名字挑选元素
    }

    2.类选择器 {
        1. 先设置一个类属性 class(并不是唯一挑选)
        2. 通过.类名实现挑选
    }
    -->
    <style>
        div {
            width:300px;
            height:200px;
            /* 背景色 */
            background-color: red;
            
        }
        p {
            /* 字体大小 */
            font-size: 50px;
        }
        .a {
            font-size: 100px;

        }
        .b {
          color: pink;
          /* font-size: 100px; */
        }
    </style>
</head>

3，外部链接

<head>
    <!-- link 链接一个外部文件  .css样式文件 
    rel 指明链接进来的文件类型
    href 

-->
    <link rel="stylesheet" href="./9-style.css">
</head>

CSS优先级

1. css引入方式的优先级

就近原则行内引入(1000) > 内部嵌入 > 外部链接

三个引入方式的优缺点和适用场景:

行内引入：

缺点：

1. 结构与样式没有分离 ---代码冗余，结构不清晰

优点：

优先级高可以覆盖其他外部样式

适用场景: 因为js里可以方便的通过行内样式获取到一些

动态的属性值！！！

内部嵌入:

缺点:没有彻底分离代码复用性不够

优点：比外部链接的优先级高

适用场景:

本页界面覆盖公共样式 common.css

外部链接

缺点：优先级低

优点：彻底分离代码复用减少冗余

适用场景：一般场合

选择器优先级:

继承属性,浏览器默认分配 < *(0) < 标签名字(1) < class,结构伪类选择器(10) < id(100) < 行内样式(1000)

复合选择器的权重= 基础选择器之和

相同优先级的选择器那就取决于代码执行的顺序代码越在下面优先级也就越大！！

 /* 10+1 */
     .list li {
         font-size: 30px;
     }
     /* 10+1+10 一个结构伪类=10 */
     .list li:nth-child(3){
         font-size: 50px;
     }

CSS三种特性

  层叠性：

就是一个标签可以有很多个类  class="a b box" 一个元素可以加相同的属性加好几次

        优先级：

              css引入方式   css选择器

        继承性:

css属性可以继承的(爸爸有后代也有)

                手册里  inherited(继承的)

                font-,line-,text-,list-,color,cursor(鼠标样式)；

                除了text-decoration(穿透规则！！)

玖商

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS 引入方式和三种特性和属性优先级

目录CSS介绍，引入CSS引入（3种方式）1，行内引入2，内部嵌入3，外部链接CSS优先级1.css引入方式的优先级行内引入：内部嵌入:外部链接选择器优先级:CSS三种特性CSS介绍，引入css 层叠样式表 cascading 层叠 style 样式 sheets表标记语言负责样式也就是网页上那些内容的样式 (宽高，位置，字...
复制链接

扫一扫