css样式表1 2017-03-11

样式表

DIV + CSS

一、 样式表的分类

以下均以div标签为例，可以换成其他标签

1、 内联样式表

格式:

style="属性1：属性值1；属性2：属性值2；属性3：属性3.1 属性3.2 属性3.3"

-------注意哪个用冒号哪个用分号什么时候用空格

</div>

注：优先级最高；border的值必须带有px; solid是指实体线；dash是指虚线

和html联合显示，控制精确，但是可重用性差，冗余多。

2、 内嵌样式表

Def: 作为一个独立区域内嵌在网页里，必须写在head标签里。

<head>

Div

{

width:400px;

height:300px;

border:1px;

}

</style>

</head>

注意：只对div标签起作用；必须在head标签里。不要漏了分号。

3、 外部样式表

新建一个CSS文件，用来放样式表。如果要调用样式表，需要在html文件中点右键----CSS样式-----附加样式表。一般用link链接方式。

注： 放于head中。

补充：

有些标签有默认的边距，一般写样式代码的时候都会先去除（或设置其他样式）。

{

margin: 0px;

padding: 0px;

}

</style>

作用：取消掉所有标签的页边距和间距。

* 表示对所有标签起作用。

二、选择器

1、标签选择器（用标签名作选择器，如上面2、补充就是一个标签选择器）

Div

{

height: 100px;

width: 100px;

}

</style>

2、class选择器 （都是以“.”开头）

<head>

.div

{

width:400px;

height:300px;

border:1px;

}

</style>

</head>

<body>

哈哈

</div>

</body>

注：表示class="div"这一类应用该样式。

3、 id选择器（以#开头）

<head>

#div

{

width:400px;

height:300px;

border:1px;

}

</style>

</head>

<body>

哈哈

</div>

</body>

4、 复合选择器

（1）用”,”隔开，表示并列。

<head>

div,span,p

{

width:400px;

height:300px;

border:1px

}

</style>

</head>

作用：标签div,span,p都具有相同的样式。

（2）用空格隔开，表示后代

<head>

.div div1

{

width:400px;

height:300px;

border:1px;

}

</style>

</head>

作用： div标签里的div1将应用该标签。

（3）筛选”.”

<head>

div.222

{

width:400px;

height:300px;

border:1px;

}

</style>

</head>

作用：在标签div中class=”222”的标签将会执行该样式。

拓：应用多个样式

<head>

{

width:400px;

height:300px;

border:1px;

}

span

{

background-color:blue;

}

</style>

</head>

<body>

哈哈

</div>

</body>

作用：哈哈所在div标签将会应用p标签和span标签所定义的样式。

Reflextions:

What I have learned today are more than before, and more complex than before , I have to try my best to catch up with them and just go ahead!

Thanks for the day is a sunny day, thanks for the people I love are still with me, thanks for the people always loving me never leave me; thanks for everything; and hope everything goes well, tomorrow, tomorrow' tomorrow, tomorrow' tomorrow'tomorrow.............

巴特西

css样式表1 2017-03-11

最新文章

热门文章