CSS
CSS三种规则和三种位置

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

- 位置:样式是出现在标签开始位置,以style属性存在。
- 特点:只有这个标签有效(实际开发基本不同)
2.内部样式:

- 位置:写在HTML文件内部,放在style标签中。
- 特点:在本HTML文件种的多个标签起作用
3.外部样式:

- 位置:以CSS文件的方式存在HTML的外部。
- 特点:可以给多个HTML使用
三种样式的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的位置</title>
<style type="text/css">
h2 {
background-color: red;
}
</style>
<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;
}
CSS选择器
选择器名 | 格式 | 作用 |
---|
通用 | * | 选中所有的标签 |
标签 | 标签名 | 选中指定名称的标签 |
类 | .类名 | 选中指定类名的标签 |
ID | #id | 选中指定id的标签 |
选择器之间优先级
通用选择器 < 标签选择器 < 类选择器 < ID选择器
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
h1 {
color: red;
background-color: blue;
}
.aa {
color: orange;
background-color: yellow;
}
#one {
color: aqua;
background-color: gray;
}
* {
color: black;
font-size: 20px;
}
h6 {
color: magenta;
}
.cc {
color: gray;
}
#three {
color: red;
}
</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>
拓张选择器
扩展选择器 | 选择器符号 | 作用 |
---|
层级 | 父选择器 空格 子选择器 | 选中父选择器选中的子孙元素 |
属性 | 标签名[属性] | 选中带有指定属性名的标签 |
伪类 | 标签名:状态 | 选中指定标签的指定状态 |
并集 | 选择器1, 选择器2 | 多个选择器同时有效 |
代码
<!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>
CSS背景样式:
属性名 | 属性取值 |
---|
background-color | 背景颜色 |
background-image | 背景图片 |
background-repeat | 背景图片的平铺方式 |
background-position | 背景图片的位置 |
background-size | 背景图片的大小 |
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta>charset="UTF-8">
<title>背景样式</title>
<style type="text/css">
body {
background: pink url("img/girl1.jpg") repeat 50px 50px;
background-size: 100px 100px;
}
</style>
</head>
<body>
<h1>我是骑单车的女生</h1>
</body>
</html>
CSS文本样式和字体样式:
属性名 | 作用 |
---|
color | 设置颜色 |
line-height | 设置行高 |
text-decoration | 设置文本的修饰,下划线 |
text-indent | 首行缩进 |
text-align | 对齐方式 |
属性名 | 作用 |
---|
font-family | 设置字体 |
font-size | 设置字体大小 |
font-style | italic:文字倾斜 |
font-weight | bolder:文字加粗 |
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初相遇</title>
<style>
div {
width: 400px;
font-size: 14px;
}
h1 {
font-size: 18px;
color: #06f;
text-align: center;
}
p {
text-indent: 2em;
line-height: 22px;
}
#xiong {
font-weight: bolder;
font-style: italic;
color: blue;
}
p:last-child {
color: #390;
text-decoration: underline;
cursor: pointer;
}
.mei {
color: #f36;
font-size: 18px;
}
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>
CSS边框样式设置
属性 | 边框样式 |
---|
border-style | 边框的样式 |
border-width | 边框的宽度 |
border-color | 边框的颜色 |
border-radius | 边框的圆角 |
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS边框样式</title>
<style>
div {
width: 200px;
height: 200px;
border-radius: 20px;
border: solid lightcoral 20px;
margin: auto;
}
</style>
</head>
<body>
<div>
我是div....
</div>
</body>
</html>
两种盒子模型
属性 | 作用 |
---|
width | 设置宽度 |
height | 设置高度 |
| |
padding | 设置内边距 |
border | 设置边框 |
盒子模型的样式名 | 样式值 |
---|
box-sizing | 标准盒子模型:content-box |
box-sizing | 怪异盒子模型:border-box |
标准盒子

标准盒子计算方式
内容不变,盒子被撑大
实际宽度 = 设置宽度 + 左右内边距 + 左右边框
实际高度 = 设置高度 + 上下内边距 + 上下边框
怪异盒子模型

怪异盒子计算方式
盒子不变,内容被缩小
实际宽度 = 设置宽度
实际高度 = 设置高度
用户的注册案例

步骤
- 使用一个四行两列的表格布局,表格居中,宽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>
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;
}
#user,#pwd {
border: 1px solid black;
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>