您的位置：首页 > Web前端 > CSS

CSS

2019-08-11 12:16 1216 查看

《HTML的表单与CSS样式-笔记》

CSS介绍

目标

学习CSS概念和作用

HTML: 用于网页的结构(毛坯房)

概念和作用

CSS: Cascading Style Sheet ? 层叠样式表，对网页进行美化的

CSS: 用于网页的美化(装修)

案例：CSS的作用

将一个表格中所有的单元格居中，如果使用以前的方式，每个td或tr都要设置align属性为center，而使用css则方便得多。

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS介绍</title>
<!--type="text/css"表示是一个CSS样式的代码-->
<style type="text/css">
/*现在可以一次选择所有td,设置相应的属性*/
td {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<table border="1" width="400">
<tr>
<!--以前的做法,每个td都要设置成align=center,内容要添加font-->
<td align="center"><font color="blue">111</font></td>
<td align="center"><font color="blue">111</font></td>
<td align="center"><font color="blue">111</font></td>
</tr<
3ff7
/span>>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table>
</body>
</html>

小结

CSS的好处	描述
功能上	设置网页的效果比HTML更强大
耦合性	HTML和CSS代码是分离的，耦合性低

CSS的规则和3种位置

目标

学习CSS的规则
学习CSS出现的三种位置

CSS规则

规范	说明
大括号	所有的样式写在大括号中
样式名	左边是样式的名字，使用小写。如果有多个单词，使用-分隔
样式值	每个样式值都有固定的取值
样式结尾	每条样式以分号结尾
注释	与Java的多行注释一样 /* */

CSS的位置

行内样式

位置：样式是出现在标签开始位置，以style属性存在。
特点：只有这个标签有效(实际开发基本不同)

内部样式

位置：写在HTML文件内部，放在style标签中。
特点：在本HTML文件种的多个标签起作用

外部样式

位置：以CSS文件的方式存在HTML的外部。
特点：可以给多个HTML使用

提问：以后三种样式哪种会用得比较多？

以后使用外部样式较多，但我上课为了看得更方便，使用内部样式。

三种样式的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的位置</title>

<!--内部样式:在html中使用style标签-->
<style type="text/css">
h2 {
background-color: red;
}
</style>

<!--外部样式
rel: 表示html文件和css文件之间的关系,必须指定
href: 指定外部css文件的位置
type: 指定文件的类型-->
<link rel="stylesheet" href="css/01_css.css" type="text/css"/>

</head>
<body>
<!--行内样式:直接在标签上添加样式-->
<h1 style="background-color: blue">我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
</body>
</html>

css/01_css.css:

h3 {
background-color: deeppink;
}

小结

行内样式有什么特点？
```
只有本标签可以使用
```
内部样式有什么特点？
```
本HTML文件可以使用
```
外部样式有什么特点？
```
多个HTML文件可以使用
```

三种位置的样式出现同名的样式会怎么样？

行内样式 > 内部样式和外部样式，谁在下面就用谁

CSS基本选择器(重点)

目标

学习CSS的四种基本选择器

CSS选择器作用

选中要设置样式的标签

语法格式

<h1>我们是害虫h1</h1>
<h1>我们是害虫h2</h1>
<h4 class="c4" id="i4">我们是害虫h4</h4>

选择器之间优先级

通用选择器 < 标签选择器 < 类选择器 < ID选择器

案例

通过代码演示上面CSS的各种基本选择器的使用

效果

代码

<!DOCTYPE html>
<html lang="en">
<head&g
8000
t;
<meta charset="UTF-8">
<title>基本选择器</title>

<style type="text/css">
/*标签选择器:选中所有的h1标签*/
h1 {
color: red;
background-color: blue;
}

/*类选择器:选择所有class属性为aa的标签*/
.aa {
color: orange;
background-color: yellow;
}

/*ID选择器:选中所有id为one的标签*/
#one {
color: aqua;
background-color: gray;
}

/*通用选择器:选择所有的标签*/
* {
color: black;
font-size: 20px;
}
h6 {
color: magenta;
}
.cc {
color: gray;
}
#three {
color: red;
}
/*选择器的优先级: 通用选择器 < 标签选择器 < 类选择器 < id选择器*/
</style>
</head>
<body>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h2 class="aa">我是h2</h2>
<h2 class="aa">我是h2</h2>
<h3 class="aa">我是h3</h3>
<h3 class="aa">我是h3</h3>
<h4 class="bb">我是h4</h4>
<h5 id="two">我是h5</h5>
<h6 class="cc" id="three">我是h6</h6>
</body>
</html>

小结

选择器名	格式	作用
通用	*	选中所有的标签
标签	标签名	选中指定名称的标签
类	.类名	选中指定类名的标签
ID	#id	选中指定id的标签

选择器的优先级

通用选择器 < 标签选择器 < 类选择器 < ID选择器

扩展选择器的使用

目标

四种扩展选择器的使用

什么是扩展选择器

在基本选择器的基础上，进行组合实现更加复杂选择

常用的扩展选择器

扩展选择器案例

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style type="text/css">
/*
层级选择器
符号: 空格
作用: 选中父标签的下子孙标签
*/
ol li {
color: red;
}
/*
属性选择器
符号: []
标签名[属性名] 作用: 选择标签名中含有属性名的标签
标签名[属性名=值] 作用: 选择标签名中含有属性名=值的标签
*/
input[type="text"] {
background-color: blue;
}

/*
伪类选择器
符号: :
作用: 设置标签在某种状态下的样式
*/
/*正常状态*/
a:link {
text-decoration: none;
}
/*访问过的*/
a:visited {
color: green;
}

/*正在激活*/
a:active {
color: yellow;
}
/*鼠标悬浮*/
a:hover {
color: aqua;
}

/*得到焦点*/
input:focus {
background-color: pink;
}

/*并集选择器
符号: ,
作用: 同时选中多个标签*/
p,span {
color: gold;
}
</style>
</head>
<body>
<ol>
<li>红烧肉</li>
<li>东坡肉</li>
</ol>
<div>
<ul>
<li>水煮鱼</li>
<li>酸菜鱼</li>
</ul>
</div>

用户名:<input type="text"><br/>
密码:<input type="password"><br/>
qq:<input ><br/>
<hr/>
<a href="#1">这是链接1</a><br/>
<a href="#2">这是链接2</a><br/>
<a href="#3">这是链接3</a><br/>
<a href="#4">这是链接4</a><br/>

<p>
ddddd
</p>

<span>ssssss</span>
</body>
</html>

小结

扩展选择器	选择器符号	作用
层级	父选择器空格子选择器	选中父选择器选中的子孙元素
属性	标签名[属性]	选中带有指定属性名的标签
伪类	标签名:状态	选中指定标签的指定状态
并集	选择器1, 选择器2	多个选择器同时有效

CSS背景样式

目标

学习CSS背景样式的设置

每个标签都可以设置背景,我们学习的时候以标签为例

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta>charset="UTF-8">
<title>背景样式</title>
<style type="text/css">
body {
/*    !*背景色*!
background-color: pink;
!*背景图片*!
background-image: url("img/girl1.jpg");
!*平铺的方式*!
background-repeat: repeat;
!*平铺起始位置*!
background-position: 50px 50px;*/

/*背景色  alt+enter */
/*背景图片*/
/*平铺的方式*/
/*平铺起始位置*/
background: pink url("img/girl1.jpg") repeat 50px 50px;

/*修改背景图片大小*/
background-size: 100px 100px;
}
</style>
</head>
<body>
<h1>我是骑单车的女生</h1>
</body>
</html>

小结

属性名	属性取值
background-color	背景颜色
background-image	背景图片
background-repeat	背景图片的平铺方式
background-position	背景图片的位置
background-size	背景图片的大小

CSS常用文本样式和字体样式

目标

CSS中常用文本样式和字体样式的设置
制作案例：诗歌

文本样式

字体样式

字体样式会改变文字的形状

案例：诗歌

步骤

诗放在div的层中，宽400px，全文字体大小14px;
标题放在h1中。每段文字放在p中
标题文字大小18px，颜色#06F，居中对齐
每段文字缩进2em
段中的行高是22px
“胸怀中满溢着幸福，只因你就在我眼前”,加粗，倾斜，蓝色
最后一段，颜色#390; 下划线，鼠标移上去指针变化。
美字加粗，颜色color:#F36，大小18px;
文席慕容，三个字，12px，颜色#999，不加粗

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初相遇</title>

<style>
div {
/*诗放在div的层中，宽400px，全文字体大小14px*/
width: 400px;
font-size: 14px;
}

h1 {
/*标题文字大小18px，颜色#06F，居中对齐*/
font-size: 18px;
color: #06f;
text-align: center;
}

p {
/*每段文字缩进2em*/
text-indent: 2em;
/*段中的行高是22px*/
line-height: 22px;
}

/*"胸怀中满溢着幸福，只因你就在我眼前",加粗，倾斜，蓝色*/
#xiong {
font-weight: bolder;
font-style: italic;
color: blue;
}

/*最后一段，颜色#390; 下划线，鼠标移上去指针变化。*/
p:last-child {
color: #390;
text-decoration: underline;
cursor: pointer;
}

/*美字加粗，颜色color:#F36，大小18px;*/
.mei {
color: #f36;
font-size: 18px;
}

/*文席慕容，三个字，12px，颜色#999，不加粗*/
h1 span {
font-size: 12px;
color: #999;
font-weight: normal;
}
</style>
</head>
<body>
<div>
<h1>初相遇 <span>文/席慕容</span></h1>
<p>
<span class="mei">美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。
</p>
<p>
我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。
<span id="xiong">胸怀中满溢着幸福，只因你就在我眼前，</span>对我微笑，一如当年。
</p>
<p>
我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。
</p>
</div>
</body>
</html>

小结

属性名	作用
color	设置颜色
line-height	设置行高
text-decoration	s设置文本的修饰，下划线
text-indent	s首行缩进
text-align	d对齐方式

属性名	作用
font-family	设置字体
font-size	s设置字体大小
font-style	italic:文字倾斜
font-weight	bolder：文字加粗

CSS边框样式设置

目标

学习元素的边框样式设置

所有的元素都可以设置边框，我们这里以div为例

边框的样式

案例：边框的使用

步骤

宽和高分别是200px，边框使用double线形，红色，10px粗细
对div整个居中

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS边框样式</title>

<style>
/*1.宽和高分别是200px，边框使用double线形，红色，10px粗细*/
/*2.对div整个居中*/
div {
width: 200px;
height: 200px;
/*边框的线形*/
/*border-style: double;
border-width: 10px;
border-color: gray;*/
border-radius: 20px;

/*边框的线形,颜色,宽度可以合起来写*/
border: solid lightcoral 20px;

/*块级元素居中:margin: auto;*/
margin: auto;
}
</style>
</head>
<body>
<div>
我是div....
</div>
</body>
</html>

关于块级元素居中

小结

属性	边框样式
border-style	边框的样式
border-width	边框的宽度
border-color	边框的颜色
border-radius	边框的圆角

两种盒子模型

目标

学习两种盒子模型的区别

概述

任何一个网页元素包含由这些属性组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)，这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。

内容（content）就是盒子里装的东西
内边距(padding)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
边框(border)就是盒子本身了；
外边界(margin)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。

[外链图片转存失败(img-SFAeXYzj-1565495211891)(/boxs.png)]

盒子模型的属性

网页中的每一个元素都是一个盒子

如何计算盒子的尺寸

盒子模型分为两种，分别是：标准盒模型(content-box) 和 怪异盒模型(border-box)。绝大多数元素的尺寸默认是按照标准盒模型计算的。下面是元素的尺寸分别在两种盒模型下计算规则：

标准盒子模型

标准盒子计算方式

内容不变，盒子被撑大

实际宽度 = 设置宽度 + 左右内边距 + 左右边框
实际高度 = 设置高度 + 上下内边距 + 上下边框

怪异盒子模型

怪异盒子计算方式

盒子不变，内容被缩小

实际宽度 = 设置宽度
实际高度 = 设置高度

案例：盒子模型

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>

<style>
/*标准盒子: 内容不变,宽高被撑大*/
.one {
box-sizing: content-box; /*默认就是标准盒子*/
border: 15px solid gray; /*边框的样式:粗细 线型 颜色*/
width: 200px;
height: 200px;
padding: 10px;
}

/*怪异盒子: 宽高就是指定大小,内容会被缩小*/
.two {
box-sizing: border-box;
border: 15px solid gray;
width: 200px;
height: 200px;
padding: 10px;
}
</style>
</head>
<body>

<div class="one">
标准盒子
</div>

<div class="two">
怪异盒子
</div>
</body>
</html>

小结

属性	作用
width	设置宽度
height	设置高度

padding	设置内边距
border	设置边框

盒子模型的样式名	样式值
box-sizing	标准盒子模型：content-box
box-sizing	怪异盒子模型：border-box

用户的注册案例

目标

使用CSS样式排版出如图所示的效果

步骤

使用一个四行两列的表格布局，表格居中，宽300px，高180px，边框1px solid gray
table添加背景，不平铺，图片背景的宽度和高度与table的宽和高一样
第一行和第四行跨2列，第一行是标题th，第四行是放按钮。使用图片按钮
td的文字居中对齐，字体大小14px
用户名和密码文本框使用类样式，也可以使用其它选择器。宽150px，高32px，边框用实线，圆角5px，1个宽度，黑色
使用伪类样式，当鼠标移动到文本框上的时候，变成虚线橙色边框。得到焦点，背景色变成浅黄色
文本框前面有头像，密码框前面有键盘

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<style>
/*宽300px，高180px; 边框solid 1px gray*/
table {
width: 300px;
height: 180px;
border: solid 1px gray;
/*表格居中*/
margin: auto;
/*背景图片*/
background-image: url("img/bg1.jpg");
background-size: 300px 180px;
/*圆角*/
border-radius: 10px;
}

td {
text-align: center;
}

/*同时选中2个*/
#user,#pwd {
border: 1px solid black;
/*宽150px，高32px*/
width: 150px;
height: 32px;
border-radius: 5px;
}

#user {
background-image: url("img/head.png");
/*不平铺*/
background-repeat: no-repeat;
/*左内边距*/
padding-left: 35px;
}

#pwd {
background-image: url("img/keyboard.png");
/*不平铺*/
background-repeat: no-repeat;
/*左内边距*/
padding-left: 35px;
}

/*伪类样式，当鼠标移动到文本框上的时候，变成虚线橙色边框。得到焦点，背景色变成浅黄色*/
#user:hover,#pwd:hover {
border: orange dashed 1px;
}

#user:focus,#pwd:focus {
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">黑马旅游注册</th>
</tr>
<tr>
<td>用户名:</td>
<td>
<input type="text" name="user" id="user">
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="pwd" id="pwd">
</td>
</tr>
<tr>
<td colspan="2">
<input type="image" src="img/regbtn.jpg">
</td>
</tr>
</table>
</body>
</html>

小结

一个form表单，里面嵌套一个四行两列的table，使用了背景样式，边框样式，文字样式

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航