登录  /  注册
博主信息
博文 19
粉丝 0
评论 0
访问量 14147
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
CSS样式来源以及优先级、常用选择器以及权重分析方法
期待.
原创
737人浏览过

1.CSS样式优先权

默认样式实例

  • 写上一个H1标签,不添加任何属性,你会发现所展示出来的仅仅是浏览器的默认样式.
    继承样式实例
  • 我们在body标签写上一个style属性,会发现即使H1标签没有添加任何样式,但是仍然变色.
  • 这是因为body标签作为H1标签的父元素,H1标签继承了body标签的样式.
  • 因此我们可以得知,继承样式 > 默认样式.
    自定义样式实例
  • 由图可知,body标签的style属性仍然存在,但是我们在H1标签中也添加了一个style属性.
  • 并且H1标签的style属性颜色为蓝色,而效果确实是蓝色.
  • 那么我们可得知,最终优先权为:单个标签自身属性 > 继承样式 > 默认样式.

    2.CSS引入方式以及引入方式优先权

  • 通过学习,我们知道了CSS引入方式一共有三种
    • 行内式
    • 内联式
    • 外链式
  • 那么可以通过一些案例来了解一下这三者之间的优先权,看谁是老大,谁老二,谁老三.
    外链式实例
  • 我们通过外链一个CSS文件,在CSS文件中选中H1标签实现了更改掉H1标签的样式.
    内联式实例
  • 我们并没有删除外链的CSS样式,但是我们在HTML中写入的style标签,选中了H1标签.
  • 覆盖掉外链CSS文件的样式,我们可以得知:内联式 > 外链式.
    行内式实例
  • 我们通过在某个标签的属性中添加一个style属性,并且更改一下颜色.
  • 发现更改的颜色覆盖了内联式和外链式的颜色样式.
  • 最终优先权为:行内式 > 内联式 > 外链式.

    3CSS常用选择器

  • CSS常用选择器有如下几种
    • 标签选择器
      • 标签选择器
    • 属性选择器
      • 属性选择器
    • 群组选择器
      • 群组选择器
    • 通配选择器
      • 通配选择器
    • 子元素选择器
      • 子元素选择器
      • 子元素选择器用:>
    • 后代元素选择器
      • 后代元素选择器
      • 后代元素选择器用空格
    • 相邻兄弟选择器
      • 相邻兄弟选择器
      • 相邻兄弟选择器用:+
    • 所有兄弟选择器
      • 所有兄弟选择器
      • 所有兄弟选择器用:~

        4CSS权重分析方法

  • CSS权重代码是(0,0,0).第一个0代表id,第二个0代表class,第三个0代表标签.
  • 并且尽量不要使用ID,因为ID权重过大.
批改老师:PHPzPHPz

批改状态:合格

老师批语:写的很不错,可以加一行间隔,这样排版就很舒适
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学