css主要的作用:美化及控制页面布局
1.css 的介绍
css(Cascading Style Sheet)层叠样式表,它是用来美化页面的一种语言。
1.1css理解
- 没有css
- 有css
1.2. css 的作用
1 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。
2 控制页面布局, 比如: 设置浮动、定位等样式。
1.3. css 的基本语法
选择器{
样式规则
}
样式规则:
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
...
---
说明
选择器:是用来选择标签的,选出来以后给标签加样式。
<!-- 所有css样式最外层需要使用style标签 -->
<style>
/* div标签选择器 */
div {
/* 设置标签宽度 */
width: 100px;
/* 设置标签的高度 */
height: 100px;
/* 设置标签的背景 */
background: gold;
}
</style>
--------
html代码
<!-- 显示内容的内容 -->
<div>内容</div>
css 是层叠样式表,它是用来美化网页和控制页面布局的。
定义 css 的语法格式是: 选择器{样式规则}
2.css 的引入方式
1 行内式
2 内嵌式(内部样式)
3 外链式
2.1. 行内式
直接在标签的 style 属性中添加 css 样式
示例代码:
<div style="width:100px; height:100px; background:red ">hello</div>
优点:
方便、直观。
缺点:
缺乏可重用性。
2.2. 内嵌式(内部样式)
在标签内加入
<head>
<style type="text/css">
div {
/* 宽度 */
width: 100px;
/* 高度 */
height: 200px;
/* 背景色 */
background: red;
}
</style>
</head>
优点:
在同一个页面内部便于复用和维护。
缺点:
在多个页面之间的可重用性不够高。
2.3. 外链式
将css代码写在一个单独的.css文件中,在标签中使用标签直接引入该文件到页面中。
示例代码:
- css文件代码
div {
/* 宽度 */
width: 100px;
/* 高度 */
height: 200px;
/* 背景色 */
background: red;
}
- html文件代码
<!-- href中指定css文件导入路径 -->
<link rel="stylesheet" type="text/css" href="css/main.css">
优点:
使得css样式与html页面分离,便于整个页面系统的规划和维护,可重用性高。
缺点:
css代码由于分离到单独的css文件,容易出现css代码过于集中,若维护不当则极容易造成混乱。
2.4. css引入方式选择
1 行内式几乎不用
2 内嵌式在学习css样式的阶段使用
3 外链式在公司开发的阶段使用,可以对 css 样式和 html 页面分别进行开发。
---
css 的引入有三种方式, 分别是行内式、内嵌式、外链式。
外链式是在公司开发的时候会使用,最能体现 div+css 的标签内容与显示样式分离的思想,也最易改版维护,代码看起来也是最美观的一种。
3.css 选择器
3.1. css 选择器的定义
css 选择器是用来选择标签的,选出来以后给标签添加样式。
3.2. css 选择器的种类
3.2.1. 标签选择器
标签选择器根据标签名来选择标签,以标签名开头,此种选择器影响范围大,一般用来做一些通用设置。
示例代码
css代码
<style type="text/css">
/* 标签选择器,直接以标签名开头 */
p{
/* 设置颜色是红色 */
color: red;
}
</style>
html代码
<!-- 网页展示的内容 -->
<div>hello div</div>
<p>hello p1</p>
<p>hello p2</p>
3.2.2. 类选择器
类选择器根据类名来选择标签,以 . 开头, 一个类选择器可应用于多个标签上,一个标签上也可以使用多个类选择器,多个类选择器需要使用空格分割,应用灵活,可复用,是css中应用最多的一种选择器。
示例代码
css代码
<style type="text/css">
/* 类选择器以.开头,后面填写需要被操作标签的类名 */
/* class中类名为div01的标签设置对应css样式 */
.div01{
color:blue
}
/* class中类名为p01的标签设置对应css样式 */
.p01{
color:red
}
/* class中类名为box的标签设置对应css样式 */
.box{
width:100px;
height:100px;
background:gold
}
</style>
html代码
<div class="div01">这是一个div</div>
<!-- 这个标签可以设置多个类名 -->
<p class="p01 box">这是一个段落</p>
3.2.3. 层级选择器(后代选择器)
层级选择器根据层级关系选择后代标签,以 外层标签 内层标签,主要应用在标签嵌套的结构中,减少命名。
示例代码
css代码
<style type="text/css">
/* div 下在的p标签设置样式 */
div p{
color: red;
}
/* 类名为con的标签下的类名为url的标签设置样式 */
.con .url{
color:pink;
}
</style>
html代码
<div>
<p>hello</p>
</div>
<div class="con">
<p>哈哈</p>
<a href="http://www.itcast.cn" class="url">传智播客</a>
</div>
<p>你好</p>
<a href="#" class="url">百度</a>
---
注意
这个层级关系不一定是父子关系,也有可能是祖孙关系,只要有后代关系都适用于这个层级选择器
3.2.4. 组选择器
组选择器可以把多个标签组成一个组,以, 分割, 如果有公共的样式设置,可以使用组选择器进行统一的样式设置。
示例代码
css代码
<style type="text/css">
/* 组选择器使用,对标签进行分隔 */
/* 设置第一个与第三个div样式 */
.box1,
.box3 {
/* 设置宽度 */
width: 100px;
/* 设置高度 */
height: 100px;
/* 设置背影 */
background: green;
}
</style>
html代码
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
3.2.5. id选择器
id选择器,以#开头, 元素的id名称不能重复,所以id选择器只能对应于页面上一个元素,不能复用,所以不推荐使用id作为选择器。
示例代码
css代码
<style type="text/css">
/* id选择器以#号开始 */
#div01{
color:red;
}
#div02{
color:green;
}
</style>
html代码
<div id="div01">这是一个段落标签</div> <!-- 每个标签的id名称不能相同-->
<div id='div02'>这是第二个段落标签</div> <!-- 每个标签的id名称不能相同-->
---
注意
在css里id名称是可以的相同的。但如果页面涉及到JavaScript,就有问题了。因为JavaScript里获取DOM是通过getElementById,如果页面出现同一个id多次的话,这样元素就获取不到了。所以id需要唯一性。
3.2.6. 属性选择器
属性选择器根据属性选择标签,以 标签名[属性名=‘属性值’]开头, 一个属性选择器可应用于多个标签上
示例代码
html代码
<!-- 设置黑马程序员与传智播客字体颜色为红色 -->
<div name="itcast"> 黑马程序员 </div>
<div name="baidu"> 百度 </div>
<div name="itcast"> 传智播客 </div>
css代码
<style type="text/css">
/* 设置键为name值为itcast的标签设置为红色 */
[name='itcast']{
color: red
}
</style>
---
说明
css 是由两个主要的部分构成:选择器和一条或多条样式规则,注意:样式规则需要放到大括号里面。
4.css 属性
4.1. 布局常用样式属性
属性 | 作用 | 举例 |
---|---|---|
width | 设置元素(标签)的宽度 | width: 200px; |
height | 设置元素(标签)的高度 | height: 200px; |
background | 设置元素背景色或者背景图片(详看下面) | background: pink; |
background | 设置元素背景色或者背景图片(详看下面) | background: url(images/logo.png); |
border | 设置元素四周的边框 | border: 1px solid pink; |
border-top | 设置元素顶部边框 | border-top: 1px solid/ dashed pink; |
border-left | 设置元素左边边框 | border-left: 1px solid pink; |
border-right | 设置元素右边边框 | border-right: 1px solid pink; |
border-bottom | 设置元素底部边框 | border-bottom: 1px solid pink; |
html代码
<!-- 两个div的嵌套 -->
<div class="box1">
<div class="box2">
内容
</div>
</div>
css代码
<style>
/* 外层的div设置 */
.box1 {
/* 设置宽度 */
width: 200px;
/* 设置高度 */
height: 200px;
/* 设置背景图片 */
background:url(./images/logo.png);
/* 设置边框颜色 */
border: 1px solid black;
}
/* 内层的div设置 */
.box2 {
/* 设置宽度 */
width: 100px;
/* 设置高度 */
height: 100px;
/* 设置背景色 */
background:#979797;
/* 设置四边边框 */
/* border: 10px solid black; */
/* 上边框设置 */
border-top: 10px solid red;
/* 左边框设置 */
border-left: 10px solid green;
/* 右边框设置 */
border-right: 10px solid blue;
/* 下边框设置 */
border-bottom: 10px solid yellow;
}
</style>
4.2. 文本常用样式属性
属性 | 作用 | 举例 |
---|---|---|
color | 设置文字的颜色 | color: red; |
font-size | 设置文字的大小 | font-size: 12px; |
font-family | 设置文字的字体 | font-family: ‘Microsoft Yahei’; (微软雅黑) |
font-weight | 设置文字是否加粗 | font-weight: bold; (bold:加粗 normal: 正常) |
line-height | 设置文字的行高 | line-height: 24px; (文字高度加上文字上下间距共计24px) |
text-decoration | 设置文字的下划线 | text-decoration:none; (取消下划线) |
text-align | 设置文字水平对齐 | text-align:center 设置文字水平居中 |
text-indent | 设置文字首行缩进 | text-indent:24px; 设置文字首行缩进24px |
<style>
div {
/* 设置字体大小 浏览器默认是 16px */
font-size: 26px;
/* 设置字体 */
font-family: "Microsoft YaHei";
/* 设置字体加粗 */
font-weight: bold;
/* 设置字体颜色 */
color: yellow;
/* 设置行高 */
line-height: 150px;
/* 设置背景色 */
background: #737373;
/* 设置文字居中 */
text-align: center;
}
a {
/* 去掉下划线 */
text-decoration: none;
}
p{
/* 设置文字缩进 */
text-indent: 32px;
}
</style>
html代码
<!-- 超链接 -->
<a href="http://www.itcast.cn">黑马程序员</a>
<!-- 段落 -->
<p>
恭喜您进入python世界!
</p>
<!-- div标签 -->
<div>
你好,世界!
</div>
5.css 元素溢出
当子元素(标签)的尺寸超过父元素(标签)的尺寸时,此时需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来完成。
overflow的设置项
- visible 默认值, 显示子标签溢出部分。
- hidden 隐藏子标签溢出部分。
- auto 如果子标签溢出,则可以滚动查看其余的内容。
<style>
/* 父控件设置 */
.box1 {
/* 设置宽度 */
width: 100px;
/* 设置高度 */
height: 200px;
/* 设置背景 */
background: #737373;
/* 设置元素溢出处理 */
overflow: auto;
}
</style>
html代码
<!-- 父控件 -->
<div class="box1">
<!-- 超出范围的一段文字 -->
<p> 大头儿子小头爸爸
一对好朋友 快乐父子俩
儿子的头大手儿小
爸爸的头小手儿很大
大手牵小手
走路不怕滑
走呀走呀走 走 走
转眼儿子就长大
转眼儿子就长大
</p>
</div>
6.css 显示特性
6.1. display 属性的使用
display 属性是用来设置元素的类型及隐藏的,常用的属性有:
- none 元素隐藏且不占位置
- inline 元素以行内元素显示
- block 元素以块元素显示
- inline-block 行内块元素 ( 扩展 )
css代码
<style>
/* 隐藏标签 */
.con {
width: 200px;
height: 200px;
background: gold;
/* 将元素隐藏 */
display: none;
}
/* 将块元素转换成行内元素 */
.box {
/* 注意转换成行内元素后不能设置宽高,设置元效 */
/* 将块元素转化为行内元素 */
background: green;
display: inline;
}
/* 将块内元素转换成块元素 */
.link01 {
width: 200px;
height: 200px;
background: red;
/* 将行内元素转化为块元素 */
display: block;
}
/* 将行内元素转化为块元素 */
.box1 {
width: 200px;
height: 200px;
background: rgb(0, 225, 255);
/* 将行内元素转化为块元素 */
display: inline-block;
}
</style>
html代码
<!-- 标签进行隐藏:display:none -->
<div class="con">隐藏的标签</div>
<!-- 块元素变成行内元素:display:inline -->
<div class="box">这是第一个div</div>
<div class="box">这是第二个div</div>
<!-- 内联元素变成块元素 -->
<a href="#" class="link01">这是第一个链接</a>
<a href="#" class="link01">这是第二个链接</a>
<!-- 将块元素转换成行内块元素-->
<div class="box1">这是第三个div</div>
<div class="box1">这是第四个div</div>
---
注意
行内元素不能设置宽高, 块元素或者行内块元素可以设置宽高。
7.浮动
1. 浮动的定义:
使元素脱离文档流,按照指定的方向(左或右发生移动),直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说明
文档流是是文档中可显示对象在排列时所占用的位置/空间,而脱离文档流就是在页面中不占位置了。
2. 浮动的理解:
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
css 浮动:
请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:
再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:
3. 浮动属性:
左浮动:
- float:left;
右浮动:
- float:right;
4. 浮动演示:
html代码
<!-- 四个div分别设置不同宽高的色块 -->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
css代码
/* 四个div分别设置不同宽高的色块 */
.div1 {
width: 100px;
height: 100px;
background-color: pink;
}
.div2 {
width: 200px;
height: 100px;
background-color: blue;
}
.div3 {
width: 100px;
height: 200px;
background-color: green;
}
.div4 {
width: 200px;
height: 200px;
background-color: red;
}
5. 注意点:
当初float 被设计的时候就是用来完成文本环绕的效果, 所以文本不会被挡住, 这是 float 的特性, 即 float 是一种不彻底的脱离文档流的方式.
利用浮动完成秒杀
8.盒子模型
8.1. 盒子模型的介绍
所谓的盒子模型就是把HTML页面的元素看作一个矩形盒子,矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。
8.2. 盒子模型相关样式属性
- 盒子的内容宽度(width),注意:不是盒子的宽度
- 盒子的内容高度(height),注意:不是盒子的高度
- 盒子的边框(border)
- 盒子内的内容和边框之间的间距(padding)
- 盒子与盒子之间的间距(margin)
8.3. 设置宽高:
设置盒子的宽高,此宽高是指盒子内容的宽高,不是盒子整体宽高
示例代码
css代码
/* 设置盒子的宽度,此宽度是指盒子内容的宽度,不是盒子整体宽度(难点) */
width: 200px;
/* 设置盒子的高度,此高度是指盒子内容的高度,不是盒子整体高度(难点) */
height: 200px;
/* 设置颜色为了展示的效果更明显 */
background: green;
html代码
<!-- 网页展示的内容 -->
<div class="box">
内容
</div>
8.4. 设置内间距 padding
设置盒子四边的内间距,可设置如下:
padding-top:20px; /* 设置顶部内间距20px */
padding-left:30px; /* 设置左边内间距30px */
padding-right:40px; /* 设置右边内间距40px */
padding-bottom:50px; /* 设置底部内间距50px */
上面的设置可以简写如下:
padding:20px 40px 50px 30px; /* 四个值按照顺时针方向,分别设置的是 上 右 下 左
四个方向的内边距值。 */
padding后面还可以跟3个值,2个值和1个值,它们分别设置的项目如下:
padding:20px 40px 50px; /* 设置顶部内边距为20px,左右内边距为40px,底部内边距为50px */
padding:20px 40px; /* 设置上下内边距为20px,左右内边距为40px*/
padding:20px; /* 设置四边内边距为20px */
8.5. 设置边框 border
设置边框详细写法:
一个border属性,是由三个小属性综合而成的
三要素:
/* 边框宽度 */
border-width:10px;
/* 线型 */
border-style:solid;
/* 颜色 */
border-color:red;
简写
/* 设置边框 ,在设置边框时需要三个参数(边框粗细 边框线的形状 边框的颜色)*/
border: 10px solid red;
---
其中10px表示线框的粗细;solid表示线性;red表示边框的颜色
设置上下左右不同的边框
/* 设置上边框样式 */
border-top:10px solid red;
/* 设置右边框样式 */
border-right:10px solid red;
/* 设置底边框样式 */
border-bottom:10px solid red;
/* 设置左连框样式 */
border-left:10px solid red;
8.6. 设置外间距 margin
设置盒子四边的外间距,可设置如下:
margin-top:20px; /* 设置顶部外间距20px */
margin-left:30px; /* 设置左边外间距30px */
margin-right:40px; /* 设置右边外间距40px */
margin-bottom:50px; /* 设置底部外间距50px */
上面的设置可以简写如下:
margin:20px 40px 50px 30px; /* 四个值按照顺时针方向,分别设置的是 上 右 下 左
四个方向的外间距值。 */
margin后面还可以跟3个值,2个值和1个值,它们分别设置的项目如下:
margin:20px 40px 50px; /* 设置顶部外间距为20px,左右外间距为40px,底部外间距为50px */
margin:20px 40px; /* 设置上下外间距为20px,左右外间距为40px*/
margin:20px; /* 设置四边外间距为20px */
---
外边距的设置方法和padding的设置方法相同,将上面设置项中的'padding'换成'margin'就是外边距设置方法。
8.7. 盒子的真实尺寸
盒子的width和height值固定时,如果盒子增加border和padding,盒子整体的尺寸会变大,所以盒子的真实尺寸为:
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
margin外间距的空间不属于盒子的内容
盒子模型的5个主要样式属性
width:内容的宽度(不是盒子的宽度)
height:内容的高度(不是盒子的高度)
padding:内边距。
border:边框。
margin:外边距
盒子的真实尺寸只会受到宽度、高度、边框、内边距四个属性的影响,不会受到外边距属性的影响。
9.表格样式
属性 | 作用 | 举例 |
---|---|---|
width | 设置元素(标签)的宽度 | width: 200px; |
height | 设置元素(标签)的高度 | height: 200px; |
border | 设置元素四周的边框 | border: 1px solid pink; |
border-collapse | 设置表格线合并 | border-collapse: collapse; |
text-align | 设置文字对齐方式 | text-align: start/center/end; |
css代码
<style>
/* 设置表格属性 */
table{
/* 设置宽度 */
width: 300px;
/* 设置高度 */
height: 200px;
/* 设置表格线合并 */
border-collapse: collapse;
}
/* 设置单元格样式 */
td {
/* 单元格边框 */
border: 1px solid red;
/* 设置文字对齐方式 */
text-align: center;
}
</style>
html代码
<!-- 定义一个表格 -->
<table>
<!-- 第一行定义 -->
<tr>
<!-- 第一行定义三列 -->
<td>
内容1
</td>
<td>
内容2
</td>
<td>
内容3
</td>
</tr>
<!-- 定义第二行 -->
<tr>
<!-- 第二行定义三列 -->
<td>
内容1
</td>
<td>
内容2
</td>
<td>
内容3
</td>
</tr>
</table>
10.列表样式
10.1. 列表常用样式属性
属性 | 作用 | 举例 |
---|---|---|
list-style | 去掉前面的点或者序号 | ist-style :none |
float | 浮动 | float:left/right; |
css代码
<style>
/* 设置li列表样式 */
li{
/* 去掉li列表前的点或者序号 */
list-style: none;
/* 让li元素浮动向左对齐 */
float: left;
}
</style>
html代码
<!-- 定义一个无序列表 -->
<ul>
<!-- 定义三个超链接 -->
<!-- 空格是为了分隔超链接 -->
<li><a href="http://www.itcast.cn">itcast</a> </li>
<li><a href="http://www.baidu.com">baidu</a> </li>
<li><a href="http://www.google.com">google</a> </li>
</ul>