CSS样式表初解

最新推荐文章于 2022-08-14 13:53:18 发布

GISirFive

最新推荐文章于 2022-08-14 13:53:18 发布

阅读量1.2k

点赞数

分类专栏： Java Web 文章标签： CSS

本文链接：https://blog.csdn.net/zhai56565/article/details/8926625

版权

Java Web 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

CSS样式表初解

CSS全称Cascading StyleSheet，是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式，增加了一些新概念如类、层等，可以对文字重叠、定位等。

1、CSS规则

CSS样式表包括3部分内容：选择符、属性和属性值：

l 选择符：又称选择器，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。

l 属性：包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。

l 属性值：为某属性的有效值。属性与属性值间使用“：“分隔。多个属性间使用”；“分隔。

2、CSS选择器

常用的选择器有标记选择器、类别选择器、id选择器。使用选择器即可对不同的HTML标签进行控制，从而实现各种效果。

1)、标记选择器

THML页面是由很多标记组成的，例如表格标记<table>、表单标记<form>、图像标记<img>等。而CSS标记选择器就是使命页面中哪些标记采用哪些CSS样式。下面的例子用于声明页面中所有<a>标记的样式：

<style>

a {

font-size: 9px;

color: #F93;

}

</style>

2)、类别选择器

标记选择器有一定的局限性，如果声明标记选择器，那么页面中所有该标记内容会有相应的变化。如果想让使用相同标记的不同内容显示不同的效果，使用标记选择器就无法实现了，这时就需要引入类别选择器。

类别选择器的名称由用户自定义，并以“.“开头，定义的属性与属性值也要遵循CSS规范。要应用类别选择器的HTML标记，只需使用class属性来声明即可。看下面的例子：

<head>

<style>

.one{ //定义类名为one的类别选择器

font-family: 宋体;

font-size: 9px;

color: red;

}

.two{

font-family: 宋体;

font-size: 6px;

color: black;

}

</style>

</head>

<body>

<h2 class="one">应用了类别选择器one</h2>

<h2 class="two">应用了类别选择器two</h2>

</body>

</html>

注意：在HTML标记中，不仅可以应用一种类别选择器，也可以同时使用多种类别选择器，在多种类别选择器之间用空格进行分割即可，例如<h2 class=”size color”>。

3、id选择器

id选择器是通过HTML页面中的id属性来选择增添样式，与类别选择器基本相同。但是由于HTML页面中不能包含两个相同的id标记，因此定义的id选择器也就只能被使用一次。看下面的例子：

<style>

#one{

font-size: 30px;

}

#two{

font-size: 40px;

}

</style>

</head>

<body>

<h2 id="one">应用了类别选择器one</h2>

<h2 id="two">应用了类别选择器two</h2>

3、在页面中包含CSS

在页面中包含CSS样式有如下几种方式：行内样式、内嵌式、连接式、导入式。

1)、行内样式

行内样式直接定义在HTML标记之内，通过style属性来实现，所以其灵活性不强，例如：

<h2 style="color: red; font-size: 30px;" >应用了类别选择器one</h2>

<h2 style="color: green; font-size: 40px;" >应用了类别选择器two</h2>

2)、内嵌式

内嵌式样式表就是在页面中使用<style></style>标记CSS样式包含在页面中。本文所有上述例子都是使用这种内嵌样式表的模式。它没有行内标记显得直接，但能使页面更加规整，使内嵌样式表更加便于维护。其缺点在于网站不可能由一个页面构成，而每个页面中相同的HTML标记又都要求相同的样式，此时使用内嵌样式表显得比较笨重。

3)、连接式

连接外部CSS样式表是最常用的一种引用样式表的方式，将CSS样式定义在一个单独的文件中，然后在HTML页面中通过<link>标记引用，是一种最为有效的使用CSS样式表的方式。<link>标记的语法结构如下：

>rel：定义外部文档和调用文档间的关系，这里必须为stylesheet；

>href：CSS文档的绝对或相对路径；

>type：外部文件的MIME类型，可以省略。

下面是一个使用连接式样式表的例子：

testCss.css：

@CHARSET "UTF-8";

.one{

font-family: 宋体;

font-size: 20px;

color: red;

}

h3,h4,h5 {

font-family: 宋体;

font-size: 40px;

color: green;

}

testHtml.html：

<linkhref="testCss.css" rel="stylesheet" type=”text/css” />

</head>

<body>

<h2 class="one">应用了类别选择器one</h2>

<h3>应用了标记选择器h3</h3>

使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

4)、导入式

将一个独立的.css文件引入HTML文件或另一个CSS文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

<styletype="text/css">

@import"mystyle.css"; //此处要注意.css文件的路径

</style>

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。

总结：一般来说，做网站时把样式多写在多个样式表文件中，因此我们先用链接式引入一个总的CSS文件，然后在这个CSS文件中在使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式。

4、CSS3的新特性

CSS3是CSS技术的一个升级版本，目前很多细节还在讨论中，但还是不断地向前发展着。

1)、模块与模块化结构

CSS3中并没有采用总体结构，而是采用了分工协作的模块化结构。这样是为了避免产生浏览器对于某个模块支持不完全的情况，还可以让不同设备上的浏览器都可以选用不同模块进行支持，方便了程序的开发。常用模块如下：

模块名称	功能描述
basic box model	定义个中与盒子相关的样式
Line	————直线————
Lists	————列表————
Text	————文字————
Color	————颜色————
Font	————字体————
Background and border	————背景和边框相关的样式
Paged Media	————页眉、页脚、页数等页面元素数据的样式
Writing Modes	——页面中文本数据的布局方式