S1/使用HTML语言和CSS开发商业站点/04-初识CSS

CSS全称为层叠样式表。

CSS基本语法结构

CSS规则由两部分构成,即选择器和声明。声明必须放在大括号{}中,并且声明可以是一条或多条;每条声明由一个属性和值组成,属性和值用冒号分开,每条语句以英文分号结尾。如下所示。

h1{

font-size:12px;

color:#F000;

}

font-size:12px;和color:#F000;表示两条声明,声明中font-size和color表示属性,而12px和#F000则是对应的属性值。

注意:在CSS的最后一条声明中,用以结束的“;”可写可不写,但是基于W3C标准规范考虑,建议最后一条声明的结束;都要写上。

认识<style>标签

在HTML中通过使用<style>标签引入CSS样式。<style>标签用于为HTML文档定义样式信息。<style>标签位于<head>标签中,它规定浏览器中如何呈现HTML文档。在<style>标签中,type属性是必须的,它用来定义style元素的内容,唯一值是text/css。

CSS选择器

在CSS中,有3中最基本的选择器,分别是标签选择器、类选择器和ID选择器。

1、标签选择器。

p{font-size:16px;}

2、类选择器。

.class{font-size:16px;}

3、ID选择器。

ID选择器的使用方法与类选择器基本相同,不同之处在于ID选择器只能在HTML页面中使用一次。

#id{font-size:16px;}

ID选择器与类选择器不同,同一个id属性在同一个页面中只能使用一次。

注意:ID选择器在页面中只能使用一次,也就是说在同一个页面中同一个id属性只能设置一次;而类选择器可以在页面中多次使用。

在HTML中引入CSS样式

1、行内样式。

行内样式就是在HTML标签中直接使用style属性设置CSS样式。Style属性提供了一种改变所有HTML元素样式的通用方法。Style属性的用法如下所示。

<h1 style="color:red;">style属性的应用</h1>

<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

这种使用style属性设置CSS样式仅对当前的HTML标签起作用,并且是写在HTML标签中的,因此这种方式不能是内容与表现分离,本质上没有体现出CSS的优势,因此不推荐使用。

2、内部样式表。

正如前面讲到的所有示例一样,把CSS代码写在<head>的<style>标签中,与HTML内容位于同一个HTML文件中,这就是内部样式表。

这种方式方便在同页面中修改样式,但不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底。实际开发时,会在页面开发结束后,会将这些样式代码保存到单独的CSS文件中,将样式和内容彻底分离开,即下面介绍的外部样式表。

3、外部样式表。

外部样式表是把CSS代码保存为一个单独的样式表文件,文件扩展名为.css,在页面中引用外部样式表即可。HTML文件引用外部样式表有两种方式,分别为链接式和导入式。

1、链接外部样式表

链接外部样式表就是在HTML页面中使用</link>标签链接外部样式表,这个</link>标签必须放到页面的<head>标签内,语法如下所示。

<head>

……

<link href="style.css" rel="stylesheet" type="text/css" />

……

</head>

其中,rel="stylesheet"是指在页面中使用这个外部样式表;type="text/css"是指文件的类型是样式表文本;href="style.css"是文件所在的位置。

外部样式表实现了样式和结构的彻底分离,一个外部样式表文件可以应用于多个页面。

2、导入外部样式表

导入外部样式表就是在HTML网页中使用@import导入外部样式表,导入样式表的语句必须放在<style>标签中,而<style>标签必须放到页面的<head>标签内,语法如下所示。

<head>

……

<style  type="text/css">

<!--

@import url("style.css");

-->

</style>

</head>

其中@表示导入文件,前面必须有一个@符号,url("style.css")表示样式表文件位置。

3、链接式与导入式的区别

/1/<link/>标签属于XHTNL防臭,而@import是CSS2.1中特有的。

/2/使用<link/>链接的CSS是客户端浏览网页时先将外部CSS文件加载到网页当中,再进行编译显示,所以这种情况下显示出来的网页与用户预期的效果一样,即使网速再慢也是一样的效果。

/3/使用@import导入的CSS文件,客户端在浏览网页时先将HTML结构呈现出来,再把外部CSS文件加载到网页当中,当然最终的效果也与使用<link/>链接文件效果一样,只是当网速较慢时会先显示没有CSS统一布局的HTML网页,这样就会给用户很不好的感觉。这也是目前大多数网站采用链接外部样式表的主要原因。

/4/由于@import是CSS2.1中途而有的,因此对于不兼容CSS2.1的浏览器来说就是无效的。

综合以上几个方面的因素,大家可以发现,现在大多数网站还是比较喜欢使用链接外部样式表的方式引用外部CSS文件的。

样式的优先级

行内样式>内部样式表>外部样式表

ID选择器>类选择器>标签选择器

行内样式>内部样式表>外部样式表,即“就近原则”。如果同一个选择器中样式声明层叠,那么后写的会覆盖先写的样式,即后写的样式优先于先写的样式。

CSS的高级应用

1、后代选择器

后代选择器的写法就是把外层的标签写在前面,内层的标签写在后面,之间用空格分隔。当标签发生嵌套时,内层的标签就成为外层标签的后代。

常用情况如下:

/1/按标签的嵌套关系,如本例中<h3>标签嵌套<strong>,直接按标签的嵌套关系编写样式。

/2/按选择器的嵌套关系,当最外层的类选择器名称为head,他最里面嵌套类选择器、ID选择器,这是直接按样式的嵌套关系编写,如head .menu或head #menu。

/3/3种互相嵌套关系,当最外层ID选择器名称为nav,它里面嵌套类选择器和标签选择器,如#nav .title或#nav li。

2、交集选择器

交集选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。其中第一个必须是标签选择器,第二个必须是类选择器或者ID选择器。这两个选择器之间不能有空格,必须连续书写。

这种方式构成的选择器,将选中同时满足前后两者定义的元素,也就是前者所定义的标签类型,并且制定了后者的类型或者id的元素,因此被称为交集选择器。

3、并集选择器

与交集选择器相对应,还有一种选择器,它的结果是同时选中各个基本选择器所选择的范围。任何形式的选择器(包括标签选择器、类选择器、ID选择器等)都可以作为并集选择器的一部分。

并集选择器是多个选择器通过逗号连接而成的,在声明各种CSS选择器时,如果某些选择器的风格是完全相同的,或者部分相同,这时便可以利用并集选择器同时声明风格相同的CSS选择器。

CSS继承特性

在CSS语言中继承的概念并不复杂,简单地说就是将各个HTML标签看做一个个容器,其中被包含的小容器会继承包含它的大容器的风格样式,也称包含与被包含的标签为父子关系,即子标签会继承父标签的风格样式,这就是CSS中的继承。

继承的应用

CSS继承指的是子标签的所有风格样式,可以在父标签样式风格的基础上再加以修改,产生新的样式,而子标签的样式风格完全不会影响父标签。

时间: 2024-10-05 13:38:42

S1/使用HTML语言和CSS开发商业站点/04-初识CSS的相关文章

使用HTML语言和CSS开发商业站点(9)

#div_1 dl{ margin:0px;/*dl默认有外边距 跟ul一样*/ padding:0px; height:46px; margin-top:15px;} #div_1 dl dd{ margin:0px;/*dd默认有外边距*/ float:left; margin-left:10px; height:100%; line-height:46px; } 好的,使用HTML语言和CSS开发商业站点 就到这里结束    接下来是    使用Java实现面向对象编程 多多关注.评论,谢

使用HTML 和CSS 开发商业站点

第一章HTML 基础1.html 的基本结构?解析:2.HTML 全称Hyper Text Markup Language(超文本标记语言)扩展XML:Extendsible Markup Language(可扩展性标记语言)3.高级记事本Ue(UltraEdit)nodepad++Editplus快捷键用熟一个即可.4.编写html 文档的注意点01.所有标签字母均小写.02.有开始就要有闭合标签03.每个层次的标签有一定程度的缩进.解析:如果发现body 内书写了内容,用浏览器打开后发现没有

S1/使用HTML语言和CSS开发商业站点/05-CSS美化网页

<span>标签 在HTML中,<span>标签是被用来组合HTML文档中的行内元素的,它没有固定的格式表示,只有对它应用CSS样式时,他才会产生视觉上的变化. <span>标签可以为<p>标签中的部分文字添加样式,而且不会改变文字的显示方向.他不会像<p>标签和标题标签那样,每对标签独占一个矩形区域. 字体样式 常用字体属性 属性名 含义 举例 Font-family 设置字体类型 Font-family:"隶书"; Fon

S1/使用HTML语言和CSS开发商业站点/06-盒子模型

盒子模型属性有边框.内边距和外边距. 1.边框(border):对应包装盒的纸壳,他一般具有一定的厚度. 2.内边距(padding):位于边框内部,是内容与边框的距离,即对应包装盒的填充部分,所以也被称为填充. 3.外边距(margin):位于边框外部,边框外面周围的间隙,所以也被称为边界. 盒子模型除了边框.内边距.外边距之外,还应包括元素内容本身,所以完整的盒子模型平面结构图所示. 因为盒子是矩形结构,所以边框.内边距.外边距这些属性部分都分别对应上(top)下(bottom)左(left

S1/使用HTML语言和CSS开发商业站点/01-HTML基础

HTML会是一种超文本标记语言(Hyper Text Mark Language),也就是说,HTML不是一种编程语言,仅是一种标记语言(Markup Language). 网页基本信息: 1.DOCTYPE声明 HTML代码中最上面有两行关于“DOCTYPE”文档类型的声明,他约束HTML文档结构,检验是否符合相关Web标准,同时高速浏览器,使用哪种规范来解释这个文档中的代码.DOCTYPE声明必须位于HTML文档的第一行,XHTML3.0规定了3种级别的声明. (1)Strict(严格类型)

S1/使用HTML语言和CSS开发商业站点/07-浮动

浮动 在标准文档流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界,在竖直方向和其他的块级元素依次排列. 要实现浮动需要在CSS中设置float属性,默认值为none,也就是标准文档流块级元素通常显示的情况.如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧浮动,同时默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容和宽度来确定,这样就能够实现网页布局中的“1-2-1”或“1-3-1”布局类型. 浮动在网页中的应用 在CSS中,使用浮动(float

S1/使用HTML语言和CSS开发商业站点/08-定位网页元素

在CSS中有3种基本的定位机制,分别是标准流.浮动和绝对定位.通常在网页中除非专门指定某种元素的定位,否则所有元素都在标准流中定位,也就是说标准流中元素的位置由在XHML中的位置决定. 在前面的章节已经学习了标准流和浮动,使用浮动的方式可以定位网页元素.但是仅使用浮动一种方式,完成不了网页中很多更为复杂的网页效果. Position属性 Position属性yufloat属性一样,都是CSS排版中非常重要的概念.Position从字面意思上看就是指定盒子的位置,指它相对父级的位置和相对它自身应该

S1/使用HTML语言和CSS开发商业站点/02-列表、表格和框架

列表的分类: 1.无序列表 使用<ul>标签作为无序列表的声明,使用<li>标签作为每个列表项的起始.<ul>标签有一个type属性,这个属性的作用就是制定在显示列表时所采用的项目符号类型. type属性的取值 取值 说明 disc 项目符号显示为实体圆心,默认值 square 项目符号显示为实体方心 circle 项目符号显示为空心圆 2.有序列表 无序列表与有序列表的区别就在于,有序列表的各个列表项有先后顺序,所以会使用数字进行标识.有序列表使用<ol>

S1/使用HTML语言和CSS开发商业站点/03-表单

表单的内容 创建表单后,就可以在表单中放置控件以接受用户的输入.这些控件通常放在<form>……</form>标签对之间一起使用,也可以在表单之外用来创建用户界面. 表单标签及表单属性 在HTML中,使用<form>标签来实现表单的创建,该标签用于在网页中创建表单区域,属于一个容器标签,其他表单标签需要在它的范围中才有效,<input>便是其中一个,用以设定各种输入资料的方法.表单标签有两个常用的属性,如下表所示. <form>标签的属性 属性