css核心基础总结篇

今日这篇是整合前面的css补充知识的。

我觉得前面的关于css的知识补充进去有点乱,今日整理整理一下。

层叠样式表

层叠是什么意思?为什么这个词如此重要,以至于要出现在它的名称里。

层叠可以简单地理解为冲突的解决方案。

什么是冲突?

就是同个元素在使用不同的选择器选择中后添加相同的样式。

优先级规则可以表述为

行内样式>ID样式>类别样式>标记样式

在复杂的页面中,某一个元素有可能会从很多地方获取样式,例如一个网站的某一

级标题整体设置为使用绿色,而对某个特殊栏目需要使用蓝色,这样在栏目中就需

要覆盖通用的样式设置。在很简单的页面中,这样的特殊需求实现起来不会很难,

但是如果网站的结构很复杂,就完全有可能代码变得非常混乱,可能出现无法找到

某个元素的样式来自于哪条规则的情况。因此,必须要充分理解css中“层叠”的原理。

计算冲突样式的优先级是一个比较复杂的过程,并不仅仅是上面这个简单的优先级规则

可以完全描述的。但是读者可以把一个大的原则,就是“越特殊的样式,优先级越高”。

而这个怎么样才是特殊且越特殊怎么定位,请接着看以下的内容。

特殊性:

每个选择器都有特殊性,而如果一个元素有两个或多个冲突的属性声明,特殊性高的胜出。

选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分,如:0,0,0,0.

一个选择器的具体特殊性如下确定:

对于选择器中给定的各个ID属性值,则在第二个部分加一:0,1,0,0。

对于选择器中给定的各个类属性值、属性选择或伪类,则在第三个部分加一:0,0,1,0。

对于选择器中给定的各个元素和伪元素,则在第四个部分加一:0,0,0,1。

结合符和通配选择器对特殊性没有任何贡献。

但通配选择器特殊性为零  : 即0,0,0,0。

结合符连零都没有。

例子:

h1{color:red;}   为0,0,0,1

p em{color:purple}  为0,0,0,2

.grape{color:purple}  为0,0,1,0

p.b e.a{color:red; }   0,0,2,2

#aa{color:red;}    0,1,0,0

div#aa *[href]{color:red;}  0,1,1,1

而第一个0是为行内样式准备的,因为越前面,代表优先级越高,假如非零数字位置一样,那么先比较前面的数字的大小,

然后再往下比较,直到数字不相对,取数字大那个的优先级高。

所以才有上面的那个大致优先级规则:

行内样式>ID样式>类别样式>标记样式

它们刚刚好可以作为每个部分的代表,也是四个,对号入座。

重要声明 !important   ,就是把你所需要的声明标出来,它的优先级最高,不过它要放在声明的值的最后。

继承:

继承的特殊性连零都没有,就是没有特殊性;

这个0特殊性有零与无特殊性有很大的区别,就是0特殊性的选择器可以为后代加样式,

而继承虽然也有给后代加样式,但有限制的,只有有继承能力的才能加到后代元素中,如color等,而margin、padding和border这些属性都不会加到后代里。

相同权重的,按顺序比较,顺序越下他的优先级最高。

较高特殊性强于较低特殊性

所以伪类声明顺序:link-visited-hover-active

LVHA(简写)

当:visited在他们之后时,由于权重一样,所以会看他们的顺序,而:visited在他们之后会胜出。

当不是写统一属性就不会出现这种问题。所以写同一种属性时要注意 !!!!

以上是css的核心基础。

扩充这篇知识之外:

包含块:

包含块的宽就是所包含的元素的父级的宽度,而父级的宽度就是包含在里面的各个元素的

margin-left   +    border-left   +   padding-left  +   width   +   padding-right   +   border-right  +    margin-right=包含块水平宽

width、margin-left、margin-right都可以设置auto;

而margin-left和margin-right同时设置auto,会在居中,但这是有条件的:

1、这个元素必须是块级元素并且没有脱离文档流

2、这个元素有设置宽度

margin-top、margin-bottom设置auto是不会垂直居中,设置成auto,它们只会等于零。

水平总长度的七大属性,这七个属性就是上面计算公式的属性,他们的总和不能大于水平总长度,而margin能为负值,在计算上也不违反这个规则。

注意:只有margin能为负值。

至于margin为负值时什么样的,自己去体验,这个属性看起来挺犯规的。

时间: 2024-11-03 02:04:39

css核心基础总结篇的相关文章

2天驾驭DIV+CSS (基础篇)(转)

这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区[知识三] 什么是W3C标准?[基础一] CSS如何控制页面[基础二] CSS选择器[基础三] CSS选择器命名及常用命名[基础四] 盒子模型[基础五] 块状元素和内联元素 实战篇[第一课] 实战小热身[第二课] 浮动[第三课] 清除浮动[第四课] 导航条(上) | 导航条(下)[大练习] 前四节课

(1) css的核心基础

 css的核心基础 1.css的基本语法在具体使用css之前,请各位兄弟姐妹先思考一个生活中的问题,一般情况下我们是如何描述一个人的呢? 小明{ 民族:汉族: 性格:温柔: 性别:男: 体重:68kg: 身高:172CM: } 这个表实际是由3个要素组成的,即姓名.属性.属性值.通过这样一张表,就可以把一个人的基本情况描述出来了.表中每一行分别描述了一个人的某一种属性,以及该属性的属性值. css的规则:三级标题{                             用英文写出来:h3{ 

【慕课网】php工程师学习计划之我的学习笔记——01 入门必学web基础 htmlcss基础课程 篇

为了进一步学习PHP,本周我选定了慕课网的PHP工程师学习计划, 从今天2015-07-06 10:24:47开始从头学习:计划本周尽快学习完成本课程,谨此作为笔记. 有个好的学习计划和思路非常非常重要,非常感谢慕课网提供本套学习计划,希望更多地学习平台能提供像这样全面一条龙学习思路清晰地教程. 计划图:链接 我的学习状况:2015-07-06 10:29:46 开始随记: php工程师学习计划笔记——01 入门必学web基础 htmlcss基础课程 篇 入门篇: text-align:cent

C# Xamarin移动开发基础进修篇

一.课程介绍 英文原文:C# is the best language for mobile app development. Anything you can do in Objective-C, Swift or Java, you can do in C#. 中文译意:C#是移动应用程序开发的最佳语言. 在Objective-C,Swift或Java中你可以做的任何事情,你都可以在C#中完成. 1).本次分享课程适合人群如下: 1. 热爱Xamarin跨平台移动开发. 2.进一步了解和学习

Android核心基础第五天

一.学习目标及要求 课程目标 课程内容(必须讲的内容,就是讲课的知识点的顺序) * 掌握Activity 配置 * 掌握 Intent 显示意图 * 掌握 Intent 隐式意图 * 掌握两种意图的使用场景 * 掌握 activity 开启的数据传递 * 掌握activity的生命周期 * 掌握横竖屏切换的生命周期 * 掌握不同android版本 生命周期的细微差别 * 掌握开启activity获取返回值 * 掌握请求码 结果码的作用 * 掌握程序入口activity配置参数 * 掌握显示意图 

Linux及Arm-Linux程序开发笔记(零基础入门篇)

Linux及Arm-Linux程序开发笔记(零基础入门篇)  作者:一点一滴的Beer http://beer.cnblogs.com/ 本文地址:http://www.cnblogs.com/beer/archive/2011/05/05/2037449.html 目录 一.Arm-Linux程序开发平台简要介绍... 3 1.1程序开发所需系统及开发语言... 3 1.2系统平台搭建方式... 4 二.Linux开发平台搭建... 5 2.1安装虚拟工作站... 5 2.2安装Linux虚拟

数据集成之主数据管理(一)基础概念篇

数据集成是当下比較热门的话题,相关的产品和平台也越来越多.非常多CIO都在各种数据集成平台和产品之间犹豫不决.因此对数据集成平台的框架体系有全面的理解,对各个厂家产品所提供的功能有深入的认识才干为数据平台选型的决策提供可靠的保证. 我有幸參与了国内一个知名企业的集成平台的设计工作,并主导了数据集成平台的需求分析和产品选型工作.这次工作中,研究了非常多新的技术方向和产品,以下我主要讲一下数据集成领域的一种新兴的产品平台主数据管理平台MDM(Master Data Management). 主数据的

《跟老男孩学Linux运维之shell编程实战》-第二章 shell变量的核心基础

这篇文章主要讲解 shell变量的核心基础. 1.变量是什么? 变量是什么?可能有好多人不明白,简单地说,变量就是用一个固定的字符串(也可能是字符.数字等的组合)代替更多.更复杂的内容,该内容里可能还会包含变量.路径.字符串等其他的内容. 变量的赋值方式为:先写变量名称,紧接着是"="这个字符,最后是值,中间无任何空格(变量的内容一般要加双引号,以防止出错,特别是当值里的内容之间有空格时). 如何打印变量?通过echo命令加上$变量名 打印变量的值: 例如:定义变量和打印变量: [[e

黑马程序员——基础加强篇

------- android培训.java培训.期待与您交流! ---------- MyEclipse相关知识 Workspace与project 切换工作空间:File---Switch Workspace---Other 一个工作间包含多个工程,切换工作间之后,会影响里面的工程,例如快捷键什么的都要重新配置如果重新配了之后快捷键还没有用就要考虑下那个快捷键是不是冲突了    视图管理与程序调试 可以通过Window---Show View来添加各种透视图. 调试程序的时候可以在代码右边双