css学习3

css的两个特性:

1.继承性:有一些属性,当给父级元素设置的时候,他的后代元素也会继承了这个属性,可以继承的属性有:color,   font-开头的属性    text-开头的属性     line-开头的属性   等文字修饰的属性,所有有关盒子的属性如:定位的,布局的属性不能继承,继承性从自己开始的,一直到最高级的父级

以上案例p元素最终在页面上的显示为字体是#0f0绿色,字体大小是30px;

2,层叠性,就是当给元素设置属性起冲突的时候css处理冲突的能力,具体以权重为准,

权重是计算:id选择器 > class类选择器 > 标签选择器      他们一个数进行计算

当选择器同时以不同的方式选中同一个元素时,以以上选择器的个数计算权重,

如果不能直接选中某一个元素,通过继承性影响,权重这时为0,根据就近原则,来影响该元素的样式

但有一种特殊情况  !important,     当在属性的后面加上!important    就会使该属性的权重最高

注: !important提升的是一个属性而不是一个选择器,无法提升继承继承的权重,不影响就近原则

这时第一个里 的字体是蓝色,其他的字体颜色是红色

这时p元素的字体颜色是红色

时间: 2024-10-21 05:01:46

css学习3的相关文章

CSS学习之float解析

转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.下面解释下这个定义中的几个名词的概念: 文档流:在html中文档流即为元素从上至下排列的顺序. 脱离文档流:元素从正常的排列顺序被抽离. 最左边/最右边:上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界(不包括padding). 二.float

css学习感言

在培训学校学习了一个多月了,最近主要讲的是css,准确的说老师上课讲css用了8天的时间,讲课的速度飞快,可能是对于我这种零基础的学生来说吧,感觉学起来很吃力,不过在这个过程中也学到了许多知识,这里主要介绍一下css中选择器权重的问题,css中选择器分为三类1.元素选择器2.类选择器3.id选择器4.通配符 ,这里主要介绍前三类. 元素选择器:例如table,input,button等他们分别表示一大类,称之为元素.它的权重是最小的,相当于日常生活中重量单位的一克.它是对一大类比如table,i

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

CSS学习(二)—浮动

一. 定义 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 解决的问题:"如何在一行显示多个div元素" 二. 浮动与不浮动区别 图1 图2 区别 不浮动的框是由上往下独占一行的,而浮动的框是紧靠着排列的.图2中d1.d2.d3都是向左浮动的,所以先把d1放在紧靠着父框摆放,然后把d2紧靠着d1摆放,最后d3紧靠着d2摆放.向右浮动亦与之类似. 语法: float : none | left |right 参数: none : 对象不浮动 left :

2016/2/25 html+css学习资源

html+css学习资源 1.Position is Everything,一个描述和展示在各种浏览器中发现的bug,并提供css解决方法的网站,顶! 2.一个国外的网页设计论坛 3.http://css-tricks.com/ 4.http://html5demos.com/ 有很多html5 DEMO 5.http://www.alistapart.com 6.http://webreference.com/ 7.http://www.webmonkey.com/ 8.http://www.

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

html+css学习笔记 3[浮动]

inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie6 ie7不支持块属性标签的inline-block(问题) float浮动: 1.块在一排显示     2.内联支持宽高     3.默认内容撑开宽度      4.脱离文档流     5.提升层级半层 文本流 float:left | right | none | inherit; 文档流是文档

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

【转】css学习专题-BFC

css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 containing block 顶部起一个接一个垂直排列,水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC). developer center上面有对BFC的一段描述: 一个 block formatting context 是web页面可视化CSS渲染的一个部分,是一块 block b