CSS自学笔记(一)总结补充

1,<link rel="stylesheet" type="text/css" href="css/div.css">

rel表示:告诉浏览器你将采用一个样式表文件

type表示这个样式表文件是CSS

href表示具体的哪个CSS表

2,来说说各个选择器的特点

先看一张图

1.1,派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

看如下的一段代码:

li strong {
    font-style: italic;
    font-weight: normal;
  }

它的含义是:只有在<li>标签里面的<strong>所描述的内容才会使用此样式.

再来看看这个:

strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }

它说明的是,单独的<strong>内容颜色是红色,单独的<h2>内容颜色也是红色,但是如果是<h2>内部的<strong>则显示为蓝色.

1.2id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。它以#来定义的.

下面我们来定义两个id:

#red {color:red;}
#green {color:green;}

它们表示,id为red的地方,颜色是红色,id为green的地方,颜色是绿色.

然后会有一段html来调用它们:

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

在第一行中,调用了red,在第二行中,调用了green.

注意：id 属性只能在每个 HTML 文档中出现一次。

1.3类选择器

类选择器以一个点号显示

通常用类选择器来代替id选择器,因为class属性能出现多次.

我们来定义一个类:

.center {text-align: center}

上述类表示,所有调用center类的html元素都居中.

下面是调用代码:

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

在上面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

注意：类名的第一个字符不能使用数字！

1.4属性选择器

对带有指定属性的 HTML 元素设置样式。

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

这儿的属性,指html中的标签属性,如title,title="xxx",input等等.

例如,要为html中所有带有title属性的地方改变样式:

[title]
{
color:red;
}

为所有title="W3School"的的所有元素改变样式:

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

为input中不同类型的type赋予不同的样式:

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

3,不同选择器之间的组合搭配

3.1派生选择器和id选择器之间的互相搭配

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

上述样式的含义是:在id为sidebar中,如果有p,则p所描述的内容的样式改变.

如果我们这样写:

p#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

那含义就反过来了,即只有在p中调用sidebar的地方内容样式才改变,在其他地方调用sidebar不改变样式.

3.2派生选择器和类选择器之间的互相搭配

.fancy td {
	color: #f60;
	background: #666;
	}

和id一样,上述样式的含义是:在class为fancy中,如果有td,则td所秒数的内容样式改变

同样地,

td.fancy {
	color: #f60;
	background: #666;
	}

所代表的含义与td#fancy一样.