CSS(Cascading Style Sheet)简述


什么是CSS?

  • css是指层叠样式表
  • css定义了如何显示HTML元素
  • css的诞生是为了解决内容与表现分离的问题,可以极大地提高工作效率

样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。CSS样式表极大的提高了工作效率,通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。

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

当代浏览器都支持 CSS 。

多页面应用同一个样式

通常保存在外部的独立的.css文件(该文件不属于任何页面文件)可以在多个页面中使用同一个CSS样式表。通过在任何的页面文件中引用.css文件,你可以设置具有一致风格的多个页面。

样式层叠

样式层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。

样式层叠次序

当同一个 HTML 元素定义了多个样式时,应该使用哪个样式?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)
  4. 内联样式(在 HTML 元素内部)

因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

为什么要使用CSS 

用css可以让结构(html)和表现(css)分离,方便维护。以前我们写网站都用table来布局,然后样式都直接加在table上面,这样一来页面显得特别的臃肿,然后想修改一下也显得非常困难。后来w3c就出来了css,把结构和样式分离,html只负责结构,样式交给css来实现。这样一来开发者工作量和效率大大提升了,页面也变得更加容易维护,想要修改某个字体或者样式,直接在css文件中就搞定了,不需要动html结构。对于网站访问者来说,体验更好,网站速度变快。

CSS(Cascading Style Sheet)简述的更多相关文章

  1. css Cascading Style Sheet 层叠样式表

    作用 :实现网页布局,美化页面元素 CSS 在文档中的三种方式 1 行内样式/内联样式 特点:在具体的html标签中引入css 代码 语法: 所有的html标签都具有一个style属性,属性值就可以使 ...

  2. CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页。

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  3. CSS(Cascading Style Shee)

    1.CSS是Cascading Style Sheet这个几个英文单词的缩写,翻译成中文是“层叠样式表”的意思 CSS能让网页制作者有效的定制.改善网页的效果. CSS是对HTML的补充,网页设计师曾 ...

  4. 2016/2/19 css样式表 Cascading Style Sheet 叠层样式表 美化HTML网页

    一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联 ...

  5. CSS( Cascading Style Sheets )简书

    (注:带*号的属性是CSS3新增属性)一.基本规则1.css通常存储在样式表(style)中,用于定义如何显示HTML元素:2.css主要由两个部分构成:选择器和一条或多条声明. 选择器通常是需要改变 ...

  6. 00Cascading Style Sheet

    Cascading Style Sheet CSS(Cascading Style Sheet)即层叠样式表,简称样式表.要理解层叠样式表的概念先要理解样式的概念.样式就是对网页中的 元素(字体.段落 ...

  7. CSS层叠样式表(Cascading Style sheets)

    CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...

  8. 深入理解 CSS(Cascading Style Sheets)中的层叠(Cascading)

    标题中的 Cascading 亦可以理解为级联. 进入正文,这是一个很有意思的现象.可以直接跳到 总结一下 部分,看完再回过头来阅读本文. 引子 假设我们有如下结构: <p class=&quo ...

  9. How to include cascading style sheets (CSS) in JSF

    In JSF 2.0, you can use <h:outputStylesheet /> output a css file. For example, <h:outputSty ...

随机推荐

  1. [File transfer]Syncthing

    https://syncthing.net/ 另外两种1.filezila 2.python -m http

  2. MySQL物理备份 lvm-snapshot

    MySQL备份之 lvm-snapshot lvm-snapshot(工具备份) 优点: 几乎是热备(穿件快照前把表上锁,创建完成后立即释放) 支持所有引擎 备份速度快 无需使用昂贵的商业软件(它是操 ...

  3. MySQL数据库、表常用操作

    1.按条件查询表中数据: mysql> select user,host,password from user; 2.按组合条件查询表中数据: mysql> select id, pass ...

  4. Borůvka algorithm

    Borůvka algorithm 我好无聊啊,直接把wiki的算法介绍翻译一下把. wiki关于Borůvka algorithm的链接:链接 Borůvka algorithm是一个在所有边权都是 ...

  5. APICloud学习第二天——操作云数据库

    //连接apicloud云数据库 var model=api.require('model'); model.config({ appId: 'A6008558346855', appKey: '60 ...

  6. 使用原生 python 造轮子搭建博客

    这篇用来 记录一个 从零开始的 博客搭建,希望坚持下去,因为python 开发效率令人发指,所以会原生从零写 ORM ,Web 框架 前提是打好 异步 io 的基础, 使用异步,有一点要谨记,一旦开始 ...

  7. 如何参与flink开源项目

    参与flink开源项目 https://flink.apache.org/how-to-contribute.html 1.回答社区问题 2.撰写bug报告 3.对于改进建议或新的特征 4.帮助别人并 ...

  8. 新装的SSMS一打开就显示VS许可证过期,但VS又运行正常,解决方法。

    1.出现问题如下图: 2.解决方法 打开控制面板->程序卸载->找到Microsoft Visual Studio *** Shell(****),右击-修复. 3.修复好了,然后重启电脑 ...

  9. 两个div不同高度并排显示

    在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...

  10. Map的几种取值方法

    public static void main(String[] args) throws IOException,ParseException { Map<String,String> ...