自学JavaWeb第二天_CSS3

第二讲 CSS样式

一、DIV+CSS简介

（一）DIV+CSS简介

1、DIV介绍

DIV: 块级元素

注意: DIV单独使用没有任何意义, 需要结合Css一起使用, 才可以设计出精美的网页;

介绍了行内元素: span标签;

关于span标签与div标签的区别:

Div特点: 是块级标签, 会自动换行, 占一整行;

Span特点: 是行内标签, 不会自动换行, 有多少内容占多大空间;

2、CSS介绍

Css: 层叠样式表;

层叠: 一层一层的叠加

Css的作用: 美化网页

3、CSS引入方式

引入方式:(三种)

行内样式

在标签的开始标签中添加style属性;

优缺点: 由于样式与结构未分离, 复用性不好, 实际开发不提倡使用, 只用来测试某个标签的样式;

内部样式

在head标签内添加style标签

优缺点: 如果只针对当前页面进行样式控制, 推荐使用内部样式, 但是样式还未完全分离, 复用性不好;

外部样式

外部样式引入方式一:

外部样式引入方式二:

优缺点: 样式与代码完全分离, 样式文件可以使多个页面添加样式, 一般开发推荐使用;

面试题:

行内样式 > 内部样式 & 外部样式(后加载的先生效)

4、CSS样式规则

无论使用 HTML 还是 CSS 都需要遵从一定的规范。

css 定义规则如下：

选择器{

属性名1:属性值1;

属性名2:属性值2;

...

}

或者:

选择器{

属性名1:属性值1;属性名2:属性值2;...

}

选择器: 指css作用于当前HTML指定的对象

{}: 限定范围, 花括号中的所有样式都是属于当前选择器;

注意代码书写规范：

1. 属性名和属性值之间是键值对关系；

2. 属性名和属性值之间用 “:” 连接，最后“;”结尾；

3. 如果一个属性名有多个值，多个值之间用空格隔开。

4. CSS 注释：/* 注释内容 */ 快捷键：ctrl + shift + /

（二）CSS选择器

1、选择器介绍

想要将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。

常见选择器;

全局选择器 *

标签选择器

Id选择器

类选择器

2、标签选择器

HTML 标签指 HTML 的标记名称、如 div、html、body、input 等。所有符合 HTML 规范的标记都

可以作为标签选择器。

写法格式:

标签名{

样式一;

样式二;

}

代码准备：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

优就业是中公教育IT培训平台APP。<br>优就业业务类型主要包括面授培训、

网络远程教学培训、网络直播课程培训、IT类图书出版等。

</p>

</body>

</html>

3、ID选择器

ID选择器CSS中用“#”开头定义，后面跟随ID名称。例如：#name

ID为当前HTML元素的ID属性值。

写法格式:

#ID名{

样式一;

样式二;

...

}

代码准备：

<!DOCTYPE html>

<html>

<head>

<title>测试ID选择器</title>

</head>

<body>

</div>

</body>

</html>

4、类选择器

在css中类选择器使用“.”符号开头定义，后面跟随类名。例如：.name

类名即是HTML中class属性的值，大多数HTML元素都可以定义class属性。

写法格式:

.类名{

样式一;

样式二;

...

}

代码准备：

<!DOCTYPE html>

<html>

<head>

<title>测试类选择器</title>

</head>

<body>

</body>

</html>

二、常用CSS样式

（一）字体样式

字体样式:

属性名	属性说明
font-size	字体大小
font-style	字体风格(取值：italic/normal...) 取值(扩展): italic : 斜体。对于没有斜体变量的特殊字体 normal : 默认值。正常的字体
font-family	字体类型(取值：隶书/微软雅黑...)
font-weight	字体粗细(取值：bold/normal...) 取值(扩展): Normal 默认值。定义标准的字符 bold 定义粗体字符 bolder 定义更粗的字符 lighter 定义更细的字符

代码准备：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>窗前明月光</p>

<p>疑似地上霜</p>

</body>

</html>

（二）文本样式

文本样式:

属性名	属性说明
color	文本颜色（取值：colorname或#0000FF）
text-align	文本对齐（取值：left/right/center...）
text-decoration	文本装饰(取值：none/underline...) 取值(扩展): none默认。定义标准的文本。 underline定义文本下的一条线。 overline定义文本上的一条线。 line-through定义穿过文本下的一条线
line-height	设置行高

代码准备：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>窗前明月光</p>

<p>疑似地上霜</p>

</body>

</html>

（三）超链接伪类样式

超链接伪类样式:

属性名	属性说明
a:link{}	未被访问时
a:visited{}	访问过后
a:hover{}	鼠标悬浮时
a:active{}	鼠标激活时

代码准备：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

//未访问时效果:

//访问过后效果:

//鼠标悬浮效果:

//鼠标点击效果:

（四）边框样式

边框样式:

属性名	属性说明
border-width	边框宽度按方向设置：border-(left/right/top/bottom)-width
border-color	边框颜色按方向设置：border-(left/right/top/bottom)-color
border-style	边框风格按方向设置：border-(left/right/top/bottom)-style

代码准备：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

简写方式:

设置圆角边框：

属性名

属性说明

border-radius

圆角边框属性取值单位可以是像素，也可以是百分比

按方向设置值：border-(top/bottom)-(left/right)-radius

该属性取值单位可以是像素，也可以是百分比，如果整体设置值，最多可以给四个值，按照左上，右上，右下，左下的顺序给值。

一个值：四个角有相同的边界半径；

两个值：第一个值表示左上角和右下角，第二个值表示右上角和左下角；

三个值：第一个值表示左上角，第二个值表示右上角和左下角，第三个值表示右下角；

四个值：左上，右上，右下，左下。

设置圆形:

按方向取值:

（五）背景样式

背景样式:

属性名	属性说明
	背景颜色
background-image: url(img/1.jpeg);	背景图片
background-size: 100%;	背景大小
background-repeat:no-repeat(repeat-x/repeat-y/repeat);	背景是否平铺
background-position: center;	背景偏移

background-repeat: 是否平铺

repeat-x : 水平方向平铺

repeat-y : 垂直方向平铺

Repeat : 水平和垂直方向同时平铺

No - repeat:不平铺

（六）盒子模型

图解:

什么是盒子模型:

CSS 的框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

平时我们所说的宽度和高度仅仅指的是内容的宽和高，而盒子的实际宽高通过下面的公式计算。

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

属性解析:

属性名

属性说明

内边距 padding

内边距：也叫填充（padding），设置元素内容与元素边框之间的距离。

填充的属性有四个取值：padding-(top/bottom/left/right) padding

一个值：padding:20px; 表示四个方向都是20px

两个值：padding:20px 30px ; 表示上下是20，左右是30

三个值：padding:10px 20px 30px;表示上10px，右20px，下30px，左同右20px

四个值：padding:10px 20px 30px 40px; 上右下左

外边距 margin

外边距 margin：也叫空白边（margin），位于盒子的最外围，设置不同元素之间, 它们边框与边框之间的距离。

空白边的属性有五种:margin-(top/bottom/left/right) margin

其赋值方式同padding

代码准备：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div class="box">我是div</div>

</body>

</html>

问题:

两个盒子纵向展示时, 当外边距发生冲突时, 两个盒子之间的距离取决于: 最大盒子的外边距;

两个盒子横向展示时, 当外边距发生冲突时, 两个盒子之间的距离取决于: 两个盒子外边距之和

（七）布局样式

从左向右排列: span input

从上到下排列: div p

如果将这些默认从上到下的标签改变排列规则，按照从左到右的顺序排列，就需要用到浮动属性。

属性解析:

属性名

属性说明

float

float是css样式中的定位属性，用于设置标签对象的浮动布局，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动属性的取值有三个：

left：元素左浮动

right：元素右浮动

none：默认值，不浮动

注意:

一个元素如果设置了浮动, 就会脱离标准文档流, 该元素就会改变其它元素在原文档中的位置, 因此, 浮动元素会对周边的元素发生改变(产生影响);

什么是标准文档流?

代码准备：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

box1

</div>

box2

</div>

box3

</div>

<p>

优就业1024程序员节，为学员送福利.优就业认知之旅带你转遍名企厂商.1024程序员节举办 “美食Party”,中公优就业学员素拓活动获圆满成功,优就业师生共进素质拓展课取得圆满成功.优就业1024程序员节，为学员送福利.优就业认知之旅带你转遍名企厂商.1024程序员节举办 “美食Party”,中公优就业学员素拓活动获圆满成功,优就业师生共进素质拓展课取得圆满成功.

</p>

</body>

</html>

/*需求: 向盒子下边添加一篇文章, 不围绕盒子展示*/

/*清除浮动效果 : clear

取值: left: 清除左浮动

right: 清除右浮动

both: 清除两侧浮动

注意:

一般单独写一个div, 用来清除浮动;

* */

（八）定位技术

HTML默认是流式布局（不会出现元素重叠），但在某些情况下需要改变元素的位置和标准布局方式。这时就可以采用定位技术。

css中关于定位的属性是position:

属性名

属性说明

position

定位

取值有如下几个：

static：静态的（默认值）表示默认流式布局

relative：相对定位，无论是在标准文档流中还是浮动流中，都是相对于元素自身位置进行偏移，偏移后原来的位置依然保留，会留下空白，因此不会改变其他元素的布局。

absolute：绝对定位的元素会脱离标准文档流，使用left、right、top、bottom等属性相对于其最近的一个已定位的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则依据 body 元素左上角作为参考进行绝对定位。由于绝对定位的元素不在标准流中，因此会对其他元素的布局产生影响。

fixed：固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。

代码准备：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div class="three">three</div>

</body>

</html>

不会随着滚动条移动;

（九）转换样式与列表样式

HTML中有大量丰富的标签;

定义不同的类型来区分: 一般会分为按块, 按行内, 行块来区分;

块级元素: 以区域划分成块, eg:<p>, <div>, <h*>

行内元素: 按行排列; eg: <span>, <b>, <i>

行块元素: <img>, <input>

在实际开发中, 希望以上三种排列方式可以相互转换, 需要用到了样式转换属性: display

属性解析:

属性名

属性说明

display

用于定义建立布局时元素生成的显示框类型.

其取值如下:

inline：此元素将显示为行元素（行内元素display的默认值）

block：此元素指定为块元素（块元素display的默认值）

inline-block:将对象呈现为内联元素，对象内的元素块级展示。

none：隐藏元素

最终效果:

代码准备：

<!DOCTYPE html>

<html>

<head>

<title>转换样式与列表样式</title>

</head>

<body>

<ul>

</ul>

</body>

</html>

面试题:(高频)

float与display属性的inline-block值的区别：

1、浮动float横排显示的元素之间无外边距，而inline-block会有默认的外边距。

2、浮动float让元素脱离当前文档流，呈环绕装排列，如遇上行有空白，而当前元素大小可以挤进去，这个元素会在上行补位排列，默认是顶部对齐。inline-block水平排列一行，即使元素高度不一，也会以高度最大的元素高度为行高，即使高度小的元素周围留空，也不会有第二行元素上浮补位。

3、二者都能实现水平排列，优先使用inline-block，因为此种方式元素未脱离标准文档流,元素间的相对定位好调整。但当某些场景希望有些元素向左排列，有些元素向右排列，这时只能使用float。