博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS(1) CSS简介
阅读量:5033 次
发布时间:2019-06-12

本文共 1874 字,大约阅读时间需要 6 分钟。

一、CSS定义

  1.CSS定义

  CSS是Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现HTML或 XML 等文件式样的计算机语言。CSS的作用就是为网页设置外观,相当于给HTML文档穿上了华丽的衣服。CSS目前最新版本为CSS3,能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象盒子模型的控制能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。

  2.为什么要使用CSS?

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

二、CSS的优点

  与传统地使用一些简单的样式标签相比,使用CSS定义HTML文档的外观有许多优势。主要有以下几点:

  1.样式表能实现内容与样式的分离,方便团队开发。

  2.方便统一定义和修改文档格式、美化外观、 布局和定位。

  3.解决了传统的HTML标签的外观样式比较单一的问题(传统HTML页面色彩不生动、样式修改不方便等)。

  4.通过以上几点,极大地提高了工作效率。

三、CSS的三种类型

  1. 内联样式表(inline style sheets)

  内联样式表又叫行内样式表。内联样式表直接将样式写入元素的style属性中,内联样式表适用于样式没有可复用性的场合。 由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。 

1 
2 3 4
5

6 This is a paragraph7

  2.内部样式表/内嵌样式表(embedded style sheets)

  内部样式表又叫页面嵌入(内嵌样式表),当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:表示页面中所有input都是采用指定的样式。使用内部样式表可以实现样式复用,减小页面体积。

1     
2

  3.外部样式表(linked style sheets)

   当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,我们可以通过改变一个样式表文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表,用href属性指定引入.css文件的路径。<link> 标签在(文档的)头部:

  浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。

四、CSS样式表的优先级

  当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

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

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

  因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。这就意味着,如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

  建议的样式表使用原则:

  1.推荐把尽可能多的样式写到单独的css文件中,这样可以复用,美工人员和开发人员很好的分工。

  2.只有页面特有的样式才写到<style>中

  3.只有元素特有的样式才写到元素的style属性中。  

 

  参考:

 

转载于:https://www.cnblogs.com/sunyunh/archive/2012/08/22/2651707.html

你可能感兴趣的文章
田园的饭可好吃了 2018年中北大学新生赛
查看>>
asp.net json,对象,字符串的相互转换
查看>>
Oracle优化面试题
查看>>
Spring入门之二-------SpringIoC之实例化Bean以及注入Bean
查看>>
Centos6和7的区别
查看>>
338. Counting Bits
查看>>
MySQL临时表
查看>>
关于使用jqmobi前端框架在phonegap平台上开发时的日期时间选择控件
查看>>
HDU 4638 Group (莫队算法||线段树离散查询)
查看>>
精神到处文章老,学问深时意气平(努力方向)——Leo2014年终总结
查看>>
Android-ListView 下拉刷新
查看>>
批量判断流量大于300的小脚本
查看>>
SDN
查看>>
cf 11B Jumping Jack(贪心,数学证明一下,,)
查看>>
POJ 2418 Hardwood Species(STL在map应用)
查看>>
Python开发之路
查看>>
Codeforces 449.C Jzzhu and Apples
查看>>
取石子游戏HDU1846
查看>>
前端常见英文缩写含义
查看>>
POJ_3967_Ideal Path
查看>>