3. CSS Basic

最新推荐文章于 2024-12-06 10:54:51 发布

厚礼

最新推荐文章于 2024-12-06 10:54:51 发布

阅读量750

点赞数

分类专栏： Web2.0程序设计

本文链接：https://blog.youkuaiyun.com/c139352227/article/details/12320493

版权

Web2.0程序设计专栏收录该内容

3 篇文章

订阅专栏

1. 认识CSS

CSS，CascadingStyle Sheets，层叠式样表。它用于描述一个HTML元素在浏览器中的呈现方式。使用CSS主要目的是为了解决表现元素样式问题、节约工作量，提高代码的重用率。

2. CSS基础

2.1 语法

CSS的语法由两部分组成：选择器和一组属性声明，这类似一个java的class的定义（并且进行了“初始化”）。

selector { property1: value1; property2:value2}

CSS的注释语法与C语言一致采用“/* 这是一个注释 */”的语法，而不支持C++的“//”语法。

CSS的语法只在样式表内部生效，相对的HTML的语法对CSS是不生效的（包括注释）。这也是避免将CSS采用内联方式使用的一个原因。

2.2 选择器

选择器的意义是选择所有具有这样的或具有这样的属性的元素，并赋予其声明中的样式。

一个选择器可以是既有的HTML元素（的标签名），可以是自己定义的class或者id来对html既有元素进行非全局的修饰。

如

p { color:red }

会导致所有的段落（你没有其他的修饰的话）都会变为红色。而使用你自己的id或class只会将你需要的段落变为红色。

一个id用于修饰单个唯一的元素。声明时使用“#xx {}“。而使用时使用元素的属性“id=”xx””。id、class等属性是所有html元素的全局属性。

而一个class适用于修饰多个元素，声明是使用”.xx”，使用时”class=”xx”。

一个由#、.开头的id、class是公用的，也就是任意一个类别的元素都可以使用它。我们也可以指定id或class只能被某些元素使用。声明方法是”elementName#id”或者”elementName.class”。

selectors的声明与使用有着一定的规范，就如同任何一个语言中变量名、类名一样。下表是CSS1中的规范：

Selectors	Example	Description
.class	.menu	选择所有class=”menu”的元素。
#id	#name	选择所有id=”name”的元素。
*	*	选择所有的元素（即使没有class或id的属性）
element	p	选择所有的段落元素
element1, element2	h1, p	选择所有的h1和p元素
elementp elementc	div, p	选择所有的在div内的p元素
:link	a:link	选择所有未访问的超链接
:visited	a:visited	选择所有访问过的超链接
:hover	a:hover	选择或有鼠标移动到上面的超链接
:active	a:active	选择所有鼠标正在点击的超链接
:first-letter	p:first-letter	选择所有段落的第一个字
:first-line	p:first-line	选择所有段落的第一行

注：一个选择器不能以数字开头。

选择器可以复合使用，如a.home:link选择的是所有未访问的类为home的超链接。这些将在后续学习。

关于id和class的区别：

a. 一个id从理论上只允许选择一个元素，尽管现在浏览器仍支持修饰多个元素，但这是一种较差的习惯，并且会导致js选择id时出现错误。因此我们只用id修饰单个元素。

b. 一个元素至多有一个id，但是可以有多个class来修饰。这就好比一个人只允许有一个皮肤，但是可以穿多件衣服（也许这么比喻并非十分妥帖）。

2.3 使用方法

CSS可以被三种方式使用：外部、内部、内联。

外部的引入CSS可以将CSS与html文档分开，不仅压缩了文档尺寸，更使得文档利于维护。使用一个外部的CSS文档可以在头文件中添加下列代码

<link rel=”stylesheet” type=”text/CSS” href=”./my.css”/>

意思是这是一个外部链接，这个链接是文档的样式表，它的类型是text/CSS，位置在./my.CSS。

内部的定义CSS同样在<head>部位完成。

<style>
/* 从style开始都属于样式表的部分，这里面定义样式表的内容 */
</style>

外部的使用和内部的使用CSS就好比C++中在头文件和源文件中书写类定义一样，显然将它们分开更具有可维护性和可读性，当然一些小的CSS定义在文档中也是可以的。

内联的方式并不被推荐，因为这破坏了内容与表现分离的原则，并且不利于维护。

<p style=”background-color: red“>It is not agood style.</p>

关于CSS的继承与重载：

CSS的确和类有许多相似之处，它可以通过重叠覆盖的方式进行继承和重载。比如：

<head>
<link rel=”stylesheet” type=”text/CSS” href=”./my.CSS”/>
<style>
p
{
color: red;
text-align: center;
}
p
{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<p style=”color:blue”>这个是一个蓝色的段落，字号为20像素，对齐方式为居中</p>
</body>

继承和重载的顺序是从上到下的，如果没有此属性则会被添加，如果有则被覆盖。在这个例子中，外部的CSS中如果有p相关的描述也会被style继承或者覆盖。如果link写在style之下，则是style中的描述被外部CSS继承或者覆盖。而他们都会被body中p的样式继承或覆盖。