javaweb学习笔记（七）：CSS

目录

1.CSS

1.1 CSS的引入方式

1.2 CSS选择器

1.3 CSS的盒子模型

1.4 CSS的属性

---

1.CSS

CSS（Cascade Style Sheet，层叠样式表）

html负责的是一个页面的结构，css主要负责了页面的数据样式。

注释格式：/*注释内容*/  

1.1 CSS的引入方式

行内样式：直接在html标签中使用style属性编写。（只能用于本标签中，复用性较差）

例：

 小华的笔记1

 

 内部样式：在style标签中编写css代码。（只能用于本页面中，复用性不强。）

例：

 外部样式：可以引入外部的css文件。（推荐使用）

方式1： 使用link标签。（推荐使用） 例：

方式2：使用

link和@import引入外部样式的区别：

①link属于HTML标签，而@import是CSS提供的一种方式

②@import只能引入31次css文件。

③当页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显。

④由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，link标签无此问题

⑤当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

注：如果三种样式都存在，则行内样式  > 内部样式 > 外部样式，即符合就近原则。

1.2 CSS选择器

CSS选择器：找到对应的数据进行样式化。

格式：选择器{  属性：属性值;  }

常见选择器

①标签选择器：找到所有指定的标签进行样式化。

格式：

标签名{

样式1；

样式2....

}

例:

div{
    color:#F00;
    font-size:24px;
}

②类选择器: 使用类选择器首先要给html标签指定对应的class属性值。

格式：

.class的属性值{

样式1；

样式2....

}

例：

.a{
    color:#F00;
    font-size:24px;
}

注：1. html元素的class属性值不能以数字开头.

       2.类选择器的样式优先于标签选择器的样式。

③ID选择器： 使用ID选择器首先要给html元素添加一个id的属性值。

格式：

#id的属性值{

样式1；

样式2....

}

例：

#a{
    color:#F00;
    font-size:24px;
}

注：1.ID的属性值不能以数字开头。

        2.ID选择器的样式优先级是最高的，优先于类选择器与标签选择器。

        3.ID的属性值在一个html页面中只能出现一次。（ID唯一）

④交集选择器：对选择器1中的选择器2里面的数据进行样式化。

格式：

选择器1 选择器2{

样式1；

样式2....

}

例：

.a span{
    color:#F00;
    font-size:24px;
}

⑤并集选择器：对指定的选择器进行统一的样式化。

格式： 例：

选择器1,选择器2{

样式1；

样式2....

}

例：

span，a{
    color:#F00;
    font-size:24px;
}

⑥通用选择器:

格式：

*{

样式1

样式2....

}

例：

*{
    color:#F00;
    font-size:24px;
}

⑦伪类选择器：对元素处于某种状态下进行样式化。

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

注：1. a:hover 必须被置于 a:link 和 a:visited 之后

        2. a:active 必须被置于 a:hover 之后

1.3 CSS的盒子模型

用于操作内边距(padding)与外边距（margin）

例：

 

1.4 CSS的属性

以定位为例：

①相对定位：相对于元素原本的位置进行移动。

②绝对定位：相对于整个页面进行移动。

③固定定位：相对于整个浏览器进行移动。 例：

/*The study road of xiao hua */


	
one
	
tuo
	
this is a ad