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)

javaweb学习笔记(七):CSS_第1张图片

例:

 

1.4 CSS的属性

以定位为例:

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

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

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

/*The study road of xiao hua */


	
one
tuo

 

你可能感兴趣的:(javaweb,javaweb学习)