css工作原理

2023-04-08 12:46:02html-css024

css工作原理,第1张

Normalize.css

是一种CSS reset的替代方案。它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。

知乎总结的html tags

html一共有114个标签，但html5有添加了一些标签，如nav、header、article、section、aside、footer等。

闭合标签的基本格式如下：

<标签名>文本内容</标签名>

可以给这个标签添加一些属性，比如：

<标签名属性_1="属性值" 属性_2="属性值">文本内容</标签名>

标题、段落等文本元素都要求闭合标签，也就是要有一个开标签和一个闭标签，比如：

<标签名属性_1="属性值" 属性_n="属性值" />

非文本内容是通过自闭合标签显示的。闭合标签与自闭合标签的区别在于，闭合标签包含的是会显示的实际内容，而自闭合标签只是给浏览器提供一个对要显示内容的引用。

<标签名属性_1="属性值" 属性_n="属性值" />

** 块级元素盒子会扩展到与父元素同宽**

块级标签

行内元素盒子会“收缩包裹”其内容，并且会尽可能包紧。

行内标签：

CSS规则分两部分，即选择符和声明。声明又由两部分组成，即属性和值。声明包含在一对花括号内。

图中文字：selector：选择符；declaration：声明；property：属性；value：值；opening curly bracket：左花括号；closing curly bracket：右花括号。

对这个基本的结构，有三种方法可以进行扩展。

第一种方法：多个声明包含在一条规则里。

p {color:redfont-size:12pxfont-weight:bold}

这样，一条规则就可以把段落文本设置成红色，12像素大，粗体。

第二种方法：多个选择符组合在一起。如果想让h1、h2和h3的文本都变成蓝色，粗体，可以这样分别写：

但其实，把三个选择符组合在一起也可以，这样就能减少重复输入：

千万注意每个选择符之间要用逗号分隔（最后一个后面不用加）。

第三种方法：多条规则应用给一个选择符。假设，你在写完前面那条规则后，又想只把h3变成斜体，那可以再为h3写一条规则：

用于选择特定元素的选择符又分三种。

上下文选择符的格式如下：

标签1 标签2 {声明}

上下文选择符，严格来讲（也就是CSS规范里），叫后代组合式选择符（descendant combinator selector），就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。

article p {font-weight:bold}

这个例子中的上下文选择符表明，只有是article后代的p元素才会应用后面的样式。换句话说，上面这条规则的目标是位于article上下文中的p元素。

css class style 显示效果

多类选择符

<p class="specialtext featured">Here the span tag <span>may or may not</span>be styled.</p>

.specialtext .featured {font-size:120%}

多个类名，如这里的specialtext和featured，放在同一对引号里，用空格分隔。实际上，更准确的说法，就应该是HTML的class属性可以有多个空格分隔的值。要选择同时存在这两个类名的元素，可以这样写：

ID与类的写法相似，而且表示ID选择符的#（井号）的用法，也跟表示类选择符的.（句号）类似。

如果有一个段落像下面这样设定了ID属性

那么，相应的ID选择符就是这样的：

#specialtext {CSS样式声明}

ID的用途是在页面标记中唯一地标识一个特定的元素。它能够为我们编写CSS规则提供必要的上下文，排除无关的标记，而只选择该上下文中的标签。

相对来说，类是可以应用给任意多个页面中的任意多个HTML元素的公共标识符，以便我们为这些元素应用相同的CSS样式。而且，使用类也让为不同标签名的元素应用相同的样式成为可能。

规则一：包含ID的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择符。

规则二：如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。

规则三：设定的样式胜过继承的样式，此时不用考虑特指度（即显式设定优先）。

1、块级标签转换为行内标签：display:inline

2、行内标签转换为块级标签：display:block

3、转换为行内块标签：display：inline-block

通过对上面css的分析，我们可以初步理解class样式的设置以及对display属性的理解。

css前端技术开发是近年来一个新兴职业，是伴随着web兴起而细分进去的行业，随着互联网+的发展，css毫无疑问是非常火热的，有着很好的发展前景，在北京、上海、广州、深圳等地工程师的薪资待遇更是一路飙升，对于求职者来说是很好就业的。感兴趣的话点击此处，免费学习一下

css前端技术开发岗位职责是利用web技能结合产品的界面开发，从招聘网站分析，【前端开发】用人数量已经远远超过主流编程语言Java、ASP和ios等的开拓人员的数量。随着谷歌、YouTube、Twitch等大型企业纷纷将视线转投向css，更加确认了css在互联网时代的发展远景。以北京、上海一线城市为例，前端开发工程师这一职位的月平均收入为1.5万，随着工作经验的增长，年薪也在随之增长，从薪资水平来看，css前景确实很不错。

想了解更多有关css的相关信息，推荐咨询【达内教育】。作为国内IT培训的领导品牌，达内的每一名员工都以“帮助每一个学员成就梦想”为己任，也正因为达内人的执着与努力，达内已成功为社会输送了众多合格人才，为广大学子提供更多IT行业高薪机会，同时也为中国IT行业的发展做出了巨大的贡献。达内IT培训机构,试听名额限时抢购。

CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。

通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。

样式存储在样式表中，通常放在<head>部分或存储在外部CSS文件中。

作为网页标准化设计的趋势，CSS取得了浏览器厂商的广泛支持，正越来越多的被应用到网页设计中去。

CSS有各种版本（即Level），所以知道要使用哪个版本是很重要的。

CSS 1 在1996年末成为推荐标准，其中包含非常基本的属性，比如字体，颜色、空白边。

CSS2 在此基础上添加了高级概念（比如浮动和定位）以及高级的选择器（比如子选择器、相邻同胞选择器和通用选择器）。

在编写本书时，CSS2仍然是CSS的最新版本，尽管它早在1998年就已经成为推荐标准。

万维网联盟（W3C）的行动非常缓慢，所以尽管CSS3的开发工作在新千年开始之前就开始了，但是距离最终的发布还有相当长的路要走，为提高开发和浏览器实现的速度，CSS3被分割成模块，这些模块可以独立发布和实现。

CSS3包含一些令人兴奋的新特性，包括一个用于多列布局的模块，但是，选择器模块最接近于完成，可能在2006年成为推荐标准。

因为预期从CSS2到CSS3的发布之间时间会很长，2002年人们启动了CSS2.1的开发。

这是CSS2的修订版，它计划纠正一些错误，并且更精确地描述CSS的浏览器实现。

CSS2.1正在逐渐接近完成，但是可能在2006年年底之前无法实现，然而，它更准确地反映了CSS当前的状态。

层叠样式表解决了一个普遍的问题

HTML 标签原本被设计为用于定义文档内容。

通过使用 <h1>、<p>、<table>这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。

同时文档布局由浏览器来完成，而不使用任何的格式化标签。

由于两种主要的浏览器（Netscape 和 Inter Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。

所有的主流浏览器均支持层叠样式表。

层叠式表的特点

1、便于页面的修改。

2、便于页面风格的统一。

3、减少网页的体积。

层叠样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。

样式通常保存在外部的 .css 文件中。

通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。

作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。

如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

[1]

编辑本段CSS历史

1994年哈坤·利提出了CSS的最初建议；伯特·波斯（Bert Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。

当时已经有过一些关于样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。

在CSS中，一个文件的样式可以从其他的样式表中继承下来。

读者在有些地方可以使用他自己更喜欢的样式，在其他地方去继承，或“层叠”作者的样式, 这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年他与波斯一起再次提出这个建议。

当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。

哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。

1996年底，CSS已经完成。

1996年12月CSS要求的第一版本被出版。

1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。

这个工作组开始讨论第一版中没有涉及到的问题，于是1998年5月出版了CSS的第二版。

到2007年为止，第三版还未完备。

编辑本段使用CSS布局的优点

采用CSS布局相对于传统的TABLE网页布局而具有以下3个显著优势：

1：表现和内容相分离

将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。

这样的页面对搜索引擎更加友好。

2：提高页面浏览速度

对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。

浏览器就不用去编译大量冗长的标签。

3：易于维护和改版

你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

4: 使用CSS布局更符合现在的W3C标准.

ps：W3C组织并不是ISO 国际标准组织成员

编辑本段感性体验CSS

什么是CSS呢？你可能急迫的想知道答案。

但是空泛的文字描述意义不大，让我们先来一点感性体验吧。

是一个普普通通的网页。

然而通过给这个文件添加的CSS规则，我们可以得到十分美观的网页。

这还不是全部，不改动HTML，只是通过添加不同的CSS规则，我们就可以得到各种不同样式的网页：

什么是CSS

* CSS是Cascading Style Sheets(层叠样式表)的简称. * CSS语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言).

CSS的作用

* 在标准网页设计中CSS负责网页内容(XHTML)的表现. * CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀. * 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课. * CSS是由W3C的CSS工作组产生和维护的。

为什么叫层叠？在页面显示的过程中，有很多的样式作用在页面元素上，这些样式来自不同的地方。

浏览器自己有默认的样式，网页作者有自己写的样式，用户也可能有自己的样式，但是最终显示的样式是其中之一，它们之间产生了冲突，CSS通过一个称为层叠（cascade）的过程处理这种冲突。

层叠给每个规则分配一个重要度：作者的样式表被认为是最重要的，其次是用户的样式表，最后是浏览器或用户代理使用的默认样式表。

为了让用户有更多的控制能力，可以通过将任何规则指定为!important来提高它的重要度，让它优先于任何规则，甚至优先于作者加上!important标志的规则。

因此，层叠采用以下重要度次序：标为!important的用户样式>标为!important的作者样式>作者样式>用户样式>浏览器/用户代理应用的样式。

然后，根据选择器的特殊性决定规则的次序。

具有更特殊选择器的规则优先于具有比较一般的选择器的规则。

如果两个规则的特殊性相同，那么后定义的规则优先。

由此可见，层叠是指不同的优先级的构成的层的叠加。

编辑本段如何将样式表加入到网页

可以用以下四种方式将样式表加入您的网页。

而最接近目标的样式定义优先权越高。

高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

例外请参阅 !important 声明。

定义内部样式块对象

你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。

定义方式请参阅样式表语法。

示例如下： <><head><title>文档标题</title><style type=text/css></style></head><body>正文内容 </body></>请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。

内联定义 (Inline Styles)

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：如何在html中怎么让图片浮动?

# 下一篇：怎么看自己的处理器