一、CSS 快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 快速入门</title>
<!-- 解读
1. 在 head 标签内，出现了 <style type="text/css"></style>
2. 表示要写 css 内容
3. div{} 表示对 div 元素进行样式的指定
4. width: 300px(属性); 表示对 div 样式的具体指定, 可以有多个
5. 如果有多个，使用; 分开即可, 最后属性可以没有; 但是建议写上
6. 当运行页面时，div 就会被 div{} 渲染，修饰
-->
<style type="text/css">
div {
width: 200px;
height: 100px;
background-color: gold;
}
</style>
</head>
<body>
<!--先使用传统的方法-->
<div>hello, 北京</div>
<br/>
<div>hello, 上海</div>
<br/>
<div>hello, 天津</div>
<br/>
<div>hello, 深圳</div>
<br/>
</body>
</html>
二、CSS常用样式
1.常用样式-div样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div样式</title>
<style type="text/css">
div {
width: 400px;
height: 40px;
border: 1px solid green; /*3项缺一不可*/
font-size: 40px;
font-family: 华文新魏;
font-weight: bold;
margin-left: auto;
margin-right: auto; /*这两项调节的是div样式*/
text-align: center;
}
</style>
</head>
<body>
<div>你好，我是淳平讲Java</div>
</body>
</html>
2.常用样式-超链接去下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接去掉下划线</title>
<style type="text/css">
a {
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点击到百度</a>
</body>
</html>
3.常用样式-表格细线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格细线</title>
<style type="text/css">
/*
设置边框 : border: 1px solid black
将边框合并: border-collapse: collapse;
指定宽度： width
设置边框： 给 td, th 指定即可 border: 1px solid black;
解读
1. table, tr, td 表示组合选择器
2. 就是table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性
*/
table, tr, td {
width: 300px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td align=center colspan="3">星期一菜谱</td>
</tr>
<tr>
<td rowspan=2>素菜</td>
<td>青草茄子</td>
<td>花椒扁豆</td>
</tr>
<tr>
<td>小葱豆腐</td>
<td>炒白菜</td>
</tr>
<tr>
<td rowspan=2>荤菜</td>
<td>油闷大虾</td>
<td>海参鱼翅</td>
</tr>
<tr>
<td>红烧肉</td>
<td>烤全羊</td>
</tr>
</table>
</body>
</html>
4.常用样式-列表去修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表去修饰</title>
<style type="text/css">
ul {
/*说明:list-style:none表示去掉默认的修饰*/
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>三国演义</li>
<li>红楼梦</li>
<li>西游记</li>
<li>水浒传</li>
</ul>
</body>
</html>
三、CSS 使用三种方式
1.方式 1：在标签的 style 属性上设置 CSS 样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在标签的 style 属性上设置CSS样式</title>
</head>
<body>
<div style="width: 300px;height: 100px;background-color: red">hello, 北京</div>
<br/>
<div style="width: 300px;height: 100px;background-color: red">hello, 上海</div>
<br/>
<div style="width: 300px;height: 100px;background-color: red">hello, 天津</div>
<br/>
</body>
</html>
2.方式 2：在 head 标签中，使用 style 标签来定义需要的 CSS 样式（见之前代码）
3.方式 3：把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入
<link rel="stylesheet" href="./css/my.css" />
四、CSS选择器
1.元素选择器
2.ID 选择器
3.class 选择器（类选择器）
