第二讲 CSS样式
一、DIV+CSS简介
（一）DIV+CSS简介
1、DIV介绍
DIV: 块级元素
注意: DIV单独使用没有任何意义, 需要结合Css一起使用, 才可以设计出精美的网页;
介绍了行内元素: span标签;
关于span标签与div标签的区别:
Div特点: 是块级标签, 会自动换行, 占一整行;
Span特点: 是行内标签, 不会自动换行, 有多少内容占多大空间;
2、CSS介绍
Css: 层叠样式表;
层叠: 一层一层的叠加
Css的作用: 美化网页
3、CSS引入方式
引入方式:(三种)
- 行内样式
在标签的开始标签中添加style属性;
优缺点: 由于样式与结构未分离, 复用性不好, 实际开发不提倡使用, 只用来测试某个标签的样式;
- 内部样式
在head标签内添加style标签
z
优缺点: 如果只针对当前页面进行样式控制, 推荐使用内部样式, 但是样式还未完全分离, 复用性不好;
- 外部样式
外部样式引入方式一:
优缺点: 样式与代码完全分离, 样式文件可以使多个页面添加样式, 一般开发推荐使用;
面试题:
行内样式 > 内部样式 & 外部样式(后加载的先生效)
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>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
优就业是中公教育IT培训平台APP。<br>优就业业务类型主要包括面授培训、
网络远程教学培训、网络直播课程培训、IT类图书出版等。
</p>
<div></div>
</body>
</html>
3、ID选择器
ID选择器CSS中用“#”开头定义，后面跟随ID名称。 例如：#name
ID为当前HTML元素的ID属性值。
写法格式:
#ID名{
样式一;
样式二;
...
}
代码准备：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试ID选择器</title>
</head>
<body>
<div id="t01">
<!-- 在div中定义一个input标签 -->
<input id="username" type="text" />
</div>
</body>
</html>
4、类选择器
在css中类选择器使用“.”符号开头定义，后面跟随类名。例如：.name
类名即是HTML中class属性的值，大多数HTML元素都可以定义class属性。
写法格式:
.类名{
样式一;
样式二;
...
}
代码准备：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试类选择器</title>
</head>
<body>
<div class="c_01"></div>
</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>
<meta charset="UTF-8">
<title>字体样式</title>
</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>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>窗前明月光</p>
<p>疑似地上霜</p>
</body>
</html>
（三）超链接伪类样式
超链接伪类样式:
|
属性名 |
属性说明 |
|
a:link{} |
未被访问时 |
|
a:visited{} |
访问过后 |
|
a:hover{} |
鼠标悬浮时 |
|
a:active{} |
鼠标激活时 |
代码准备：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="index.html">登录</a>
</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>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="circle"></div>
</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>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">我是div</div>
</body>
</html>
问题:
- 两个盒子纵向展示时, 当外边距发生冲突时, 两个盒子之间的距离取决于: 最大盒子的外边距;
- 两个盒子横向展示时, 当外边距发生冲突时, 两个盒子之间的距离取决于: 两个盒子外边距之和
（七）布局样式
从左向右排列: span input
从上到下排列: div p
如果将这些默认从上到下的标签改变排列规则，按照从左到右的顺序排列，就需要用到浮动属性。
属性解析:
|
属性名 |
属性说明 |
|
float |
float是css样式中的定位属性，用于设置标签对象的浮动布局，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动属性的取值有三个： left：元素左浮动 right：元素右浮动 none：默认值，不浮动 |
注意:
一个元素如果设置了浮动, 就会脱离标准文档流, 该元素就会改变其它元素在原文档中的位置, 因此, 浮动元素会对周边的元素发生改变(产生影响);
什么是标准文档流?
代码准备：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局样式</title>
</head>
<body>
<div class="box1">
box1
</div>
<div class="box2">
box2
</div>
<div class="box3">
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>
<meta charset="UTF-8">
<title>定位</title>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<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>
<meta charset="UTF-8">
<title>转换样式与列表样式</title>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</body>
</html>
面试题:(高频)
float与display属性的inline-block值的区别：
1、浮动float横排显示的元素之间无外边距，而inline-block会有默认的外边距。
2、浮动float让元素脱离当前文档流，呈环绕装排列，如遇上行有空白，而当前元素大小可以挤进去，这个元素会在上行补位排列，默认是顶部对齐。inline-block水平排列一行，即使元素高度不一，也会以高度最大的元素高度为行高，即使高度小的元素周围留空，也不会有第二行元素上浮补位。
3、二者都能实现水平排列，优先使用inline-block，因为此种方式元素未脱离标准文档流,元素间的相对定位好调整。但当某些场景希望有些元素向左排列，有些元素向右排列，这时只能使用float。