文档介绍：网页客户端编程基础
之CSS学习
样式表(CSS)概述
HTML只不过是构成一个文本文件的一系列标签,而具体指定其构成标签是如何显示的,就需要用到样式表了。导入样式表之后,在HTML中许多无法实现的功能均可实现,而且,HTML会变得简洁,容量也会减少。从而会大幅度的使网页的更新或修改等操作变得非常容易。另外,从HTML中去除了有关显示方面的限制,因此,网页就能够在更多的环境中使用,增加了网页的通用性。
CSS基础
CSS的基本语法
选择器{属性:值}
选择器用来表示样式表的应用部分。在其后的大括号中要写上想要应用的样式。
如果指定设置的属性值有很多的话,各属性值之间要用分号隔开。如:
选择器{属性1:值1;属性2:值2;…}
CSS的选择器在类选择器等情况下区分大小写,在重定义标签选择器下不区分大小写,属性值则一律不区分大小写。所以这里建议,不管什么选择器,所有都小写,以避免混扰。
CSS基础
CSS样式表代码根据其摆放的位置可以分为三种
单个网页共同使用:在网页的<head>~</head>之内使用
<style type=“text/css”>
<!--
~
-->
</style>
这里的<!-- -->符号用来让那些不支持CSS样式表的浏览器当作HTML的注释。
这种摆放的CSS只能在本页使用。
CSS基础
多个网页共同使用。如果编写的CSS代码在多个网页中应用,则需要建立一个单独的CSS文件,在需要应用的网页中加入
<link rel=“stylesheet” href=“URL” type=“text/css”/>
标签调用。
URL表示CSS文件的存放路径(建议使用相对路径)
CSS文件的后续名(扩展名)
在建设网站时建议使用这种方式,这样可以用同一个或几个CSS文件控制整个网站的表现风格与形式。修改维护起来也特别方便。
CSS基础
在单个标签中使用。在网页中所有HTML标签中都可以使用style属性来单独为某一个标签设置CSS样式。如:
<p style=“color:#f00;”></p>
,所以尽量不要使用这种方法。
CSS基础
CSS的优先级
样式表不仅只有网页设计人员能够设置,根据不同的浏览器,用户也可以自由应用不同的样式表。另外浏览器也有默认的样式表,一开始就会应用这个默认的样式表。也就是说,对于同一个网页文件,“设计人员”,“用户”和“浏览器”这3者都可能会同时应用样式表,从而导致了样式表的优先级问题。
这三者的优先级顺序如下:
设计人员的样式表
用户的样式表
浏览器默认的样式
CSS基础
设计人员设计的样式表中可能也会出现冲突的现象,比如以下例子:
<style type=“text/css”>
<!--
p{color:#f00;}
.student{color:#00f;}
-->
</style>
<p class=“student”>张三</p>
对于文字“张三”,,那么只能是一个有效。这里谨记是应用“就近原则”选择,那个样式表离“张三”最近,就用哪个,所以“张三”文字显示为蓝色(#00F)。
CSS基础
可以使用!important关键字改变其优先级。!important关键字写在要优先的属性值后面。例如上面例子将p的样式改写如下:
p{color:#f00 !important;}
则文字“张三”显示为红色(#f00)。
CSS基础
CSS按照选择器的格式大致可以分为以下四种:
重定义HTML标签:选择器写的就是HTML的标签,意思是对其起作用范围内的该标签重新定义一个样式,例如
p{color:#f00;}
作用就是最其起作用范围内的所有<p>标签中的文字重新定义为红色。
重定义HTML标签的选择器写的标签名不区分大小,建议用小写
重定义HTML标签的选择器写的一定要是HTML的合法标签名
重定义HTML标签的样式一旦建立,会对其作用范围内的标签自动应用
如果对于多个HTML标签使用同一种样式的,可以使用以下格式简写:
p,h1,a{color:#00f;font-size:12px;}
表示对p、h1、a三个标签内的文字重新设置为蓝色,12px大小
*表示所有HTML标签