day7 CSS属性中

1.CSS的特性

1.1CSS的层叠性

CSS的层叠性,也就是说后来设置的样式会层叠(覆盖)之前的样式,层叠性的前提示CSS的选择器的优先级相同。

1.2CSS的继承性

CSS的继承性是指,子容器的样式会继承父容器的样式。但并不是所有的样式都能继承。只有部分样式能继承,比如:文字相关字体大小、颜色、字体样式、行高、鼠标样式等。盒子相关的样式都不能继承,比如:宽高、背景色、边距、浮动、绝对定位等。

�1.3CSS的特殊性(优先级)

CSS的特殊性,定义CSS样式时,经常出现两个或更多规则应用在同一元素上,那么谁的优先级更高呢,这就是CSS的特殊性。

比较CSS的优先级的时候:

1、首先比较行内样式,行内样式优先级最高。如果嵌入样式和行内样式同时设置样式时,行内样式优先级最高。

2、其次是内嵌样式的优先级比较:

内嵌样式的,ID选择器对应的样式优先级最高。

其次是Class样式

再次是标签选择器样式,

再次是通配符选择器设置的样式

后面是继承的样式,

最后是浏览器默认的样式。

结论:1.继承的样式要大于默认的样式

2.通配符选择器的样式的优先级比继承样式的优先级要高。

3.标签的选择器的优先级要高于通配符选择器的优先级。

4.类选择器的样式的优先级要高于标签选择器的样式的优先级。

5.id选择器的优先级高于 类选择器的优先级

6.行内样式的选择器的优先级高于id选择器的优先级。

复合选择器的样式优先级核算:

复合选择器的优先级根据四个层次来算,首先是行内最高。

其次,比较所有的id选择器的个数,个数多的为高。

再次比较类选择器的个数,个数多的为高,

最后比较标签选择器的个数,个数多的为高。

2.CSS标签模式设置display属性

display可以控制标签的显示模式。

display:none | inline | block | inline-block

继承性:无

display值的解释:

none:此元素不被显示,在文档中被移除。

block:此元素按块级元素显示:前后带换行符,自己占一行。内联元素 → 块元素

inline:此元素按内联元素显示:1个挨着1个。块元素 → 内联元素

inline-block:按行内标签进行排版,但是可以设置宽高,而且高度可以影响行高。

注意:

1.display改变标签的模式,行内转块级,块级转行内。

2.通过CSS隐藏HTML标签

通过设置Display为none,那么可以让这整个标签在页面中移除掉。

对比一下:

/*display: none;*/   /*直接把当前标签从页面中直接移除了,不影响页面的布局*/

visibility: hidden;/*这个只是不显示,但还是占用页面的空间*/

案例3:行内块元素设置

宽高边距独占行

行内元素:X左右边距      不独占

块级元素:√       上下左右       独占

行内块元素:√        左右          不独占

行内元素不能设置宽高,只能通过他的内容来撑开他的宽度和高度。如果你设置了宽高是不会影响行内元素的显示的。

3.CSS的颜色表示

RGB:red,green,blue三元素叠加组成不同颜色。

语法:color: rgb(33,33,33);

取值:0-255,也可以用百分比:0% - 100%

十六进制是另外一种写法:

Color:#3333333;

十六进制也是rgb的表示方法另外一种写法而已

�4.长度单位

绝对长度单位:

cm:厘米,mm:毫米,in:英寸,pc:派卡(Picas),相当于我国新四号铅字的尺寸。都不常用,了解即可。

相对长度单位:

px:像素点,像素就是显示器显示的一个点。

em:1em等于当前的字体大小,例如:当前元素的字体大小为16px,那么1em = 16px。

单位之间的关系:1in = 2.54cm = 25.4 mm  = = 96px

p { width: 1in; height:20px; }

在PC时代主要以px为主。在移动web时代主要以:em、rem、pw、ph、百分比等来做布局的设置。

相对单位解释:像素是相对单位。不同平面尺寸可以是相同的分辨率,也就相同的像素大小,对应的实际的尺寸可能不同。例如以下,iphone和pc电脑相同的屏幕分辨率下,对应点的大小不同。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,792评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,599评论 32 459
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,662评论 0 30
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 所有的斑驳只属于我的惦念,附带了背景
    2020号阅读 334评论 26 26