JavaWeb：（学习笔记）四、CSS

  • 第四章---CSS
  • 一、CSS概述
  • 1、说明
  • 2、HTML与CSS
  • 3、CSS导入方式
  • 二、CSS语法
  • 1、选择器
  • 2、文本
  • 3、背景
  • 4、列表
  • 5、伪类
  • 6、透明
  • 三、CSS盒子模型
  • 1、说明
  • 2、属性如下
  • 3、内容区
  • 4、内边距
  • 5、边框
  • 6、外边距
  • 7、默认样式
  • 四、CSS布局
  • 1、文档流
  • 2、浮动
  • 3、相对定位
  • 4、绝对定位


第四章—CSS

一、CSS概述

1、说明

CSS是Cascading Style Sheets（级联样式表）。是一种样式表语言，用于为HTML文档控制外观，定义布局。

可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。

2、HTML与CSS

HTML是网页内容 ，CSS定义页面的样式

3、CSS导入方式

样式表

行内样式表

内部样式表

外部样式表

优点

书写方便，权重高

部分结构和样式相分离

完全实现样式分离

缺点

没有实现样式和结构相分离

没有彻底分离

需要引入

使用情况

较少

较多

最多

控制范围

控制一个标签（少）

控制一个页面（中）

控制整个站点（多）

1）行内样式表

行内样式表,又有人称内联样式、行间样式、内嵌样式。是通过标签的style属性来设置

元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

2）内嵌样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

<head>
	<meta charset="utf-8">
	<title>内嵌样式表</title>
		
	<!-- CSS -->
	<style type="text/css">
		...
	</style>
		
</head>

3）外部样式表

外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通 过link标签将外部样式表文件链接到HTML文档中。

<head>
	<meta charset="utf-8">
	<title>外部样式表</title>
    
    <!--  -->
	<link href="news_css.css" rel="stylesheet"/>
    
</head>

二、CSS语法

1、选择器

1）说明

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选 择器。

2）常用选择器

①标签选择器：通过标签选择器可以选择页面中的所有指定标签

语法：标签名 {}

②类选择器：通过标签的class属性值选中一组标签

语法：.class属性值{}

③id 选择器：通过标签的id属性值选中唯一的一个标签

语法： #id属性值 {}

④选择器组合：通过选择器分组可以同时选中多个选择器对应的标签

语法：选择器1,选择器2,选择器N{}

⑤通配选择器:可以用来选中页面中的所有的标签

语法：*{}

3）举例

<p class="p1" id="pId">这是段落这是段落这是段落这是段落</p>
<p class="p2">这是段落这是段落这是段落这是段落</p>
<p class="p1">这是段落这是段落这是段落这是段落</p>
<p class="p2">这是段落这是段落这是段落这是段落</p>
<p class="p1">这是段落这是段落这是段落这是段落</p>
/* 标签选择器 设置所有 p 标签*/
p{
	color: black;
	font-size: 10px;
} 
			
/* 类选择器 .+class */
.p1{
	color: green;
	font-size: 20px;
}
.p2{
	color: red;
	font-size: 30px;
}
		
/* id 选择器 #+id */
#pId{
	color: yellow;
}
			
/* 通配选择器 * */
*{
	color: pink;
}
			
/* 选择其优先级 
id > class > 标签 > 通配选择器
*/
		   
/* 选择器组合 */
#pId,.p1,.p2{
	font-size: 50px;
}

2、文本

1）部分常用属性如下

属性

描述

color

字体颜色

font-size

字体大小

family

字体

text-align

文本对齐

text-decoration:line-through

定义穿过文本下的一条线

text-decoration:underline

定义文本下的一条线

text-decoration:none

定义标准的文本

font-style: italic

斜体文本

font-weight

字体粗细

line-height

设置行高

letter-spacing

可以指定字符间距

text-indent

用来设置首行缩进

2）举例

<p class="p1">
	<br />● color：字体颜色
	<br />● font-size：字体大小 
	<br />● font-family：字体 
	<br />● text-align：文本对齐 
	<br />● text-decoration:line-through：定义穿过文本下的一条线 
	<br />● text-decoration:underline：定义文本下的一条线 
	<br />● text-decoration:none：定义标准的文本 
	<br />● font-style: italic;斜体文本 
	<br />● font-weight:字体粗细 
	<br />● line-height:设置行高 
	<br />● letter-spacing可以指定字符间距 
	<br />● text-indent用来设置首行缩进
</p>
<style type="text/css">
		 
.p1{
	color: red;

	font-size: 30px;
	font-family: 楷体;
				
	text-align: center;
}
			
.p1{
	font-style: italic;
	font-weight: 1000;
				
	text-decoration:underline;
				
	line-height: calc(2);
				
	letter-spacing: 10px;
}
			
.p1{
	text-decoration: line-through;
	text-indent: 2em; /* 两个字符 */
}
		 
</style>

3、背景

1）部分常用属性如下

属性

说明

background-color

背景颜色

background-image

背景图片

background-repeat

背景重复

background-size

背景尺寸

background-position

背景位置

2）举例

<p class="p1">
	<br />● background-color背景颜色
	<br />● background-image背景图片 
	<br />● background-repeat背景重复 
	<br />● background-size背景尺寸 
	<br />● background-position 背景位置
</p>
.p1{
	background-color: #FFFF00;
	width: 400px;
	height: 400px;
}
.p1{
	background-image: url(../../img/baidu.ico);
}
.p1{
	background-image: url(../../img/baidu.ico);
	background-repeat: no-repeat;
}
.p1{
	background-image: url(../../img/baidu.ico);
	background-repeat: no-repeat;
	background-size: 50px;
}
.p1{
	background-image: url(../../img/baidu.ico);
	background-repeat: no-repeat;
	background-position: center;
}
</style>

4、列表

1）部分常用属性如下

属性

说明

list-style-image

将图象设置为列表项标志

list-style-position

设置列表中列表项标志的位置

list-style-type

设置列表项标志的类型

list-style

简写属性

2）举例

<ul class="u1">
	<li>第1列</li>
	<li>第2列</li>
	<li>第3列</li>
	<li>第4列</li>
	<li>第5列</li>
</ul>
<style type="text/css">
.u1{
	list-style-type: none;
}
.u1{
	list-style-image: url(../../homework/2_13/img/淘宝注册/Male.gif);
}
.u1{
	/* insede:图标在列表内；outside:图标在列表外 */
	list-style-position: inside;
}
</style>

5、伪类

1）说明

CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类 。

2）部分常用属性如下

属性

说明

hover

伪类表示鼠标移入的状态

active

表示的是被点击的状态

focus

向拥有键盘输入焦点的标签添加样式

3）举例

<a href="http://www.baidu.com" class="a1"> 超链接1 </a> <br />
<a href="http://www.baidu.com" class="a2"> 超链接2 </a> <br />
<a href="http://www.baidu.com" class="a3"> 超链接2 </a> <br />
		
<hr />
		
<input type="button" value="按钮1" class="btn1" />
<input type="button" value="按钮2" class="btn2" />
<input type="button" value="按钮3" class="btn3" />
		
<hr />
		
<input type="text" class="t1" /> <br />
<input type="text" class="t2" /> <br />
<input type="text" class="t3" /> <br />
<style type="text/css">
		
.a1,.a2{
	color: #FF0000;
}
			
.a1:hover{
	color: aqua;
}
			
.a2:active{
	color: #FFFF00;
}
			
.btn1:hover{
	background-color: #00FFFF;
}
			
.btn2:active{
	background-color: #FF0000;
}
			
.t1:focus{
	color: #FF0000;
}
			
.t2:focus{
	background-color: aqua;
}
			
</style>

6、透明

1）部分常用属性如下

属性

说明

opacity

属性设置标签的不透明级别，规定不透明度：从 0.0（完全透明）到 1.0（完全不透明）

2）举例

<img src="../../homework/2_13/img/水果展示/banana.jpg" class="i1" /> <br />
<img src="../../homework/2_13/img/水果展示/grape.jpg" class="i2" /> <br />
<img src="../../homework/2_13/img/水果展示/peach.jpg" class="i3" /> <br />
<img src="../../homework/2_13/img/水果展示/pear.jpg" class="i4" />
<style type="text/css">
.i1{
	opacity: 0;
}
.i2{
	opacity: 1;
}
.i3{
	opacity: 0.2;
}

</style>

三、CSS盒子模型

1、说明

CSS处理网页时，它认为每个标签都包含在一 个不可见的盒子里。如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。

2、属性如下

属性

说明

content

内容区

padding

内边距

border

边框

margin

外边距

3、内容区

内容区指的是盒子中放置内容的区域，也就是标签 中的文本内容，子标签都是存在于内容区中的。

如果没有为标签设置内边距和边框，则内容区大小 默认和盒子大小是一致的。

通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。

width和height属性只适用于块标签(包含行级块)。

4、内边距

顾名思义，内边距指的就是标签内容区与边框以内的空间。 内边距会影响整个盒子的大小。

使用padding属性来设置标签的内边距。

例如：

<div class="d1">
	<span>box1</span>
</div>
.d1{
	background-color: aqua;
	width: 200px;
	height: 200px;
				
	padding-top: 10px;		/* 上 */
	padding-right:10px; 	/* 右 */
	padding-bottom: 10px;	/* 下 */
	padding-left:10px;		/* 左 */
	padding: 10px 20px;		/* 上下、左右 */
	padding: 10px 20px 30px 40px;	/* 上、右、下、左 */
}

5、边框

1)可以在标签周围创建边框，边框是标签可见框的最外部。

①可以使用border属性来设置盒子的边框： border:1px red solid; 上边的样式分别指定了边框的宽度、颜色和样式。

②也可以分别指定border-top、left、right、botto、分别指定上右下左四个方向的边框。

2）边框可以设置样式：

属性

说明

dotted

点线

dashed

虚线

solid

实线

double

双线

groove

槽线

border-radius

设置四个角为圆角边框

border-top-left-radius

设置左上为圆角边框

3）举例

<div class="d2">
	<span>box2</span>
</div>
.d2{
	background-color: yellow;
	width: 200px;
	height: 200px;
				
	padding: 10px;
	border: #0000FF solid 3px; /* 颜色、样式、宽度 */
	border-top-left-radius: 10px;
}

6、外边距

1）说明

外边距是标签边框与周围标签相距的空间。

2）属性设置

①使用margin属性可以设置外边距。

②用法和padding类似，同样也提供了四个方向。 margin-top、right、bottom、left。

③margin的值可以为负值。

④margin的值还可以auto，设置外边距为最大值，

当将左右外边距设置为 auto时，浏览器会将左右外边距设置为相等.

垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。
3）注意

外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子的实际控制范围

4）举例

<div class="d3">
	<span>box3</span>
</div>
.d3{
	background-color: green;
	width: 200px;
	height: 200px;
				
	margin-left: auto;	/* 自动 */
	/* margin-left: 100px; */
}

7、默认样式

1）说明

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。

2）去除默认样式

*{ 
    margin: 0; 
    padding: 0; 
}

四、CSS布局

1、文档流

文档流指的是文档中的标签在排列时所占用的位置。将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。

也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。

这样一来每一个块标签都会另起一行，我们如果想在文档流中进行布局就会变得比较麻烦。

2、浮动

1）说明

浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。

2）使用

浮动使用float属性。

①none ：不浮动

②left ：向左浮动

③right ：向右浮动

3）注意

块级标签和行级标签都可以浮动，当一个行级标签浮动以后将会自动变为一 个块级标签。

当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我们都会为其指定一个宽度。

4）高度塌陷

当一个标签浮动以后，其下方的标签会上移。 浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流，这时不会再影响父标签的高度。 也就是浮动 标签不会撑开父标签。

5）clear

clear属性可以用于清除标签周围的浮动对标签的影响, 其他标签的位置不发生变化。 可选值：

left ： 忽略左侧浮动

right ：忽略右侧浮动

both ：忽略全部浮动

6）举例

<div class="menu_box">
	<div class="menu">首页</div>
	<div class="menu">新闻</div>
	<div class="menu">娱乐</div>
	<div class="menu">体育</div>
	<div class="menu">游戏</div>
	<div class="menu">科技</div>
	<div class="menu">动物</div>
	<div class="menu">其他</div>
	<div style="clear: left;"></div>
	</div>
		
	<div class="main_box">
	<div class="main_box_left">左</div>
	<div class="main_box_center">中</div>
	<div class="main_box_right">右</div>
	<div style="clear: left;"></div>
	<div class="main_box_bottom">底</div>
</div>
<style type="text/css">
.menu{
	background-color: #0055ff;
	color: white;
				
	float: left;
	padding: 10px 30px;
				
}
			
.menu_box{
	width: 736px;
	margin: auto;
}
			
.main_box{
	background-color: #00FFFF;
	width: 736px;
				
	margin: auto;
}
			
			.main_box_left,.main_box_center,.main_box_right,.main_box_bottom{
	float: left;
	height: 200px;
	color: white;
	text-align: center;
}
.main_box_left{
	width: 245px;
	background-color: red;
}
.main_box_center{
	width: 245px;
	background-color: green;
}
.main_box_right{
	width: 245px;
	background-color: blue;
}
.main_box_bottom{
	width: 736px;
	height: 100px;
	background-color: yellow;
}
</style>

3、相对定位

1）说明

相对于它的起点进行移动，移动后原来的位置还被占用。

2）使用

通过position:relative; 开启相对定位， left right top bottom四个属性来设置标签的偏移量。

3）特点

当标签的position属性设置为relative时，则开启了标签的相对定位

1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化

2.相对定位是相对于标签在文档流中原来的位置进行定位

3.相对定位的标签不会脱离文档流

4）举例

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
.box1,.box2,.box3,.box4{
	width: 200px;
	height: 200px;
}
.box1{
	background-color: blue;
				
	position: relative;/* 开启相对定位 */
	left: 500px;
	top: 100px;
}
.box2{
	background-color: yellow;
}

4、绝对定位

1）说明

绝对定位是不占空间的，运用了 绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉上会其他的标签重叠。

2）使用

通过position: absolute; 开启绝对定位，left right top bottom四个属性来设置标签的偏移量

3）特点

①开启绝对定位，会使标签脱离文档流

②开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化

③绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签 的绝对定位都会同时开启父标签的相对定位）。如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位

④绝对定位会使标签提升一个层级

⑤绝对定位会改变标签的性质，行级标签变成块标签