Web前端学习之CSS概要.pptVIP

网页客户端编程基础 之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文件控制整个网站的表现风格与形式。修改维护起来也特别方便。 CSS基础 在单个标签中使用。在网页中所有HTML标签中都可以使用style属性来单独为某一个标签设置CSS样式。如： p style=“color:#f00;”/p 在XHTML1.1中已经不推荐使用style属性，所以尽量不要使用这种方法。 CSS基础 CSS的优先级 样式表不仅只有网页设计人员能够设置，根据不同的浏览器，用户也可以自由应用不同的样式表。另外浏览器也有默认的样式表，一开始就会应用这个默认的样式表。也就是说，对于同一个网页文件，“设计人员”，“用户”和“浏览器”这3者都可能会同时应用样式表，从而导致了样式表的优先级问题。 这三者的优先级顺序如下： 设计人员的样式表 用户的样式表 浏览器默认的样式 CSS基础 设计人员设计的样式表中可能也会出现冲突的现象，比如以下例子： style type=“text/css” !-- p{color:#f00;} .student{color:#00f;} -- /style p class=“student”张三/p 对于文字“张三”，样式表中定义的两个样式表p与.student都对其起作用，那么只能是一个有效。这里谨记是应用“就近原则”选择，那个样式表离“张三”最近，就用哪个，所以“张三”文字显示为蓝色（#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标签 CSS基础 类选择器。就是建立一个类，并为这个类定义一些样式，在需要应用的标签内以class=“类名”的形式套用，例如： .student{color:#00f;} p class=“student”张三p 类名的前边一定要加上一个小数点(.)以表示这是个类选择器而不是重定义标签 类名建议起得有意思，避免起abcd等没有意思的名字 在需要应用类选择器的标签内用上class属性套用 在标签内用class属性套用时不需要加上小数点 一