css
This commit is contained in:
parent
04ea9eecd7
commit
1e78ce19f9
106
css/css简介.md
Normal file
106
css/css简介.md
Normal file
@ -0,0 +1,106 @@
|
||||
# css(层叠样式表)
|
||||
|
||||
### css 介绍
|
||||
|
||||
层叠样式表（**C**ascading **S**tyle **S**heet，简称：CSS）是为网页添加样式的代码。
|
||||
|
||||
css 和html 类似，不是真正的编程语言，甚至不是标记语言，它是一门样式表语言，也就是说我们可以用它来选择性的为HTML元素添加样式
|
||||
|
||||
### css 使用
|
||||
|
||||
##### 在html 中使用css
|
||||
|
||||
- 行内样式
|
||||
|
||||
在元素标签中写入<style> 属性，将样式写在属性中
|
||||
|
||||
格式为： style=" 属性1 : 值； 属性2 : 值；属性3 : 值；"多个属性用分号“ ; ”隔开。
|
||||
|
||||
- 内联样式
|
||||
在<head>标签中加入<style>标签将CSS样式表写到该标签中。值后跟分号。
|
||||
|
||||
格式：
|
||||
|
||||
```
|
||||
.class{
|
||||
属性1 : 值；
|
||||
属性2ytu : 值；
|
||||
属性3 : 值 ；
|
||||
}
|
||||
```
|
||||
|
||||
- 外联样式
|
||||
|
||||
在<head>标签中用<link>标签引入
|
||||
|
||||
```
|
||||
<link rel="stylesheet" type="text/css" href="./css/layout.css" >
|
||||
<!--href中写css样式表存放的路径-->
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### css 语法
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
p{
|
||||
color:red
|
||||
}
|
||||
```
|
||||
|
||||
> p 是选择器，可以选择一个或多个html 元素
|
||||
>
|
||||
> color:red 整体是声明 。 一个单独的规则，用来指定添加样式元素的属性
|
||||
>
|
||||
> color 是属性（改 变HTML元素样式的途径），在等号左边 示例中的color 是p 元素的属性
|
||||
>
|
||||
> red 是属性值 在冒号右边
|
||||
|
||||
规则：
|
||||
|
||||
> - 每个规则集，除了选择器部分，都应该包含在成对的大括号（{}）里
|
||||
> - 每个声明里要用冒号（:）将属性和属性值分隔开
|
||||
> - 每个规则集里 要用分号（;）将各个声明分隔开
|
||||
|
||||
修改多个属性：
|
||||
|
||||
```
|
||||
p {
|
||||
color: red;
|
||||
width: 500px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### css 选择器
|
||||
|
||||
| 选择器名称 | 选择的内容 | 示例 |
|
||||
| ------------------------ | ------------------------------------------------ | -------------------------------------------- |
|
||||
| 标签选择器（元素选择器） | 所有是这个标签的HTML元素 | p 选择整个文件中的所有p 标签 |
|
||||
| id选择器 | 具有特定id 的html元素 | #my 选择标签内id为‘my’的元素 |
|
||||
| 类选择器 | 带有class=''特定类的元素 | .nav 选择标签内class="nav"的元素 |
|
||||
| 属性选择器 | 拥有特定属性的元素 | img[src] 选择<img src="xxx"/> 而不是 <img /> |
|
||||
| 伪类选择器 | 特殊状态下的特殊元素 | a:hover 鼠标悬停在链接上时的样式 |
|
||||
| 通用选择器 | 所有元素 | * |
|
||||
| E,F | 同时匹配所有的E和F元素，E，F之间用逗号分隔 | div , p |
|
||||
| E F | 匹配所有属于E元素后代的F元素，E和F之间用空格分隔 | div p |
|
||||
| E>F | 匹配所有E元素的子元素F | div > p |
|
||||
| E+F | 匹配所有紧跟E元素之后的同级元素F | div+p |
|
||||
|
||||
#### css 伪类
|
||||
|
||||
| 选择器 | 含义 |
|
||||
| ------------- | ------------------------- |
|
||||
| E:first-child | 匹配父元素的第一个子元素 |
|
||||
| E:hover | 鼠标悬停 |
|
||||
| E:focus | 获得焦点 |
|
||||
| E:active | 鼠标按下还没释放的元素 |
|
||||
| E:before | 在E元素之前插入生成的内容 |
|
||||
| E:after | 在E元素之后插入生成的内容 |
|
||||
|
||||
|
||||
|
||||
BIN
css/弹性盒子.assets/image-20201218164425451.png
Normal file
BIN
css/弹性盒子.assets/image-20201218164425451.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
css/弹性盒子.assets/image-20201218165134275.png
Normal file
BIN
css/弹性盒子.assets/image-20201218165134275.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
css/弹性盒子.assets/image-20201218165414077.png
Normal file
BIN
css/弹性盒子.assets/image-20201218165414077.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
css/弹性盒子.assets/image-20201218165546847.png
Normal file
BIN
css/弹性盒子.assets/image-20201218165546847.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
css/弹性盒子.assets/image-20201218165635626.png
Normal file
BIN
css/弹性盒子.assets/image-20201218165635626.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
css/弹性盒子.assets/image-20201218165726666.png
Normal file
BIN
css/弹性盒子.assets/image-20201218165726666.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
css/弹性盒子.assets/image-20201218170008166.png
Normal file
BIN
css/弹性盒子.assets/image-20201218170008166.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
142
css/弹性盒子.md
Normal file
142
css/弹性盒子.md
Normal file
@ -0,0 +1,142 @@
|
||||
# 弹性盒子（flex）
|
||||
|
||||
### flex 简介
|
||||
|
||||
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
|
||||
|
||||
任一个容器都可以指定为 Flex 布局。
|
||||
|
||||
#### 将一个html元素定义为flex 元素
|
||||
|
||||
> 使用 display: flex;
|
||||
>
|
||||
> 内联元素使用 display: inline-flex;
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
.box{
|
||||
display: flex;
|
||||
}
|
||||
```
|
||||
|
||||
内联元素：
|
||||
|
||||
```
|
||||
.box{
|
||||
display: inline-flex;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 基本概念
|
||||
|
||||
> 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
|
||||
|
||||
容器内默认存在两根轴 分别是水平的主轴（main axis）和垂直的交叉轴(cross axis)
|
||||
|
||||
主轴的开始位置与容器边框的交叉点叫做main start 结束点叫做 main end
|
||||
|
||||
交叉轴的开始位置与容器边框的交叉点叫做 cross start 结束位置叫做 cross end
|
||||
|
||||
默认容器成员沿主轴排列，单个容器成员占据的空间叫做main-size
|
||||
|
||||
单个容器成员占据垂直交叉轴的控件叫做cross-size
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 常用属性
|
||||
|
||||
- flex-direction
|
||||
- flex-wrap
|
||||
- flex-flow
|
||||
- justify-content
|
||||
- align-items
|
||||
- align-content
|
||||
|
||||
### 常用属性详解
|
||||
|
||||
#### flex-direction
|
||||
|
||||
作用： 决定主轴方向
|
||||
|
||||
属性值：
|
||||
|
||||
- `row`（默认值）：主轴为水平方向，起点在左端。
|
||||
- `row-reverse`：主轴为水平方向，起点在右端。
|
||||
- `column`：主轴为垂直方向，起点在上沿。
|
||||
- `column-reverse`：主轴为垂直方向，起点在下沿。
|
||||
|
||||
```
|
||||
.box {
|
||||
flex-direction: row | row-reverse | column | column-reverse;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### justify-content
|
||||
|
||||
作用： 定义了容器成员在主轴方向上的对齐方式
|
||||
|
||||
```
|
||||
.box {
|
||||
justify-content: flex-start | flex-end | center | space-between | space-around;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### flex-wrap
|
||||
|
||||
```css
|
||||
.box{
|
||||
flex-wrap: nowrap | wrap | wrap-reverse;
|
||||
}
|
||||
```
|
||||
|
||||
属性值：
|
||||
|
||||
- nowrap 不换行
|
||||
|
||||
|
||||
|
||||
- wrap 换行 第一行在上方
|
||||
|
||||
|
||||
|
||||
- wrap-reverse ：换行，第一行在下方。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### align-item
|
||||
|
||||
作用：定义容器成员在交叉轴上的对齐方式
|
||||
|
||||
```css
|
||||
.box {
|
||||
align-items: flex-start | flex-end | center | baseline | stretch;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
BIN
css/盒模型.assets/3EXWM8R]ILQ_Z_WU]KU%1SM-1608278714392.png
Normal file
BIN
css/盒模型.assets/3EXWM8R]ILQ_Z_WU]KU%1SM-1608278714392.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
css/盒模型.assets/image-20201218160440679.png
Normal file
BIN
css/盒模型.assets/image-20201218160440679.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
55
css/盒模型.md
Normal file
55
css/盒模型.md
Normal file
@ -0,0 +1,55 @@
|
||||
# css盒模型
|
||||
|
||||
### 盒模型简介
|
||||
|
||||
CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
> 图中的最内侧灰色的部分是元素的实际内容
|
||||
>
|
||||
> 紧挨着元素框外部的是内边距padding ,其次是边框
|
||||
>
|
||||
> 最外侧是外边距margin
|
||||
>
|
||||
> 通常设置背景色生效的部分是元素内容+padding的范围+边框
|
||||
>
|
||||
> 外边框margin 是透明的，不会遮挡周边元素
|
||||
|
||||
|
||||
|
||||
> 元素的总宽度= 元素的width+左右padding +左右margin+border的左右宽度
|
||||
>
|
||||
> 元素的总高度=元素的height+上下padding + 上下margin+border的上下宽度
|
||||
|
||||
|
||||
|
||||
### 与盒模型相关的css属性
|
||||
|
||||
box-sizing
|
||||
|
||||
说明:允许您以特定的方式定义匹配某个区域的特定元素
|
||||
|
||||
语法：box-sizing:content-box|border-box
|
||||
|
||||
属性值：
|
||||
|
||||
- content-box:
|
||||
|
||||
padding值和border值不计算到内容（content）的宽度之内
|
||||
|
||||
即：一个盒子模型的总宽度=margin+padding+border+width;
|
||||
|
||||
- border-box:
|
||||
|
||||
content的值包含了padding值和border值
|
||||
|
||||
即：一个盒子的总宽度=margin+width.
|
||||
|
||||
- padding-box：将padding算入width范围
|
||||
|
||||
|
||||
@ -58,6 +58,7 @@
|
||||
- 表格标签 label
|
||||
- 斜体 i
|
||||
- 加粗 b, em, strong
|
||||
- 下划线 u
|
||||
- 多行文本输入框 textarea
|
||||
|
||||
|
||||
@ -126,8 +127,51 @@
|
||||
- a 超链接
|
||||
|
||||
- 属性 href 指定跳转到的网址
|
||||
|
||||
- 具有默认的样式
|
||||
|
||||
- 属性：
|
||||
|
||||
- href 指定跳转到的网址
|
||||
- download 属性值为文件名
|
||||
- target 指定在哪里打开链接
|
||||
- _self 当前页面加载
|
||||
- _blank 新页面打开
|
||||
- title 鼠标悬停时的提示信息
|
||||
|
||||
- 相对路径和绝对路径
|
||||
|
||||
> **相对路径**-以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。
|
||||
>
|
||||
> **绝对路径**-以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。
|
||||
>
|
||||
> 其实绝对路径与相对路径的**不同处**，只在于描述目录路径时，所采用的参考点不同。由于对网站上所有文件而言，根目录这个参考点对所有文件都是一样的，因此，运用以根目录为参考点的路径描述方式才会被称之为绝对路径。
|
||||
>
|
||||
> 以下为建立路径所使用的几个特殊符号，及其所代表的意义。
|
||||
> “.”–代表目前所在的目录。
|
||||
> “..”–代表上一层目录。
|
||||
> “/”–代表根目录。
|
||||
|
||||
|
||||
|
||||
- 多媒体元素
|
||||
- 图片（img 标签）
|
||||
- 属性
|
||||
- src 显示图像的URL
|
||||
- alt 规定图像的替代文本 即图片加载失败的提示文本
|
||||
- 视频（video 标签）
|
||||
- 属性
|
||||
- src 播放视频的URL
|
||||
- autoplay 值为autoplay 视频在就绪后马上播放
|
||||
- controls 值为controls 向用户显示控件（如播放按钮）
|
||||
- loop 值为loop 循环播放
|
||||
- 音频（audio）
|
||||
- 属性
|
||||
- src 播放音频的URL
|
||||
- autoplay 值为autoplay 视频在就绪后马上播放
|
||||
- controls 值为controls 向用户显示控件（如播放按钮）
|
||||
- loop 值为loop 循环播放
|
||||
|
||||
#### 元素嵌套
|
||||
|
||||
- 嵌套规则：
|
||||
|
||||
Loading…
Reference in New Issue
Block a user