如何理解 css 样式表的层叠性

html-css06

如何理解 css 样式表的层叠性,第1张

可以有三种理解方式,如下:

一:层叠性指的是样式的优先级,当产生冲突时以优先级高的为准。

开发者样式>读者样式>浏览器样式(除非使用!important标记

id选择符>(伪)类选择符>元素选择符

权重相同时取后面定义的样式

二:

CSS层叠性是指CSS样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠。每个CSS选择器都会有一个权重,当两个选择器同时配置同一元素的同一属性时(比如一个设置color:red,另一个color:black),就会产生冲突,而解决冲突的方案就是CSS选择器的权重,权重高的来覆盖权重低的。

三:层叠性指的是上级标签的样式会自动继承到其所有下级标签,如针对<body>设置的标签选择器所设的字体样式会自动应用到<body>下的<p>中,除非<p>重写了相关样式将其覆盖。

CSS(Cascading Style Sheets)

层叠样式表

优势:

CSS可以提高页面的浏览速度。

缩短改版时间,降低维护费用。

强大的字体控制能力和排版能力。

css容易编写。

可以一次设计随处发布。

更好的控制页面布局。

实现表现和结构、内容相分离。

更方便搜索引擎的搜索/page Rank

样式规则:

语法:选择器{属性1:值1;属性2:值2;...属性N:值N;}

选择器就是要改变页面中的哪些标签元素

声明要用{}括起来,;结束

如果属性中包含空格要用“”括起来

可以指定多个选择器使用相同的样式

样式表:

外部样式表,新建.css文件,在文件中写入样式规则<link rel="stylesheet" href = "xxx.css">

内联样式表,在元素中添加style属性

嵌入式样式表,在html使用<style>标签,<style type="text/css"></style>

选择器:

元素选择器,元素名

id选择器,用#id

类选择器,用.class

后代选择器,选择器1 选择器2

css深化:

就近原则,!important提高元素优先级,伪类选择器,伪对象选择器,@import导入其他css文件,响应式布局可以解决多设备的兼容问题。

文本属性:

font-family:字体

font-size:字体大小

font-style:斜体

font-weight:粗体

color:颜色

line-height:行高

letter-spacing:字符间距

text-decoration:文本修饰

text-overflow:文字溢出处理

white-space : no wrap

text-overflow:hidden

text-align:文本对齐

背景属性:

background-color:背景颜色

background-image:背景图片

background-repeat:背景重复

background-attachment:背景图片附着

基于占满一整行与否,标签分为两大类(文档流):

占满:行级元素(div,p,h1~h6)

不占满:行内元素(span,)

定位属性:

position:定位

absolute:绝对定位

relative:相对定位

CSS 概述

>>CSS 指层叠样式表 (Cascading Style Sheets)

>>样式定义如何显示 HTML 元素

>>样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部

>>样式表可以极大提高工作效率

>>外部样式表通常存储在 CSS 文件中

>>多个样式定义可层叠为一

样式解决了一个普遍的问题HTML 标签原本被设计为用于定义文档内容。                          通过使用 <h1>、<p>、<table> 这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。所有的主流浏览器均支持层叠样式表。

样式表极大地提高了工作效率样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。

多重样式将层叠为一个样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

____________________________________________________________________________________________________________华丽丽的分割性,以上摘自自W3CSCHOOL,排版费了好大劲了________________________________________

要问层叠样式表CSS的主要作用是改变什么?

它是样式从结构中分离出来,html能够更加语义,css则有序高效的控制样式