w3school之CSS001

最新推荐文章于 2023-07-10 13:19:10 发布

原创最新推荐文章于 2023-07-10 13:19:10 发布 · 439 阅读

CC 4.0 BY-SA版权

5 篇文章

订阅专栏

本文介绍了CSS的基本用法，包括使用id和类选择器控制样式，属性选择器的多种形式，以及背景图像的设置方法等。此外还讨论了如何处理CSS中的空白符问题。

1.使用 CSS 同时控制多重网页的样式和布局。

2.id 属性只能在每个 HTML 文档中出现一次.

3.id 选择器以 "#" 来定义

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

4.类选择器以一个点号显示(类名的第一个字符不能使用数字)

.center {text-align: center}

5.属性选择器

[title]
{
color:red;
}

属性和值选择器

[title=W3School]
{
border:5px solid blue;
}

值中由含空格分隔

[title~=hello] { color:red; }

值中包含连字符分隔

[lang|=en] { color:red; }

总结：

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

6.不要在属性值与单位之间留有空格。使用 “margin-left: 20px” 而不是 “margin-left: 20 px”

7.背景图像（如果需要设置一个背景图像，必须为这个属性设置一个 URL 值）

body {background-image: url(/i/eg_bg_04.gif);}