完成CSS-字体

0xcaffebabe · Dec 30, 2019 · 26532bf · 26532bf
1 parent baa710d
commit 26532bf
Show file tree

Hide file tree

Showing 6 changed files with 267 additions and 85 deletions.
diff --git a/README.md b/README.md
@@ -88,7 +88,7 @@
   <summary>前端开发</summary>
 
   - [HTML](./前端开发/HTML.md)
-  - [CSS](./前端开发/CSS.md)
+  - [CSS](./前端开发/CSS/nav.md)
   - [JavaScript](./前端开发/JavaScript.md)
   - [Bootstrap](./前端开发/Bootstrap.md)
   - [Jquery](./前端开发/Jquery.md)

diff --git a/前端开发/CSS.md b/前端开发/CSS.md
diff --git a/前端开发/CSS/CSS.md b/前端开发/CSS/CSS.md
@@ -0,0 +1,51 @@
+
+# CSS选择器
+
+## 扩展选择器
+
+```css
+/* 选择所有 */
+*{...} 
+
+/* 并集选择器 */
+选择器1,选择器2{}
+
+/* 子选择器 */
+选择器1 选择器2{}
+
+/* 父选择器 */
+选择器1>选择器2{}
+
+/* 属性选择器 */
+元素[属性=值]{}
+
+/* 伪类选择器 */
+元素:状态{}
+```
+
+# 属性
+
+## 字体文本
+
+- font-size
+- color
+- text-align
+- line-height
+
+## 背景
+
+## 边框
+
+## 尺寸
+
+- width
+- height
+
+## 盒子模型
+
+![](https://www.runoob.com/images/box-model.gif)
+
+
+- margin
+- padding
+- float
diff --git a/前端开发/CSS/nav.md b/前端开发/CSS/nav.md
@@ -0,0 +1,52 @@
+# CSS
+
+> 层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。当前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。
+
+## 使用方式
+
+- 内联
+
+```html
+<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
+```
+
+- 内嵌
+
+```html
+<head>
+<style type="text/CSS">
+    选择器（选择的标签） { 
+      属性1: 属性值1;
+      属性2: 属性值2; 
+      属性3: 属性值3;
+    }
+</style>
+</head>
+```
+
+- 外联
+
+```html
+<head>
+  <link rel="stylesheet" type="text/css" href="css文件路径">
+</head>
+```
+
+属性   | 作用
+---- | :-------------------------------------------------------
+rel  | 定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
+type | 定义所链接文档的类型，在这里需要指定为"text/CSS"，表示链接的外部文件为CSS样式表。我们都可以省略
+href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
+
+- 比较
+
+样式表   | 优点           | 缺点           | 使用情况    | 控制范围
+----- | ------------ | ------------ | ------- | ---------
+行内样式表 | 书写方便，权重高     | 没有实现样式和结构相分离 | 较少      | 控制一个标签（少）
+内部样式表 | 部分结构和样式相分离   | 没有彻底分离       | 较多      | 控制一个页面（中）
+外部样式表 | 完全实现结构和样式相分离 | 需要引入         | 最多，强烈推荐 | 控制整个站点（多）
+
+## NAV
+
+- [选择器](./选择器.md)
+- [字体样式](./字体样式.md)
diff --git a/前端开发/CSS/字体样式.md b/前端开发/CSS/字体样式.md
@@ -0,0 +1,85 @@
+# 字体样式
+
+## 单位
+
+![](http://img.voycn.com/images/2019/08/1b97119ee0c45d7631afd42dfbacd793.png)
+
+## 字体样式
+
+- font-size:大小
+
+```css
+p {  
+    font-size:20px; 
+}
+```
+
+- font-family:字体
+
+```css
+p{ font-family:"微软雅黑";}
+/* 可以同时指定多个字体，按从左到右选择 */
+p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}
+```
+
+CSS Unicode字体
+
+```css
+/* 表示设置字体为“微软雅黑”。 */
+font-family: "\5FAE\8F6F\96C5\9ED1";
+```
+
+- font-weight:字体粗细
+
+属性值     | 描述
+------- | :--------------------------------------
+normal  | 默认值（不加粗的）
+bold    | 定义粗体（加粗的）
+100~900 | 400 等同于 normal，而 700 等同于 bold 我们重点记住这句话
+
+-  font-style:字体风格
+
+| 属性   | 作用                                                    |
+| ------ | :------------------------------------------------------ |
+| normal | 默认值，浏览器会显示标准的字体样式  font-style: normal; |
+| italic | 浏览器会显示斜体的字体样式。                            |
+
+- font:综合设置字体样式
+
+```css
+font: 加粗 字号/行高/ 字体
+```
+
+```css
+font: 400 14px/24px "宋体";
+```
+
+### 字体总结
+
+| 属性        | 表示     | 注意点                                                       |
+| :---------- | :------- | :----------------------------------------------------------- |
+| font-size   | 字号     | 我们通常用的单位是px 像素，一定要跟上单位                    |
+| font-family | 字体     | 实际工作中按照团队约定来写字体                               |
+| font-weight | 字体粗细 | 记住加粗是 700 或者 bold  不加粗 是 normal 或者  400  记住数字不要跟单位 |
+| font-style  | 字体样式 | 记住倾斜是 italic     不倾斜 是 normal  工作中我们最常用 normal |
+| font        | 字体连写 | 1. 字体连写是有顺序的  不能随意换位置 2. 其中字号 和 字体 必须同时出现 |
+
+## 外观
+
+- 颜色
+
+| 表示表示       | 属性值                                  |
+| :------------- | :-------------------------------------- |
+| 预定义的颜色值 | red，green，blue，还有我们的御用色 pink |
+| 十六进制       | #FF0000，#FF6600，#29D794               |
+| RGB代码        | rgb(255,0,0)或rgb(100%,0%,0%)           |
+
+- color:文本颜色
+
+- text-align:文本水平对齐方式
+
+| 属性   |       解释       |
+| ------ | :--------------: |
+| left   | 左对齐（默认值） |
+| right  |      右对齐      |
+| center |     居中对齐     |
diff --git a/前端开发/CSS/选择器.md b/前端开发/CSS/选择器.md
@@ -0,0 +1,78 @@
+# CSS选择器
+
+## 选择器的作用
+
+> 找到特定的HTML页面元素
+
+## 基础选择器
+
+### 标签选择器
+
+```css
+标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
+```
+
+```css
+p {
+    font-size:14px;
+}
+```
+
+### 类选择器
+
+```css
+.类名  {   
+    属性1:属性值1; 
+    属性2:属性值2; 
+    属性3:属性值3;     
+}
+```
+
+```html
+<p class='类名'></p>
+```
+
+- 多类名
+
+```html
+<p class='class1 class2'></p>
+```
+
+### ID选择器
+
+```css
+#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
+```
+
+```html
+<p id="id名"></p>
+```
+
+- ID选择器与类选择器
+
+  - 类选择器我们在修改样式中，用的最多。
+  - id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的javascript 搭配使用。
+
+### 通配符选择器
+
+```css
+* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
+```
+
+```css
+* {
+  margin: 0;                    /* 定义外边距*/
+  padding: 0;                   /* 定义内边距*/
+}
+```
+
+### 基础选择器总结
+
+选择器    | 作用              | 缺点           | 使用情况  | 用法
+------ | --------------- | ------------ | ----- | --------------------
+标签选择器  | 可以选出所有相同的标签，比如p | 不能差异化选择      | 较多    | p { color：red;}
+类选择器   | 可以选出1个或者多个标签    | 可以根据需求选择     | 非常多   | .nav { color: red; }
+id选择器  | 一次只能选择器1个标签     | 只能使用一次       | 不推荐使用 | #nav {color: red;}
+通配符选择器 | 选择所有的标签         | 选择的太多，有部分不需要 | 不推荐使用 | * {color: red;}
+
+