网页学习基础知识之认识了解CSS样式表

css|网页|样式表

需要具备的基础知识

在继续学习之前,你需要对下面的知识有基本的了解:

  • HTML
  • XHTML

如果你希望首先学习这些项目,请在本站访问相关教程。

CSS 概述
  • CSS指层叠样式表(Cascading Style Sheets),层叠的意思是:多重样式定义被层叠为一。
  • CSS是标准的布局语言,用来控制元素的尺寸、颜色、排版。
  • CSS非常精确,功能强大,易于编写。
  • CSS由W3C发明,用来取代基于表格的布局、框架以及其他非标准的表现方法。
  • 样式(style)定义如何显示HTML元素;样式通常存储于样式表中;外部样式表存储于CSS文件中。
  • 外部样式表(External Style Sheets)可以极大地提升你的工作效率,并且可以极大地节约服务器的带宽。
  • 纯CSS的布局与XHTML的结合,可使表现与结构分离,并使站点更易维护,易用性更好。

CSS演示

通过使用CSS,HTML文档将以不同的输出样式被显示出来。

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

HTML标签原本被设计为用来定义文档内容。通过使用<h1>, <p>, <table>这样的标签,HTML当初被指望用来表达“这是标题”、“这是段落”、“这是表格”之类的信息。而文档的布局被期望由浏览器来完成,而不使用任何的格式化标签。

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

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

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

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

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

由于允许同时控制多重页面的样式和布局,CSS可以称得上WEB设计领域的一个突破。作为网站开发者,你可以为每个HTML元素定义样式,并将之应用于你希望的任意多的页面。为了进行全局变换,只需简单地改变样式,然后网站中的所有元素均会被自动地升级。

多重样式将层叠为一个

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

层叠次序

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

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

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

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

时间: 2024-10-01 23:31:14

网页学习基础知识之认识了解CSS样式表的相关文章

CSS学习教程:认识会用CSS样式表的文本属性

css|教程|样式表 文本(text):css控制的文本属性主要包括以下四个: text-indent, text-align, text-decoration, text-transform; 1. text-align:属性text-align指文本的对齐方式,其有向左,向右,居中对齐以及自动适应四种对齐方式: text-align: left;text-align: right;text-align: center;text-align: justify; 例:css代码: body {f

入门:新手学习CSS样式表基础知识

css|样式表 关于CSS样式表 一.在学习css之前你应该掌握哪些基础知识 1.什么是网页,什么是超文本语言(html). 2.会使用Dreamweaver等常用的网页编辑器. Dreamweaver是现今最好的网站编辑工具之一,而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS,用它来给制作网页的CSS样式表会更简单.更方便.本教程教你如何利用Dreamweaver8在页面中加入CSS,你不用死记硬背的记代码标记,也不用去看很厚的CSS手册,你就可以轻松自如的在网页中运用

基础——关于CSS样式表

css|样式表 关于CSS样式表 一.在学习css之前你应该掌握哪些基础知识 1.什么是网页,什么是超文本语言(html).2.会使用Dreamweaver等常用的网页编辑器. Dreamweaver是现今最好的网站编辑工具之一,而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS,用它来给制作网页的CSS样式表会更简单.更方便.本教程教你如何利用Dreamweaver8在页面中加入CSS,你不用死记硬背的记代码标记,也不用去看很厚的CSS手册,你就可以轻松自如的在网页中运用C

网页制作入门教程:关于css样式表

关于CSS样式表 一.在学习css之前你应该掌握哪些基础知识 1.什么是网页,什么是超文本语言(html). 2.会使用Dreamweaver等常用的网页编辑器. Dreamweaver是现今最好的网站编辑工具之一,而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS,用它来给制作网页的CSS样式表会更简单.更方便.本教程教你如何利用Dreamweaver8在页面中加入CSS,你不用死记硬背的记代码标记,也不用去看很厚的CSS手册,你就可以轻松自如的在网页中运用CSS.不过首先

网页每次加载调用不同CSS样式表

在上一篇文章中曾提到要给自己的微博客制作多个样式,然后用户每次访问时随机载入样式,让微博在视觉上保持新鲜感.虽然思路与实现都比较简单,但还是想记录下来,与大家分享. [明确需求] 网页加载样式表default.css,会展现默认风格.同时为实现多种风格,制作了skin1.css,skin2.css,skin3.css三种定制样式.如果在加载default.css后,再加载其中某一样式表,则会覆盖默认风格,展示新风格: 每次随机加载skin1.css.skin2.css.skin3.css,或者使

网页新手:网页制作中如何管理CSS样式表

css|网页|样式表 学习WEB标准的朋友一般都是从学习CSS开始,为什么呢?因为CSS是一种很有意思的语言,它能让我们的网页千变万化.也许我们一开始的接触只是因为链接的样式修改,然后慢慢发现CSS的强大而又简单,于是我们用它来控制整个网页的布局.排版.色彩.图片等等工作.学习了CSS之后我们又会发现XHTML的结构更为重要,一个好的XHTML结构可以让CSS少费很多事.同时也会避免网页在不同浏览器之间的差异.于是又开始学习XHTML代码,并且不断的去摸索着XHTML的结构的特点.会写CSS了,

如何在网页中插入CSS样式表

  本例为CSS入门系列教程,在这一课中我们将学习如何在网页中插入CSS样式表,主要学习在页面中插入链入外部样式表.内部样式表.导入外表样式表和内嵌样式的四种方法,另外作者还讲解了多重样式表的叠加的运用以及如何在xml中插入CSS,希望能给对网页制作感兴趣的朋友带来帮助~~ CSS入门教程之如何在网页中插入CSS样式表 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内

网页添加CSS样式表的四种方式

核心提示:网页添加CSS样式表的四种方式 一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. <元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二

学习CSS样式表中的类

css|样式表 类 为了对网页格式的定义更为精确,有必要让相同的选择符也能分类,并能按照不同的类别来进行不同的样式设计.基本格式如下: 选择符.类别名 {属性:值} 类别名将可以在HTML的标识符里引用: <标识符 class=类别名>网页内容标识符> 实例: <html> <head> <title>CSS例子</title> <style type="text/css"> <!-- p.Englis