文章目录
- 为什么需要css
- CSS语法
- CSS的组成
- css注释：
- 快速入门示例：
- 常用样式
- 字体颜色和边框
- 颜色介绍
- 颜色示例：
- 边框
- 边框的宽度与高度
- 字体样式
- 背景样式
- 文本居中
- 字体颜色和边框
- 颜色介绍
- 颜色示例：
- 边框
- 边框的宽度与高度
- 字体样式
- 背景样式
- 文本居中
- css使用三种方式
- CSS选择器
- 元素选择器
- ID选择器
- class选择器
学习参考：CSS 教程 (w3school.com.cn)
为什么需要css
- 在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，费心费力。所以CSS就出现了。
- 使用CSS将HTML页面的 内容与样式分离提高web开发的工作效率(针对前端开发）
- CSS 可以让 html 元素(内容)+ 样式(CSS)分离，更好的控制页面
CSS语法
-
CSS的组成
-
-
选择器
-
声明
- 由属性与值组成
- 用分号分隔
-
-
css注释：
- /注释内容/
快速入门示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 快速入门</title>
</head>
<body>
<div>hello,北京</div>
<br/>
<div>hello,上海</div>
<br/>
<div>hello,天津</div>
<br/>
</body>
</html>
<!--课堂代码-->
<!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>
常用样式
字体颜色和边框
-
颜色介绍
- 颜色可以写颜色名 比如 green，也可以写rgb 值比如rgb(200,200,200)和十六进制表示值比如#70809
-
颜色示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>颜色</title> <style type="text/css"> /* 为了讲课方便，我们就在这里写 css 样式 */ /* 说明: 颜色可以写颜色名 比如 green， 也可以写 rgb 值 比如 rgb(200, 200, 200) 和十六进制表示值比如 #708090 color: rgb(255, 222, 1); // color: #ff7d44; // color: red; */ div { /* 有三种方式，指定颜色 1. 英文 2. 16进制 #ff7d44 [使用最多] 3. 三原色 rgb(100, 100, 100) */ color: #ff7d44; } </style> </head> <body> <div>韩顺平教育</div> </body> </html>
-
-
边框
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框</title> <style type="text/css"> div { width: 300px; height: 100px; border: 1px dashed blue; } </style> </head> <body> <div>韩顺平教育</div> </body> </html>
-
-
-
边框的宽度与高度
-
介绍：
- 宽度/高度像素值：100px；也可以是百分比值：50%
-
代码示例
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景</title> <style> div { width: 200px; height: 100px; background-color: #ff7d44; } </style> </head> <body> <div>hello，word</div> </body> </html>
-
-
字体样式
-
介绍
- font-size: 指定大小，可以按照像素大小
- font-weight : 指定是否粗体
- font-family : 指定类型
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体样式</title> <style type="text/css"> /* */ div { border: 1px solid black; width: 300px; font-size: 40px; font-weight: bold; font-family: '华文新魏', sans-serif; } </style> </head> <body> 说明: 1. font-size: 指定大小，可以按照像素大小<br> 2. font-weight : 指定是否是粗体<br> 3. font-family : 指定字体类型<br> <div>hello，word</div> </body> </html>
-
背景样式
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景</title> <style> div { width: 200px; height: 100px; background-color: #ff7d44; } </style> </head> <body> <div>hello，word</div> </body> </html>
-
文本居中
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本居中</title>
<style type="text/css">
div {
border: 1px solid blue; /*顺序不要求*/
width: 300px;
background: aliceblue;
font-size: 40px;
font-weight: bold;
font-family: '新宋体', sans-serif;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</head>
<body>
<div>hello，word</div>
</body>
</html>
字体颜色和边框
-
颜色介绍
- 颜色可以写颜色名 比如 green，也可以写rgb 值比如rgb(200,200,200)和十六进制表示值比如#70809
-
颜色示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>颜色</title> <style type="text/css"> /* 为了讲课方便，我们就在这里写 css 样式 */ /* 说明: 颜色可以写颜色名 比如 green， 也可以写 rgb 值 比如 rgb(200, 200, 200) 和十六进制表示值比如 #708090 color: rgb(255, 222, 1); // color: #ff7d44; // color: red; */ div { /* 有三种方式，指定颜色 1. 英文 2. 16进制 #ff7d44 [使用最多] 3. 三原色 rgb(100, 100, 100) */ color: #ff7d44; } </style> </head> <body> <div>韩顺平教育</div> </body> </html>
-
-
边框
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框</title> <style type="text/css"> div { width: 300px; height: 100px; border: 1px dashed blue; } </style> </head> <body> <div>韩顺平教育</div> </body> </html>
-
-
-
边框的宽度与高度
-
介绍：
- 宽度/高度像素值：100px；也可以是百分比值：50%
-
代码示例
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景</title> <style> div { width: 200px; height: 100px; background-color: #ff7d44; } </style> </head> <body> <div>hello，word</div> </body> </html>
-
-
字体样式
-
介绍
- font-size: 指定大小，可以按照像素大小
- font-weight : 指定是否粗体
- font-family : 指定类型
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体样式</title> <style type="text/css"> /* */ div { border: 1px solid black; width: 300px; font-size: 40px; font-weight: bold; font-family: '华文新魏', sans-serif; } </style> </head> <body> 说明: 1. font-size: 指定大小，可以按照像素大小<br> 2. font-weight : 指定是否是粗体<br> 3. font-family : 指定字体类型<br> <div>hello，word</div> </body> </html>
-
背景样式
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景</title> <style> div { width: 200px; height: 100px; background-color: #ff7d44; } </style> </head> <body> <div>hello，word</div> </body> </html>
-
文本居中
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本居中</title>
<style type="text/css">
div {
border: 1px solid blue; /*顺序不要求*/
width: 300px;
background: aliceblue;
font-size: 40px;
font-weight: bold;
font-family: '新宋体', sans-serif;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</head>
<body>
<div>hello，word</div>
</body>
</html>
css使用三种方式
-
在标签的 style 属性上设置CSS样式
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在标签的style属性上设置CSS样式</title> </head> <body> <div style="color: red;">hello,北京</div> <br/> <div style="color: blue;">hello,上海</div> <br/> <div style="color: green;">hello,天津</div> <br/> </body> </html>
-
-
-
在head标签中，使用style标签来定义需要的CSS样式
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在head标签中，使用style标签来定义需要的CSS样式</title> <style> div { color: blue; } span { color: red; } </style> </head> <body> <div>hello,北京</div> <br/> <div>hello,上海</div> <br/> <span>hello,span</span> </body> </html>
-
-
-
把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入
-
代码示例
-
/* test.css 内容 */ div { width: 300px; height: 100px; /* 这是一个注释信息 */ background: beige; } span { border: 3px solid red; } =================================== use-css-style.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入</title> <!-- link 标签专门用来引入 css 样式代码 --> <link rel="stylesheet" href="test.css"/> </head> <body> <div>hello, 北京~</div> <br/> <div>hello, 上海</div> <br/> <span>hello, span</span> </body> </html>
-
-
CSS选择器
-
元素选择器
-
通常是某个 HTML 元素， 比如 p、h1、adiv等
-
代码示例
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素选择器</title> </head> <body> <h1>hello，word</h1> <p>hello, world~</p> </body> </html> 
-
-
-
ID选择器
-
可以为标有特定id的HTML元素指定特定的样式。
-
id选择器以"#"来定义
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id 选择器</title> <!-- 我们就在这里写css样式 解读： 1. 使用id选择器，需要先在要修饰元素指定id属性, id值是程序员自己指定 2. id 是唯一的，不能重复 3. 在<style> 标签中指定id选择器时，前面需要有 #id值 --> <style type="text/css"> #hsp1 { color: gold; } #css2 { color: green; } </style> </head> <body> <h1 id="hsp1">hello，word</h1> <p id="css2">hello, world~</p> </body> </html> 
-
-
-
class选择器
-
，可以通过 class 属性选择去使用这个样式
-
基本语法：
- .class 属性值{属性:值；}
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类选择器</title> <!-- 我们就在这里写css样式 解读： 1. 使用class选择器，需要在被修饰的元素上，设置class属性，属性值由程序员指定 2. class 属性的值，可以重复 3. 需要在 <style></style> 指定类选择器的具体样式，前面需要是 .类选择器名 --> <style type="text/css"> .css1 { color: red; } .css2 { color: sandybrown; } </style> </head> <body> <div class="css1">hello，word</div> <div class="css1">hello，word 8</div> <p class="css2">hello, world~</p> </body> </html> 
-
-
文本来源：韩顺平java课程笔记
