Skip to content

C
Coding Tree

檀越@新空间 / Coding Tree

通知 2
Star 0
Fork 0
C
Coding Tree
提交 2f7bb84f 编写于 作者: 彭世瑜's avatar 彭世瑜
浏览文件
操作

fix

上级 c3dc08e8
显示空白变更内容
内联 并排
Showing with 514 addition and 3 deletion
blog/front-edn-learn/css-font.md 0 → 100644
浏览文件 @ 2f7bb84f
# CSS 字体和文本样式
## 字体大小
```css
/* 浏览器默认字体大小 16px */
font-size: 16px;
```
```html
<div style="font-size: 16px;">Hello World!</div>
<div style="font-size: 26px;">Hello World!</div>
```
<output>
<div style="font-size: 16px;">Hello World!</div>
<div style="font-size: 26px;">Hello World!</div>
</output>
## 字体粗细
```css
font-weight: 400;
```
| 属性值 | 数值 | 效果 |
| ------ | ---- | ---- |
| normal | 400 | 正常 |
| bold | 700 | 加粗 |
```html
<div style="font-weight: normal">Hello World!</div>
<div style="font-weight: bold">Hello World!</div>
```
<output>
<div style="font-weight: normal">Hello World!</div>
<div style="font-weight: bold">Hello World!</div>
</output>
## 字体样式
```css
font-style: normal;
```
| 属性值 | 效果 |
| ------ | ---- |
| normal | 正常 |
| italic | 倾斜 |
```html
<div style="font-style: normal;">Hello World!</div>
<div style="font-style: italic;">Hello World!</div>
```
<output>
<div style="font-style: normal;">Hello World!</div>
<div style="font-style: italic;">Hello World!</div>
</output>
## 字体系列
```css
/* 优先使用：微软雅黑 > 黑体 */
/* 如果客户端都没有这些字体就选择一种无衬线字体 */
font-family: 微软雅黑, 黑体, sans-serif;
```
| 操作系统 | 默认字体 |
| -------- | ----------- |
| windows | 微软雅黑 |
| Mac | PingFang SC |
常见字体系列
| 常见字体系列 | 特点 | 场景 | 该系列常见字体 |
| ------------------------ | ---------------------------------- | ------------ | --------------------- |
| 无衬线字体（sans-serif） | 文字笔画粗细均匀，并且首尾无装饰 | 网页 | 黑体、Arial |
| 衬线字体（serif） | 文字笔画粗细不均匀，并且首尾有装饰 | 报刊书籍 | 宋体、Times New Roman |
| 等宽字体（monospace） | 每个字母或文字的宽度相等 | 程序代码编写 | Consolas、 fira Code |
```html
<div style="font-family: 微软雅黑, 黑体, sans-serif;">Hello World!</div>
<div style="font-family: 宋体, Times New Roman, serif;">Hello World!</div>
<div style="font-family: Consolas, fira Code, monospace;">Hello World!</div>
```
<output>
<div style="font-family: 微软雅黑, 黑体, sans-serif;">Hello World!</div>
<div style="font-family: 宋体, Times New Roman, serif;">Hello World!</div>
<div style="font-family: Consolas, fira Code, monospace;">Hello World!</div>
</output>
## 文本缩进
```css
/* 首行缩进2个字符 */
text-indent: 2em;
```
取值
- 数字 + px
- 数字 + em(推荐：1em=当前标签的 font-size 大小)
```html
<p>Hello World!</p>
<p style="text-indent: 2em;">Hello World!</p>
```
<output>
<p>Hello World!</p>
<p style="text-indent: 2em;">Hello World!</p>
</output>
## 文本水平对齐方式
```css
text-align: center;
```
| 属性值 | 效果 |
| ------ | -------------- |
| left | 左对齐（默认） |
| center | 居中对齐 |
| right | 右对齐 |
可居中的标签
- 文本
- span a
- input img
内容居中需要给`父元素`设置居中属性
```html
<p>Hello World!</p>
<p style="text-align: center;">Hello World!</p>
```
<output>
<p>Hello World!</p>
<p style="text-align: center;">Hello World!</p>
</output>
## 文本修饰
```css
/* 常用于清除a标签默认下划线 */
text-decoration: none;
```
| 属性值 | 效果 |
| ------------ | ------ |
| underline | 下划线 |
| line-through | 删除线 |
| overline | 上划线 |
| none | 无 |
```html
<p style="text-decoration: none;">Hello World!</p>
<p style="text-decoration: underline;">Hello World!</p>
<p style="text-decoration: line-through;">Hello World!</p>
<p style="text-decoration: overline;">Hello World!</p>
```
<output>
<p style="text-decoration: none;">Hello World!</p>
<p style="text-decoration: underline;">Hello World!</p>
<p style="text-decoration: line-through;">Hello World!</p>
<p style="text-decoration: overline;">Hello World!</p>
</output>
## 行高
```css
line-height: 1.5;
```
取值
- 数字 + px
- 倍数（当前标签 font-size 的倍数）
文本高度
- 上间距
- 文本高度
- 下间距
应用：
- 单行文本垂直居中：line-height=元素父元素高度
- 取消上下间距：line-height=1
```html
<p style="line-height: 1">Hello World!</p>
<p style="line-height: 1.5;">Hello World!</p>
<p style="line-height: 3;">Hello World!</p>
```
<output>
<p style="line-height: 1">Hello World!</p>
<p style="line-height: 1.5;">Hello World!</p>
<p style="line-height: 3;">Hello World!</p>
</output>
## font 属性简写
层叠性：后面的样式覆盖前面的样式
复合属性
```css
font: [font-style font-weight] font-size/line-height font-family;
```
在线配置 font 简写形式
[https://developer.mozilla.org/en-US/docs/Web/CSS/font#live_sample](https://developer.mozilla.org/en-US/docs/Web/CSS/font#live_sample)
```html
<div style="font: italic normal 700 24px/3 sans-serif;">Hello World!</div>
```
<output>
<div style="font: italic normal 700 24px/3 sans-serif;">Hello World!</div>
</output>
blog/front-edn-learn/css.md 0 → 100644
浏览文件 @ 2f7bb84f
# CSS 层叠样式表
Cascading style sheets
## 语法规则
```
选择器 {
属性名: 属性值
}
```
## 书写位置
```
<head>
<title></title>
<style>
/* 这里写css */
</style>
<head>
```
## CSS 引入方式
| 引入方式 | 书写位置 | 作用范围 | 使用场景 |
| -------- | -------------------------- | -------- | ------------ |
| 内嵌式 | style 标签 | 当前页面 | 小案例 |
| 外链式 | link 标签引入单独 css 文件 | 多个页面 | 项目中 |
| 行内式 | 标签 style 属性中 | 当前标签 | 配合 js 使用 |
（1）内嵌式
- CSS 写在 style 标签中
- style 标签可以写在页面任意位置，一般放在 head 标签中
[](demo/css-1.html ':include :type=code')
[](demo/css-1.html ':include height=165')
（2）外链式
- CSS 写在单独的`.css`文件中
- 通过 link 标签引入到网页中
[](demo/css-2.css ':include :type=code')
[](demo/css-2.html ':include :type=code')
[](demo/css-2.html ':include height=60')
（3）行内式
- CSS 写在标签 style 属性中
```html
<div style="color: green; background-color: #f1f1f1;">
这是一段设置了css样式的文字
</div>
```
<output>
<div style="color: green; background-color: #f1f1f1;">这是一段设置了css样式的文字</div>
</output>
## 基础选择器
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
（1）标签选择器
```
标签名 {
属性名：属性值;
}
```
[](demo/css-3.html ':include :type=code')
[](demo/css-3.html ':include height=50')
（2）类选择器
```
.类名{
属性名：属性值;
}
```
- 合法的类名：数字、字母、下划线、中划线
- 一个元素可以有多个类名，空格隔开
[](demo/css-4.html ':include :type=code')
[](demo/css-4.html ':include height=140')
（3）id 选择器
```
#元素id{
属性名：属性值;
}
```
- 页面中唯一，不能重复
- 一个标签只能有一个 id
- id 选择器一般与 js 配合使用
[](demo/css-5.html ':include :type=code')
[](demo/css-5.html ':include height=50')
（4）通配符选择器
```
*{
属性名：属性值;
}
```
- 选中页面所有标签
- 一般用于统一设置页面样式
```css
/* 清除内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
```
blog/front-edn-learn/demo/css-1.html 0 → 100644
浏览文件 @ 2f7bb84f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
/* 这里是注释，快捷键ctrl + / */
/* 文字颜色设置为红色 */
color: red;
/* 字体大小设置为30像素 */
font-size: 30px;
/* 背景颜色 */
background-color: green;
/* 设置宽度和高度 */
width: 600px;
height: 100px;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<p>这是一段设置了css样式的文字</p>
</body>
</html>
\ No newline at end of file
blog/front-edn-learn/demo/css-2.css 0 → 100644
浏览文件 @ 2f7bb84f
/* css-2.css */
p {
color: red;
}
blog/front-edn-learn/demo/css-2.html 0 → 100644
浏览文件 @ 2f7bb84f
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="./css-2.css">
</head>
<body>
<p>这是一段设置了css样式的文字</p>
</body>
</html>
\ No newline at end of file
blog/front-edn-learn/demo/css-3.html 0 → 100644
浏览文件 @ 2f7bb84f
<style>
p {
color: red;
}
</style>
<p>你好，世界</p>
\ No newline at end of file
blog/front-edn-learn/demo/css-4.html 0 → 100644
浏览文件 @ 2f7bb84f
<style>
.red {
color: red;
}
.size {
font-size: 60px;
}
</style>
<div class="red">你好，世界</div>
<div class="red size">你好，世界</div>
\ No newline at end of file
blog/front-edn-learn/demo/css-5.html 0 → 100644
浏览文件 @ 2f7bb84f
<style>
#name {
color: green;
}
</style>
<div id="name">你好，世界</div>
\ No newline at end of file
blog/front-edn-learn/demo/form-1.html 0 → 100644
浏览文件 @ 2f7bb84f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Form Demo</title>
</head>
<body>
<h2>个人信息</h2>
<form action="">
<p>姓名:
<input type="text"
placeholder="姓名">
</p>
<p>性别:
<label><input type="radio"
name="sex"
checked>男</label>
<label><input type="radio"
name="sex">女</label>
</p>
<p>爱好:
<label><input type="checkbox"
checked>足球</label>
<label><input type="checkbox">篮球</label>
<label><input type="checkbox">羽毛球</label>
</p>
<p>现居：<select>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
</select>
</p>
<p>个人简介：
<br />
<textarea cols="60"
rows="10"></textarea>
</p>
<input type="submit"
value="提交">
<button type="reset">重置</button>
</form>
</body>
</html>
\ No newline at end of file
blog/front-edn-learn/element.md
浏览文件 @ 2f7bb84f
...@@ -495,7 +495,6 @@ option 选项 ...@@ -495,7 +495,6 @@ option 选项
<output> <output>
<input type="radio" name="sex" id="man"> <input type="radio" name="sex" id="man">
<label for="man">男</label> <label for="man">男</label>
<label><input type="radio" name="sex">女</label> <label><input type="radio" name="sex">女</label>
</output> </output>
...@@ -543,3 +542,9 @@ hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world ...@@ -543,3 +542,9 @@ hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world
&copy; &copy;
</output> </output>
## 综合案例
[](demo/form-1.html ':include :type=code')
[](demo/form-1.html ':include height=470')
blog/front-edn-learn/index.md
浏览文件 @ 2f7bb84f
...@@ -10,9 +10,14 @@ ...@@ -10,9 +10,14 @@
[菜鸟教程-HTML 教程- (HTML5 标准)](https://www.runoob.com/html/html-tutorial.html) [菜鸟教程-HTML 教程- (HTML5 标准)](https://www.runoob.com/html/html-tutorial.html)
[https://developer.mozilla.org/zh-CN/](https://developer.mozilla.org/zh-CN/)
## 内容 ## 内容
1. [HTML基本认知](blog/front-edn-learn/basic.md) 1. [HTML 基本认知](blog/front-edn-learn/basic.md)
2. [标签元素](blog/front-edn-learn/element.md) 2. [标签元素](blog/front-edn-learn/element.md)
3. [CSS 层叠样式表](blog/front-edn-learn/css.md)
4. [CSS字体和文本样式](blog/front-edn-learn/css-font.md)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或