day3 css笔记

第三章 层叠样式模型（css）

DHTML简介

• DHTML 是制作动态 HTML 页面的技术
• DHTML=HTML+CSS+JAVASCRIP

CSS简介

• Cascading Style Sheets

 css语法

• css定义由选择器，属性，属性取值组成

选择器1{
属性名1：属性值1；
属性名2：属性值2；
···
}
选择器2{
属性名1：属性值1；

属性名2：属性值2；

• 属性和值之间要用冒号分开，多个属性之间加分号。、

css注释

• /*注释内容*/
• Sublime快捷键：ctrl+/

css样式分类

• 行内样式

<p style="background-color: red;height: 30px;">内容</p>（具体到标签中）

• 内嵌样式

<style>        (写在head标签之中；实现于head中的所有p标签)
p{
background-color: red;
}

</style>

• 外部样式

建立新网页：layout.css      (可作用于多个页面)

1.link （写在head标签之中）

<link rel="stylesheet"" type="text/css" href="layout.css"

2.@import (写在<style type="text/css"></style>标签里)

@import url("layout.css");

@import "layout.css";

选择器分类

• HTML选择器

Html元素{
 属性名1：属性值1；

 属性名1：属性值2；

 ···

}

• class类选择器

.abc{
 属性名1：属性值1；
 属性名1：属性值2；
 ···
}
</style>
 
<p class="abc">在 w3school</p>
在标签里写class=”类名称”

<style type="text/css">

• ID选择器

#abc<style type="text/css">
{
 属性名1：属性值1；
 属性名1：属性值2；
 ···
}
</style>

 

<p id="abc">在w3school</p> 

• 子元素选择器

div > input{

border:1px solid red;

}        (作用于div标签中的input标签)

• 后代元素选择器

div input{

border:1px solid red;

}        (作用于div标签中的input标签)

• 组合选择器

.box,#user{

background-color:red;

}

• 伪类选择器  （实现于a标签）

/*liknk 代表未访问*/

a:link{

color:red;

}

/*visited 代表访问过*/

a:visited{

color:green;

}

/*hover 代表悬浮在标签上*/

a:hover{

color:yellow;

}

/*active 代表鼠标长按*/

a:active{

color:pink;

}

• 样式混用

当混用时，css选择器有权重和优先规则。

4个等级的定义如下：

第一等：代表内联样式（行内），如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为100。

第三等：代表类，伪类和属性选择器，如.content，权值为10。

第四等：代表类型选择器和伪元素选择器，如div p，权值为1。