【HTML/CSS】CSS权重、继承及引入方式

1 CSS权重

1.1 权重规则

CSS匹配的选择器中每一种选择器类型的数组决定了选择器的权重,CSS的优先级规则:

  1. 权重高的样式会被应用到元素上。
  2. 如果权重相同则使用最后声明的样式。
  3. 属性后加上!important,无条件优先

1.2 权重计算

内联样式的权重:1000
ID选择器的权重:100
类选择器、属性选择器、伪类选择器的权重:10
元素选择器的权重:1
通配符*、子选择器>、兄弟选择器+的权重:0

/* ul=1 + #nav=100 + li=1 + .active=10 + a=1 = 113*/
ul#nav li.active a {
}

2 CSS的继承

继承是指子元素继承父元素的样式,下面列举有继承性的属性:

2.1 字体属性

  1. font
  2. font-family
  3. font-weight
  4. font-size
  5. font-style
  6. font-variant

2.2 文本属性

  1. text-indent:文本缩进
  2. text-align:文本水平对齐
  3. line-height:行高
  4. word-spacing:字间距
  5. letter-spacing:字符间距
  6. text-transform:文本大小写
  7. direction:文本书写方向
  8. color:文本颜色

2.3 其他

  1. 元素可见性:visibility
  2. 表格布局属性
  3. 列表布局属性:ist-style-type、list-style-image、list-style-position、list-style
  4. 光标属性:cursor:
  5. 页面样式属性

3 CSS引入方式

  1. 内联样式
<p style="color:red">红色的字</p>
  1. 内部样式表
<style>p {color:red;}
</style>
  1. 外部样式表
    链接式:<link type="text/css" rel="styleSheet" href="CSS文件路径" />
    导入式:
    <style type="text/css">@import url("css文件路径");
    </style>
    
    链接式的语法是属于HTML的,优先加载CSS文件到页面
    导入式的语法属于CSS,先加载HTML结构再加载CSS文件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/480899.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TCC分布式实现原理及分布式应用如何保证高可用

一、业务场景介绍 咱们先来看看业务场景&#xff0c;假设你现在有一个电商系统&#xff0c;里面有一个支付订单的场景。 那对一个订单支付之后&#xff0c;我们需要做下面的步骤&#xff1a; 更改订单的状态为“已支付”扣减商品库存给会员增加积分创建销售出库单通知仓库发货…

IJCAI 2018:中科院计算所:增强对话生成一致性的序列到序列模型

IJCAI 2018&#xff1a;中科院计算所&#xff1a;增强对话生成一致性的序列到序列模型文章来源&#xff1a;企鹅号 - 读芯术你和“懂AI”之间&#xff0c;只差了一篇论文号外&#xff01;又一拨顶会论文干货来袭&#xff01;2018年6月9-10日&#xff0c;代表学术界和工业界的顶…

一时学习一时爽,持续学习持续爽

一只小狐狸带你解锁NLP/ML/DL秘籍作者&#xff1a;小鹿鹿鹿 net~net~你围棋下的这么好&#xff0c;斗地主应该也不错吧不敢当不敢当但是人家柯洁才得了欢乐斗地主全国第一呢那让老夫也学习学习吧~巴拉巴拉小魔仙Training。。。net net stop&#xff01;你怎么斗地主还没学会&am…

【HTML/CSS】HTML元素种类的划分

1 种类划分 1.1 块级元素 特征&#xff1a;独占父元素的一行&#xff0c;可以设置宽高&#xff0c;高度默认由内容决定。常用标签&#xff1a;div、p、h1~h6、ul、ol、li、dl、dt、dd、table、form不常用标签&#xff1a;pre用来定义预格式化文本&#xff0c;pre内的文本会保…

基于“大中台+小前台”思想的电商系统总体架构设计

一、架构总原则 1. 大中台小前台的架构思路 2. 业务中台采用领域驱动设计&#xff08;DDD&#xff09;&#xff0c;在其上构建业务能力SAAS&#xff0c;持续不断进行迭代演进。 3. 平台化定位&#xff0c;进行了业务隔离设计&#xff0c;方便一套系统支撑不同玩法的业务类型和便…

问答系统总结

最近在研究问答系统,但是在查找资料的过程中一直处于懵逼状态,因为问答系统分类比较多,根据不同的依据可以分为不同种类,总是搞混,也没有找到资料详细全面的介绍,所以在一边学习查找资料的同时,自己也整理出一份总结,用于以后学习过程不至于思路混乱,如有错误请帮忙指出.19世纪…

论文写作葵花宝典

一只小狐狸带你解锁NLP/DL/ML秘籍作者&#xff1a;小鹿鹿鹿论文写作套路老板说&#xff1a;写论文是有套路的老板说&#xff1a;introduction写好了&#xff0c;论文就成功了一半老板说&#xff1a;你的motivation是什么&#xff0c;contribution又是啥&#xff1f;小夕说&…

李涓子 | 机器智能加速器:大数据环境下知识工程的机遇和挑战

本文转载自公众号&#xff1a;数据派THU。 导读&#xff1a;知识图谱已经成为推动人工智能发展的核心驱动力之一。本文选自清华大学计算机科学与技术系教授、清华-青岛数据科学研究院科技大数据研究中心主任李涓子老师于201…

【HTML/CSS】CSS盒模型及其理解

1 盒模型 概念&#xff1a;CSS盒模型本质是一个盒子&#xff0c;包括&#xff1a;外边距margin、边框border、内边距padding、内容content 分类&#xff1a;标准盒模型&#xff08;W3C&#xff09;和怪异盒模型&#xff08;IE&#xff09; 标准盒模型&#xff1a;width的值就是…

Netty异步非阻塞事件驱动及原理详解

本文基于 Netty 4.1 展开介绍相关理论模型、使用场景、基本组件、整体架构&#xff0c;知其然且知其所以然&#xff0c;希望给大家在实际开发实践、学习开源项目方面提供参考。 Netty 是一个异步事件驱动的网络应用程序框架&#xff0c;用于快速开发可维护的高性能协议服…

文本预处理跑得慢?抱抱脸团队又放福利,1GB文本语料分词只需20s!

一只小狐狸带你解锁NLP/DL/ML秘籍正文素材来源&#xff1a;量子位缘起BERTBERT带来的并不是只有一大波paper和嗷嗷上线&#xff0c;还带火了一个NLP团队——Huggingface&#xff08;中文译作抱抱脸&#xff09;。抱抱脸团队是一个创业团队。他们的Transformers是github上最火的…

基于深度学习的FAQ问答系统

| 导语 问答系统是信息检索的一种高级形式&#xff0c;能够更加准确地理解用户用自然语言提出的问题&#xff0c;并通过检索语料库、知识图谱或问答知识库返回简洁、准确的匹配答案。相较于搜索引擎&#xff0c;问答系统能更好地理解用户提问的真实意图, 进一步能更有效地满足用…

【HTML/CSS】定位方式及区别

1 文档流 文档流是浏览器默认的排版方式 文档流的排版方式是块级元素垂直排布&#xff0c;行内元素和行内块元素水平排布。 2 脱离文档流 脱离文档流是不按照文档流的排版方式进行排版&#xff0c;脱离后&#xff0c;元素不在布局中&#xff0c;不在流中占有位置&#xff0c…

基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba的企业级微服务敏捷开发系统架构

一、项目总体架构图 二、功能介绍 2.1、统一认证功能 支持oauth2的四种模式登录 支持用户名、密码加图形验证码登录 支持手机号加密码登录 支持openId登录 支持第三方系统单点登录 2.2、分布式系统基础支撑 服务注册发现、路由与负载均衡 服务降级与熔断 服务限流(url/方法级别…

征文通知 | 2018年全国知识图谱与语义计算大会

2018年全国知识图谱与语义计算大会China Conference on Knowledge Graph and Semantic Computing (CCKS 2018)2018年8月15日-18日&#xff0c;天津征稿截止: 2018年5月18日全国知识图谱与语义计算大会&#xff08;CCKS: China Conference on Knowledge Graph and Semantic Comp…

如何让聊天机器人懂情感?这是一篇来自清华的论文

原载&#xff1a;Paperweekly作者&#xff1a;黄民烈&#xff0c;清华大学老师关注自然语言处理、人机对话情感分析等方向aihuangtsinghua.edu.cn当你悲伤的时候&#xff0c;机器人可以安慰你&#xff1b;当你高兴的时候&#xff0c;机器人为你高兴。悲你所悲&#xff0c;喜你所…

戴着口罩也要开心过年吖!

一只小狐狸带你解锁NLP/ML/DL秘籍素材来源于网络新的一年????就要到来了作为超(bu)高(shan)智(yan)商(ci)的程序员如何向亲朋好友证明我们是人群中最靓的仔呢小夕为你准备了专属程序员的新春祝福~~普天同庆for (;;) { print("鼠年快乐"); }&#xff08;满屏的新年…

【HTML/CSS】margin塌陷和合并问题

1 margin塌陷问题 1.1 示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>margin塌陷</title…

集群、分布式、微服务的概念及异同

一、什么是集群&#xff1f; 集群是指将多台服务器集中在一起&#xff0c;每台服务器都实现相同的业务&#xff0c;做相同的事&#xff1b;但是每台服务器并不是缺一不可&#xff0c;存在的主要作用是缓解并发能力和单点故障转移问题。 集群主要具有以下特征&#xff1a;&…

论文浅尝 | Complex Embeddings for Simple Link Prediction

The ́o Trouillon, Johannes Welb, Sebastian Riedel, ÉricGaussier, Guillaume Bouchard . Complex Embeddings for Simple Link Prediction. In Proceedings of the 33ndInternational Conference on Machine Learning, pages 2071– 2080 (ICML2016)论文链接&#xff1a;…