html与Css

HTML+CSS

HTML:Hyper Text Markup Language 超文本标记语言

CSS： Cascading Style Sheets 层叠样式表

HTML+css能做什么？

能写静态页面(没有数据库)

HTML

初识HTML

快键键	释义
ctrl + c	复制
ctrl + v	粘贴
ctrl + x	剪切
先英文! + 后 enter/tab	载入html的基本代码
ctrl + /	注释
tab	代码缩进
ctrl + s	保存
ctrl + alt +a	QQ截图

注释：

给一段代码做功能解释
让一段代码不参于运行

HTML里显示为：

CSS里显示为：/* 注释的内容 */

标签又称元素，是html的基本组成单位
标签不区分大小写，但推荐用小写
标签分为双标签(由开始标签和结束标签组成)和单标签(只有开始标签)
标签之间的关系：
- 嵌套关系
- 并列关系
元素的内容：指的是开始标签到结束标签之间的内容(包括标签)

<!DOCTYPE html>
<!-- 文档类型声明   当前文档是html -->
<html lang="zh-CN">
    <!-- html:根元素 lang="zh-CN" 文档的语言声明，en:英文网，zh-CN简体中文 -->
    <head>
        <!-- head:头文件，所有不显示在页面中的代码都写在head里 -->
        <meta charset="UTF-8">
        <!-- meta:单标签，元信息 charset="UTF-8"：编码设置  UTF-8:万国码  -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 主要用于移动端 -->
        <title>01-认识html</title>
        <!--title:标题，显示在标题栏 -->
    </head>
    <body>
        <!-- body:主体，所有要显示在页面中的内容都写在body里 -->
        欢迎大家来到雅腾大家庭!
    </body>
</html>

img元素

语义：图片

默认排列方式：从左向右排，一排排不下，排下一排

属性：

语法：属性名 = "属性值"

属性之间用空格隔开

src = > 图片的地址（路径）
- 相对路径
  
  释义写法
  
  当前目录文件名或目录名 or ./文件名或目录名
  
  上一级目录 ../文件名或目录名
  
  上上一级目录 ../../文件名或目录名
  
  总结：相对路径是从当前文件出发到达要访问的文件之间的路径
- 绝对路径
  - 本地的
    
    从盘符出发，因为不同的电脑的目录命名方式不一样，路径也不一样，如果代码转移时就需要修改路径，工作量就大，所以很少用绝对路径
  - 网络的
    
    在网络上的一张图片上右键复制图片地址，但受其它网站的限制
alt => 图片描述加载不出来时显示的内容

正常情况下都不显示，只有图片没有加载出来时显示（路径错误，网络问题）

目前常用于：
- 屏幕阅读器
- 搜索引擎优化
title => 鼠标悬停在元素上时显示的内容
style => 风格，样式目前CSS都写在style的双引号里

释义	写法
当前目录	文件名或目录名 or ./文件名或目录名
上一级目录	../文件名或目录名
上上一级目录	../../文件名或目录名

br元素

语义：换行

hr元素

语义:水平线

span元素

语义：普通文本

默认排列方式：从左向右排，一排排不下，换下一排

a元素

语义：超链接

a的元素内容

纯文字
图片
可以有其他的元素，但不包括a本身

默认样式：

未访问状态 color:blue;text-decoration:underline;
激活状态(鼠标左键按下未松时) color:red;text-decoration:underline;
访问过后 color:purple;text-decoration:underline;

属性：

href => 目标地址

本地可以打开的文件：
- html文件
- 图片(只要可以用浏览器打开的文件都可以)
- 压缩文件（下载）

锚点链接

当前页面的指定位置

<a href="#currentPoint">跳转到当前页面的指定位置</a>
<!-- href的值为：#+id名 -->
<br>
<img src="../images/02.webp" alt="">
<hr>
<span id="currentPoint">当前页面的指定位置 </span>
<hr>
<img src="../images/02.webp" alt="">

指定页面的指定位置

当前页面的代码

<a href="03-span元素.html#otherPoint">跳转到指定页面的指定位置</a>

指定页面的代码

<span id="otherPoint">指定页面的指定位置 </span>

target => 目标页面打开方式

值：
- _self => 在当前页签打开(默认)
- _blank => 在新的页签打开

h1,h2,h3,h4,h5,h6元素

语义：一号标题到六号标题

h1-h6,权重越来越小，h1的权重最高，所以一个页面最多只能有一个h1

默认样式：

display:block;,margin-top:,margin-bottom:；font-weight:blod;font-size

默认样式不重要，重要的是语义，想要什么样式都可以通过CSS去修改

h1到h6之间不能互相嵌套

p元素

语义：段落

默认样式：margin:1em 0,display:block

首行空两格的方法：

实体字符： 空格若干个
中文输入法全角状态下空格两个
text-indent: 2em;

p里不能嵌套h类的元素，p里只能放文本类的行内元素和行内块元素

div元素

语义：没有特殊的语义，通常称为盒子

div是division的缩写，意为：划分，常用于分区布局

列表

列表分为无序列表，有序列表，自定义列表

无序列表

无序列表：由无序列表ul（unorder list） + 若干个列表项 li(list items)组成

默认样式：

ul:display:block;list-style:disc;margin:1em 0;padding-left:40px
li:display:list-item（比块级元素前面多了一个小黑点）

列表专有CSS:list-style

值：

disc 实心圆
circle 空心圆
square 小正方形
none 取消列表样式

有序列表

有序列表：由有序列表ol（order list） + 若干个列表项li（list items）组成

默认的样式：

ol:display:block,list-style:decimal,margin:1em 0;padding-left:40px
li:list-item（比块级元素前面多了一个小实心点）

列表专有CSS:list-style

值：

decimal 数字默认值
upper-roman 大写的罗马字母
lower-roman 小写的罗马字母
upper-alpha 大写的英文字母
lower-alpha 小写的英文字母
lower-greek 小写的希腊文
none 取消列表样式

自定义列表

自定义列表：由自定义列表dl(defined list) + dt（自定义标题）可以是多个 + dd（自定义描述）可以是多个

注意：dt和dd是并列关系

默认样式：

dl:display:block;margin:1em 0
dt:display:block
dd:margin-left:40px,display:block;

应用场景：

专有名词解释
一问多答
一问一答

表格

标签名	释义
table	表格
tr	行
td	单元格
th	表头单元格（默认加粗，居中）(th不是必须放在thead里)
thead	表头(放表格的任何部位都会显示在表头的位置)
tbody	主体表
tfoot	脚注(放表格的任何部位都会显示在最下面)

注意事项：

如果table下面直接写tr,td,浏览器会在所有的tr外面解析一个tbody把tr包裹在里面

表格专有CSS

border-collapse=>边框合并

separate ：分离(默认)
collapse：合并

HTML属性

colspan =>列合并

值：需要合并的列数
```
<td colspan="2">行一单元格2</td>
```
rowspan=>行合并

值：需要合并的行数
```
<td rowspan="2">行二单元格2</td>
```

html代码：

<table>
    <thead>
        <tr>
            <th>星期1</th>
            <th>星期2</th>
            <th>星期3</th>
            <th>星期4</th>
            <th>星期5</th>
            <th>星期6</th>
            <th>星期7</th>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td>行一单元格1</td>
            <td colspan="2">行一单元格2</td>
            <!-- <td>行一单元格3</td> -->
            <td>行一单元格4</td>
            <td>行一单元格5</td>
            <td>行一单元格6</td>
            <td>行一单元格7</td>
        </tr>
        <tr>
            <td>行二单元格1</td>
            <td rowspan="2">行二单元格2</td>
            <td>行二单元格3</td>
            <td>行二单元格4</td>
            <td>行二单元格5</td>

            <td>行二单元格6</td>
            <td>行二单元格7</td>
        </tr>
        <tr>
            <td>行三单元格1</td>
            <!-- <td>行三单元格2</td> -->
            <td>行三单元格3</td>
            <td>行三单元格4</td>
            <td>行三单元格5</td>
            <td>行三单元格6</td>
            <td>行三单元格7</td>
        </tr>
        <tr>
            <td>行四单元格1</td>
            <td>行四单元格2</td>
            <td>行四单元格3</td>
            <td>行四单元格4</td>
            <td>行四单元格5</td>
            <td>行四单元格6</td>
            <td>行四单元格7</td>
        </tr>
        <tr>
            <td>行五单元格1</td>
            <td>行五单元格2</td>
            <td>行五单元格3</td>
            <td>行五单元格4</td>
            <td>行五单元格5</td>
            <td>行五单元格6</td>
            <td>行五单元格7</td>
        </tr>
        <tr>
            <td>行六单元格1</td>
            <td>行六单元格2</td>
            <td>行六单元格3</td>
            <td>行六单元格4</td>
            <td>行六单元格5</td>
            <td>行六单元格6</td>
            <td>行六单元格7</td>
        </tr>
        <tr>
            <td>行七单元格1</td>
            <td>行七单元格2</td>
            <td>行七单元格3</td>
            <td>行七单元格4</td>
            <td>行七单元格5</td>
            <td>行七单元格6</td>
            <td>行七单元格7</td>
        </tr>
    </tbody>
    <tfoot>
        <td>备注：</td>
        <td colspan="6"></td>
    </tfoot>
</table>

CSS样式：

table {
    width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
}
table td,table th {
    border: 1px solid orangered;
}
/* table td:nth-child(-n + 6):nth-child(n+2):nth-child(2n+1) {
border: 2px solid blue;
} */
/* table tr:nth-child(2n+1)>td:nth-child(-n + 6):nth-child(n+2):not(:nth-child(4)) {
color: blue;
} */

表单

表单及表单控件

标签名	释义
form	表单
input	单行输入框
select	下拉选框
textarea	文本域
button	按钮

html属性

标签名	属性名	释义
form	action	表单提交的地址
	method	方法
	target	目标打开方式：_self,_blank
input	type	类别
	name	是表单控件必须有的属性及值，用于与后台交互时识别数据的
	maxlength	最多可以输入的字符数
	minlength	至少需要输入的字符数
	placeholder	占位符，用于输入一些提示性的文字
	value	默认值
	autofocus	自动获得焦点(一般用在第一个表单控件上)
	autocomplete	自动
	readonly	只读
	required	必填项
	disabled	禁用(适用于所有表单控件)

action:定义表单提交时，应该把所收集到的数据发送给谁(地址url）处理
method:定义发送数据的http方法（get和post）

HTTP请求由两部分组成
- 包含关于浏览器功能的全局元数据集的头部
- 包含服务器处理特定请求所需要信息的主体
get方法：默认值
- 是浏览器使用的方法，请求服务器返回给定的资源，在这种情况下，浏览器发送一个空的主体，由于主体是空的，如果用该方法发送一个表单，那么发送给服务的数据追加到url里(地址栏带信息)
post方法：
- 是浏览器在询问响应时使用与服务器通信的方法，该响应考虑了HTTP请求正文中提供的数据，如果使用该方法发送表单，则将数据追加到http请求的主体中

input的type属性

type值	释义
text	单行文本输入框
password	密码框
url	url网址输入框
email	email输入框有验证但不完整
number	数值加属性：max最大值 min最小值 step：步长
search	搜索框
tel	电话输入框
color	颜色
date	日期
radio	单选框，同一组选项的name值必须相同，属性checked设置默认选项
checkbox	多/复选框，同一组选项的name值必须相同，属性checked设置默认选项
hidden	隐藏，页面带数据

submit	提交按钮(会跳转)
reset	重置按钮（单击可以让表单控件恢复到初始状态(默认值)）
button	普通按钮（功能需要通过js赋予）

与相关的文字做关联的方法

用label标签的for属性关联表单控件的id属性

<label for="userName">用户名：</label>
<input type="text" name="uname" id="userName">

用label标签把相关的文字和控件都包裹在里面

<label>
    <span>密码：</span>
    <input type="password" name="" id="">
</label>

select=>下拉选框

option=>下拉选项

<select name="blood" id="">
    <option value="A">A型</option>
    <option value="B" selected>B型</option>
    <option value="AB">AB型</option>
    <option value="O">O型</option>
</select>

属性：selected设置默认选项

textarea=>文本域

<textarea name="introduce" id=""></textarea>

button=>按钮

type值：

submit 默认值提交
reset 重置
button 普通按钮

video=>视频

属性：

controls 显示控件
muted 静音
autoplay 自动播放前提是静音状态
poster="图片地址" 视频的封面(视频的宽高比与图片宽高比一至)

loop 循环播放

<video  src="../vidio/听力话题-饮食喜好.mp4" controls poster="../images/02.webp" autoplay muted></video>

audio=>音频

属性：

controls 显示控件
muted 静音
autoplay 自动播放前提是静音状态

loop 循环播放

audio src="../vidio/（71009）（音频）.mp3" controls></audio>

CSS 样式

语法：属性名:属性值;

结束符：;

书写的位置

内联（行内）样式

写在开始标签的style属性里

 <a href="" style="color: #000; text-decoration: none;margin-left: 400px; padding: 3px 10px;border-radius: 12px;">T<span style="font-size: 10px;">T</span>小字号</a>

内部样式

写在head标签里的style标签里

语法：

CSS选择器 {

CSS表达式

属性名：值 ;

.

.

.

}
外部样式

写在后缀是CSS的文件里(css文件) 做到样式和结构的完全分离

需要载入CSS文件

语法：<link rel="stylesheet" href="CSS文件的路径">
```
<link rel="stylesheet" href="./10-css.css">
```

CSS的三大特性

层叠性

如果发生样式冲突(同一个元素同一个样式名设置了不同的值)，就按规则进行样式层叠(覆盖)
继承性
- 元素会自动拥有其祖先元素的某些样式
- 优先继承离的近的
- 可以被继承的属性有：font-,line-,text-,color（与文本相关的属性）
优先级

继承 < 浏览器预设(默认样式) < 通配选择器 < 标签(元素)选择器 < 类选择器 <id选择器 <内联(行内)样式 < !important

CSS选择器

CSS基础选择器

CSS选择器	html结构里的写法	CSS里的写法
通配选择器		*
元素(标签)选择器		元素(标签)名
id选择器	id="id名"	#id名
类选择器	class = "类名"	.类名

通配选择器

代表加载了该CSS的html文件里的所有元素，通常用来取消元素的默认内外边距
```
* {
    margin: 0;
    padding: 0;
}
```
元素/标签选择器

代表加载子该CSS的html文件里的所有该元素(指定元素) 通常用于初始化取消元素的某些默认样式
```
a {text-decoration: none;}
```

id选择器

主要体现在唯一上，但是如果在一个页面里有多个元素拥有相同的id名，在CSS 上是会生效的，在JS里会只选择到第一个(在CSS上目前用的比较少)

 #article {
            width: 800px;
            margin: 0 auto;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            padding: 20px;
        }

类选择器

一个元素可以拥有多个类名（类名与类名之间用空格隔开），多个元素可以拥有相同的类名

类名的命名规范：
1. 不能以数字开头，或全是数字
2. 可以是汉字，但不推荐用
3. 可以用下划线_中划线-开头或中间，但不推荐用中划线-
4. 可以英文字母开头或中间
5. 见名知义
6. 多个单词间用下划线隔开，或除了第一个单词外的所有单词首字母大写(小驼峰命名法)

CSS复合选择器

选择器	CSS文件里的写法
子集选择器	父选择器>子选择器
后代选择器	祖先选择器(空格隔开)后代选择器
交集选择器	多个选择器紧挨着
并集选择器	多个选择器用逗号隔开
伪类选择器	见下
伪元素	见下
属性选择器	见下

子集选择器写法：父选择器>子选择器

<div class="outer">
    <p>我是子集p元素</p>
    <div class="box">
        <p>我是后代p元素</p>
        <div class="box1">
            <p>我是后代p元素</p>
        </div>
    </div>
</div>

css

.outer>p {
    color: red;
}

后代选择器写法：祖先选择器(空格隔开)后代选择器
```
.outer p {
    color: red;
}
```

交集选择器写法：多个选择器紧挨着

每个选择器选中的元素为一个集合，多个集合做交集

<div class="outer">
    <ul>
        <li class="one two">江山如此多娇，引无数英雄竞折腰1</li>
        <li>江山如此多娇，引无数英雄竞折腰2</li>
        <li class="one three">江山如此多娇，引无数英雄竞折腰3</li>
        <li class="one two three">江山如此多娇，引无数英雄竞折腰4</li>
        <li>江山如此多娇，引无数英雄竞折腰5</li>
        <li class="one three">江山如此多娇，引无数英雄竞折腰6</li>
        <li>江山如此多娇，引无数英雄竞折腰7</li>
        <li class="one two">江山如此多娇，引无数英雄竞折腰8</li>
    </ul>
</div>

.outer>ul>li.one.two.three {
    color: olivedrab;
}

并集选择器写法：多个选择器用逗号隔开

每个选择器选中的元素为一个集合，多个集合做并集
```
l,ul,li {list-style: none;}
.outer>ul>li.four,
.outer2>ul>li.five {
    font-weight: bold;
    font-size: 26px;
}
```
伪类选择器

伪类：像类但不是类，是元素的特殊状态或排序，分为：动态伪类和静态伪类
- 动态伪类
  - 超链接:link 超链接的未访问状态
  - 超链接:visited 超链接的访问过后状态
  - CSS选择器:hover 元素的悬停状态(光标悬停在元素上时)
  - CSS选择器:active 元素的激活状态
    
    如果a四种状态都需要，就按如下的顺序写
```
.list>ul>li>a:link {
    color: #000;
}
.list>ul>li>a:visited {
    color: #999;
}
.list>ul>li>a:hover {
    font-size: 18px;
    color: green;
}
.list>ul>li>a:active {
    font-size: 18px;
    color: red;
    text-decoration: underline blueviolet;
}
```
  - 表单控件:focus 表单控件获得焦点时
```
input[type=text]:focus {
    border: 2px solid orangered;
    
    outline: none;
    /* color: #fff; */
}
```
- 静态伪类
  - 结构伪类 (child家族)
    
    第一个集合：CSS选择器选中的元素为第一个集合
    
    第二个集合：CSS选择器选中的元素的父元素的所有子元素里指定排序
    - CSS选择器:first-child CSS选择器选中的元素的父元素的第一个子元素与CSS选择器选中的元素做交集
```
.list>ul>li:first-child {
    color: red;
}
```
    - CSS选择器:last-child CSS选择器选中的元素的父元素的最后一个子元素与CSS选择器选中的元素做交集
```
.list>ul>li:last-child {
    color: blueviolet;
} 
```
    - CSS选择器:nth-child(n) CSS选择器选中的元素的父元素的第n个子元素与CSS选择器选中的元素做交集 n:自然数
      
      n:
      - 直接写一个值代表第几个子元素
      - 偶数 2n
      - 奇数 2n+1
      - an + b ==> a:周期 n:自然数 b:偏移量
      - -n + m ==>前m个子元素
      - n + m ==> 第m个及之后的子元素
    - CSS选择器:nth-child(n+a):nth-child(-n + b) a < b 第a个到第b个子元素
  - 同类兄弟伪类 (of-type家族)
    
    第一个集合：CSS选择器选中的元素为第一个集合
    
    第二个集合：CSS选择器选中的元素的父元素的子元素里的同类兄弟元素间的指定排序
    - CSS选择器:first-of-type
    - CSS选择器:last-of-type
    - CSS选择器:nth-of-type(n)
  - 否定选择器
    
    写法：CSS选择器1:not(CSS选择器2)
    
    第一个集合：CSS选择器1选中的元素
    
    第二个集合：CSS选择器2选中的元素
    
    在第一个集合中减去第二个集合中的元素(差集)
```
.list>ul>li:not(:nth-child(3n)){
    color: red;
}
.box>.item:not(p) {
    /* border: 2px solid olive; */
    color: red;
}
```
  - CSS选择器:empty 在css选择器选中的元素筛选出没有内容的元素
```
.list>ul>li:empty {
    width: 100px;
    height: 50px;
    border: 1px solid orange;
}
```
伪元素

不需要写在html结构里，指的是元素特殊位置
- before
  
  语法：CSS选择器::before {
  
  content:"内容";必须有的属性，如果没有内容引号内就空着
  
  其他和其他的元素一样写
  
  }
  
  释义：在CSS选择器选中的元素的开始标签后面(元素内容前面)插入一个没有名称的行内(内联)元素，
```
.poem::before {
    content: "登科后";
    color: red;
    width: 100px;
}
```
  应用场景：1.插入一些内容，2.与定位配合写页面中的一些小装饰
- after
  
  语法：CSS选择器::after {
  
  content:"内容";必须有的属性，如果没有内容引号内就空着
  
  其他和其他的元素一样写
  
  }
  
  释义：在CSS选择器选中的元素的结束标签前面(元素内容后面)插入一个没有名称的行内(内联)元素，
```
.poem::after {
    content: '————唐.孟郊';
    /* content：内容，必须的属性 */
    display: block;
    text-align: right;
}
```
  应用场景：1.插入一些内容，2.与定位配合写页面中的一些小装饰3.清除浮动

属性选择器

写法：标签名[属性名=属性值]{}

input[type=text] {
    width: 256px;
    height: 40px;
    padding-left: 20px;
    border: 2px solid olivedrab;
    border-radius: 6px;
}

width => 宽

指的元素的内容的宽度

元素的占宽/高 = width/height + padding + border

max-width =>最大宽度

以wrapper的div为例

如果body的宽小于wrapper的max-width的值，wrapper的div的宽为body的宽
如果body的宽大于wrapper的max-width的值，wrapper的div的宽为max-width的值

min-width=>最小宽度

以wrapper的div为例

如果body的宽小于wrapper的min-width的值，wrapper的div的宽为min-width的值
如果body的宽大于wrapper的min-width的值，wrapper的div的宽为body的宽

height =>高

指的是元素内容的高

border=>边框

语法：border: 边框的宽度边框的线型边框的颜色;

边框的宽度:有单位
边框的线型：
- solid 实线
- dashed 虚线
- dotted 点线
- double 双边线
边框的颜色 5种颜色表达方式都可以

指定方位的边框：border-指定方位: 边框的宽度边框的线型边框的颜色;

border-top: 2px solid seagreen;

特殊：border:none;取消边框

border-radius=>圆角半径

特殊情况：如果元素是个正方形，圆角半径为边长的一半时，元素呈圆形

写法	释义
border-radius: 20px;	元素四个角的圆角半径都为20px
border-radius: 20px 40px;	上左角及其对角20px,上右角及其对角：40px
border-radius: 20px 40px 60px;	上左角：20px,上右角及其对角：40px，下右角：60px
border-radius: 10px 20px 30px 40px;	从上左角顺时针数
border-top-right-radius: 20px;	上右的的圆角半径

padding=>内边距

指的元素边界到内容之间的距离

写法	释义
padding: 20px;	元素四个方位的内边距都是20px
padding: 20px 40px;	上下：20px,左右：40px
padding: 10px 30px 50px;	上：10px 左右：30px 下:50px
padding: 20px 40px 60px 80px;	从上开始顺时针数
padding-right:	右边的内边距

margin=>外边距

指的是元素的边界到相邻元素的边界的距离

写法	释义
margin:50px	元素四个方位的外边距都是50px
	上下：第一个值左右：第二个值
	上：第一个值，左右：第二个值，下：第三个值
	从上开始顺时针数
margin-方位关键词	指定方位的外边距

外边距击穿

在第一个子元素上写margin-top,效果会在其父元素上

解决方法：
- 给父元素加padding
- 给父元素加border
- 给父元素加overflow: hidden;
外边距合并

同时给上下相邻两个同级元素，在相邻位置设置外边距，上面的元素设margin-bottom,下面的元素设margin-top,大值生效

vertical-align=>行内块元素垂直对齐方式

行内块元素默认为基线对齐，同一行的基线位置由本行里最高的元素决定

值：

top 顶线对齐常用top消除图片下方的空白
middle 中线对齐
baseline 基线对齐 (默认值)
bottom 底线对齐

加初始化样式：

img{vertical-align: top;}

box-shadow=>盒子阴影

语法：box-shadow：x轴偏移量 y轴偏移量 [模糊半径] [扩散半径] 阴影颜色

x轴偏移量：向右偏移为正数，反之负数
y轴偏移量：向下偏移为正数，反之负数
[模糊半径]：高斯模糊的半径
[扩散半径]：向外扩散的半径

多个阴影，阴影之间用逗号隔开

box-shadow:270px 10px #f00, 260px 0 #00f;

outline=>轮廓线

值：

写法：outline:线的宽度线的线型线的颜色 (none)

resize=>重写尺寸

值：

horizontal 水平方向
vertical 垂直方向
both 水平和垂直方向都可以
none 水平和垂直方向都不可以（不允许拖拽）

关于文本的CSS

color =>字体颜色
font-weight => 字体加粗

值：

以微软雅黑为例：
- lighter === 100，200，300
- normal === 400，500
- bold === 600，700，800，900
font-style =>字体风格

值：
- italic => 斜体 (字体设计就设计了的斜体)
- oblique => 斜体 (使倾斜)
- normal => 正常(取消斜体)
font-size => 字体的大小有单位
font-family =>字体族

常用的中文体：微软雅黑，宋体，黑体
letter-spacing => 字间距可以是负数
word-spacing => 词间距 (以空格来识别单词)
line-height => 行高（一行文字的高度，而文字在行高的垂直中间）
- 有单位
- 没有单位(代表当前元素的font-size的值的倍数)
行高的应用：

单行文本垂直居中：把文字的行高设为容器的高度
text-decoration =>文本装饰

值：
- underline 下划线
- line-through 删除线
- overline 上划线
- none 取消文本装饰
语法：text-decoration: 线的位置线的宽度线的线型线的颜色;
- 线的线型比border多wavy波浪线
- 线的位置：underline,line-through,overline
text-underline-offset:下划线的偏移量 xxpx
```
text-underline-offset: 10px;
```
text-align=>文本对齐方式

值：
- left 左对齐
- center 水平居中
- right 右对齐
text-indent=>文本缩进一般用em单位

background=>背景

子属性：background-color =>背景颜色

默认：

背景的剪切方式：background-clip:border-box(沿着边框的外边缘剪切)
背景的原点位置：background-origin:padding-box(原点位置在padding的左上角)

背景图片

载入背景图片 background: url(背景图片地址);
```
background: url(../images/bg05.png);
```
背景图片平铺方式 background: url(背景图片地址) 平铺方式

值：
- repeat 满铺(默认值)
- repeat-x x轴方向平铺
- repeat-y y轴方向平铺
- no-repeat 不平铺
背景图片定位 background: url(背景图片地址) 平铺方式定位

定位方法：
- 用left，right,top,bottom,center等五方位关键词组成9个位置如：left top
- 用图片左上角相对原点位置的偏移量来定位：
```
background: url(../images/bg05.png) no-repeat 50px 100px;
```
  偏移量的值可以是负数，出了盒子(舞台)的部分都看不见
背景图片尺寸 background: url(背景图片地址) 平铺方式定位/尺寸(size)

子属性：background-size

值：
- w h（宽高）如果只写一个值代表图片的宽
```
background: url(../images/bg05.png) no-repeat  center/50px;
```
- auto 自动把背景图片的左上角与原点位置对齐不会缩放
- contain 包含把背景图片按图片比例缩放，大边对齐，图片的比例不会改变，但是可能出现部分位置没有背景图片
- cover 覆盖把背景图片按图片比例缩放，小边对齐，图片的比例不会改变
```
background: url(../images/01.webp)no-repeat ;
background-size: auto;
background-size: contain;
background-size: cover;
```
背景的原点位置 background: url(背景图片地址) 平铺方式定位/尺寸(size) 原点位置

子属性：background-origin

值：
- padding-box 在padding的左上角 (默认值)
- content-box 在内容的左上角
- border-box 在边框的左上角
```
background-origin: padding-box;
background-origin: content-box;
background-origin: border-box;
```
背景的剪切方式 background: url(背景图片地址) 平铺方式定位/尺寸(size) 原点位置剪切方式

子属性：background-clip

值：
- border-box 沿着边框的外边缘剪切 (默认值)
- padding-box 沿着内边距的外边缘剪切
- content-box 沿着内容的外边缘剪切
- text 沿着文本的外边缘剪切如果不兼容可以在属性前加-webkit-前缀

渐变色

线性渐变

语法：background: linear-gradient(方向,颜色1 位置1,颜色2 位置2，颜色3 位置3......);

注意：渐变至少需要两种颜色(不是说两种不能的颜色)参与
- 方向
  - 写法一：
    
    用to +left,right,top,bottom 可以组成8个方向如：top right(从左下角到右上角)，right（从左到右）
  - 写法二：
    
    角度(单位deg) ,0deg代表从下到上
- 颜色所有的颜色表达式都可以 (当前位置是当前位置的颜色的纯色)
- 位置
  - 位置的写法：百分比，相对渐变起点的偏移量
```
background: linear-gradient(to right,#f00 0%,#0f0 50%,#00f  100%);
background: linear-gradient(to right,#f00 20%,#0f0 50%,#00f  80%);
background: linear-gradient(to right,#f00 100px,#0f0 200px,#00f  300px); 
```
  - 中间的位置
    
    由上一个位置的颜色渐变到当前位置的颜色
  - 第一个位置不在渐变开始的位置，那么从开始到第一个位置为第一个颜色的纯色(没有渐变)
  - 最后一个位置不在渐变的结束位置，那么从最后一个位置到结束为最后一个颜色的纯色(没有渐变)
重复线性渐变

重得线性渐变就是把没有渐变的区域按渐变的规则平铺

语法： background: repeating-linear-gradient(方向,颜色1 位置1,颜色2 位置2，颜色3 位置3......);
```
 background: repeating-linear-gradient(to right,#f00 0px,#0f0 200px,#00f  300px);  
```
径向渐变

语法：background: radial-gradient(起点位置,颜色1 位置1,颜色2 位置2，颜色3 位置3...... );
- 起点位置：
  
  写法：
  - at + left,top,right,bottom,center可以组9个位置默认为at center
  - at + 相对原点位置的偏移量
```
background: radial-gradient(at center,red 0px,green 50%,blue 100% );
background: radial-gradient(at left top,red 0px,yellow 180px,blue 100%);
background: radial-gradient(at 100px 100px,red 0px,yellow 180px,blue 100%); 
```

多背景

1背景颜色+1张背景图片

background: url(../images/bg05.png) no-repeat  center pink;
background:pink url(../images/bg05.png) no-repeat  center ;
background: url(../images/bg05.png) no-repeat  center ,pink;

一背景颜色+多张背景图片

background: url(../images/bg05.png) no-repeat left top,
            url(../images/bg04.png) no-repeat right top,
            url(../images/bg03.png) no-repeat right bottom,
            url(../images/bg02.png) no-repeat left bottom,
            url(../images/bg01.png) no-repeat 50px 50px,skyblue;

多背景，背景之间用逗号隔开，先写的显示在前面，后写的显示在后面

display=>显示

值：

block 块级元素

典型的元素：h1-h6,hr

特点：

默认宽度与其块级父元素同宽
占整行
默认排列方式(文档流)：从上往下排，先写的在上面，后写的在下面
设width,height:有效
设padding:四个方向都有效
设margin:四个方向都有效
在其块级父元素中水平居中的方法：margin:0 auto（在当前块级元素上设）

inline内联(行内)元素

典型的元素：span,a,br

特点：

默认宽度：由内容决定，内容有多宽元素就有多宽，但是受其块级元素的宽的限制(最宽是与其块级父元素同宽)
不占整行
默认排列方式(文档流)：从左向右排，先写的在左边，后写的在右边，一排排不下换下一排
设width,height:无效
设padding:左右有效，上下有背景颜色，但不占位置
设margin:左右有效，上下无效
在其块级父元素中水平居中的方法：当文字处理

inline-block 行内块元素

典型的元素：img

特点：

默认宽度：由内容决定，内容有多宽元素就有多宽
不占整行
默认排列方式(文档流)：从左向右排，先写的在左边，后写的在右边，一排排不下换下一排
设width,height:有效
设padding:四个方向都有效
设margin:四个方向都有效
在其块级父元素中水平居中的方法：当文字处理

none 隐藏

对应的显示：block,inline,inline-block

float =>浮动

浮动：浮起来，左右动起来

值：

left:向左浮动
right:向右浮动
none:取消浮动

总结：块级元素需要排成排（可以是多排），每一个元素都要浮动，浮动结束立刻清除浮动

清除浮动：clear:both;

在非浮动块级元素上加清除浮动功能的CSS：clear:both;

浮动元素的特点

不占整行，可以与其他元素共享一行。
宽由内容决定，同时设width,height有效
脱离了正常的文档（元素的默认排列方式），但父元素宽度的限制
四个方向的margin效果更完美

浮动元素对其他元素的影响

对同级相邻兄弟元素的影响
- 后面同级非浮动元素会自动补位
解决方法
- 在浮动之后清除浮动
对父元素的影响
- 子元素全都是浮动元素，父元素没有设高，父元素就撑不开(高度坍塌)
解决方法：
1. 给父元素设高(确定高度不会有变化的时候)
2. 父元素也浮动(又会产生浮动带来的影响)（不建议用)
3. 清除浮动（在父元素的结束标签前面）
4. 给父元素加overflow: hidden; （初学时不建议用）
5. 给父元素加个after伪元素
```
.clearfix::after {
    content: "";
    display: block;
    clear: both;
 }
```

position=>定位

有定位属性的元素称为定位元素

值：

static=>静态定位

特点：

是默认值，之后说的定位元素不包括static这个值，定位属性也不包括static

fixed=>固定定位

特点：

完全脱离了正常的文档流(释放了正常文档流下的位置)
参照物：视口
定位方法：用定位元素的left,right,top,bottom,相对参照物的left,right,top,bottom的偏移量来定位，

偏移量：往参照物的内部移动为正数，反之负值

离哪边近写哪边
设为fixed之后，宽高就由内容决定，同时设宽高有效

relative=>相对定位

特点：

不完全脱离正常的文档流(不会释放正常文档流下的位置)
参照物：定位元素正常文档流下的位置
定位方法：用定位元素的left,right,top,bottom,相对参照物的left,right,top,bottom的偏移量来定位，

偏移量：往参照物的内部移动为正数，反之负值

离哪边近写哪边
设了relative之后：如果不设width就和块级父元素同宽，同时设width，height有效
应用场景：1.做微调，2.与绝对定位配合，作为绝对定位的参照物

absolute=>绝对定位

特点：

完全脱离了正常的文档流(释放了正常文档流下的位置)
参照物：有定位属性（不包含static，常用relative）的祖先元素，如果由定位元素向外(上)找，所有的祖先元素都不是定位元素(不包含static),就相对body的默认尺寸(为视口的大小)定位
定位方法：用定位元素的left,right,top,bottom,相对参照物的left,right,top,bottom的偏移量来定位，

偏移量：往参照物的内部移动为正数，反之负值

离哪边近写哪边
设为absolute之后，宽高就由内容决定，同时设宽高有效

transition=>过渡

注意：过渡时长与延时时长同时出现，过渡时长一定排在延时时长前面

一个属性参与过渡

语法：transition: 需要过渡的CSS属性过渡时长(单位:s/ms) [延时时长] [速度曲线];
```
transition: width 2s 2s linear;
```
多个属性参与过渡

语法：transition: 需要过渡的CSS属性1 过渡时长(单位:s/ms)1 [延时时长1] [速度曲线1]，

需要过渡的CSS属性2 过渡时长(单位:s/ms)2 [延时时长2] [速度曲线2];
```
transition: width 2s  linear,height 2s 2s ease,background-color 2s 4s ease-in;
```
所有的变化属性都同时参与过渡

语法：transition:all 过渡时长(单位:s/ms) [延时时长] [速度曲线];
```
transition: all 2s 2s linear;
```

注意：如果需要双向的transition要写在元素的正常状态下

transform=>变换

分为2d变换和3d变换

注意：x,y,z轴不分大小写，变换的原点为变换元素的中心点，百分比代表元素本身宽/高的百分比

transform-origin:变换原点的位置：

transform-origin: top left;
/* transform-origin: 0px 0px; */

2d变换

translate 位移距离
- translatex(xpx) x:向右移为正数，反之为负数
- translateY(ypx) y:向下移为正数，反之为负数
- translate(xpx,ypx) 如果只输入一个数，代表X轴的位移
scale 缩放比例
- scalex(w) 大于1放大，小于1缩小
- scaley(h) 大于1放大，小于1缩小
- scale(w,y) 如果只输一个值，代表宽和高同时缩放相同的倍数
skew 倾斜/扭曲角度 deg
- skewx(xdeg) 左右倾斜
- skewy(ydeg) 上下倾斜
- skew(xdeg,ydeg) 如果只有一个值代表x轴的倾斜
rotate 旋转角度在2D变换中只有绕着z轴旋转
- rotate(zdeg) 绕着z轴旋转

2d的复合应用

transform:  rotate(360deg)  scale(0) translate(30px,30px);

3d变换

在变换元素的父元素上加

transform-style: preserve-3d;
/* 开启3d空间 */
perspective: 600px;
/* 景深/视距 */
perspective-origin: center;
/* 透视点的位置 */

translate 位移距离
- translatez(zpx) z 为正数越大离观察者越近，看起来越大，反之越小
- translate3d(x,y,z) 必须传入3个值
scale 缩放
- scalez(z) 㬌深/视距缩小的倍数(除)
- scale3d(x,y,z) 必须输入3个值
rotate 旋转
- rotatex(xdeg) 绕着X轴旋转
- rotatey(ydeg) 绕着y轴旋转
- rotate3d(x,y,z,xxdeg) x,y,z:用0或1表示：0代表不转，1代表转，deg代表旋转的度数

颜色的表达式

颜色的英文单词如：red,green...
rgb 写法：rgb(red,green,blue) 每一种颜色用0-255的值表示
rgba 写法：rgba(red,green,blue,alpha) alpha:透明度 0-1 0：全透明 1：不透明
HEX又称16进制表达式：写法：#redgreenblue;每一种颜色由两位十六进制的字符组成

十六的字符：0，1，2，3，4，5，6，7，8，9，a，b，c，d，e，f
HEXA 写法：#redgreenbluealpha; alpha:透明度，00 -ff ,00全透明 ff不透明

注意：HEX和HEXA:如果每一种颜色(含透明度)都是由两个相同的字符表示，如：#aabbccdd ==#abcd,每一种颜色都可省略一个字符

方位关键词

关键词	释义
left	左
right	右
top	顶部
bottom	底部
center	中心

CSS的单位

px像素
百分比
- border-radius里百分比是指元素占宽/高的百分比
em => 指当前元素的font-size的值的倍数

posted @ 2024-08-30 14:50 白头吟阅读(54) 评论(0) 收藏举报

刷新页面返回顶部

njhwy

html与Css

HTML+CSS

HTML

初识HTML

标签

img元素

属性：

br元素

hr元素

span元素

a元素

a的元素内容

属性：

h1,h2,h3,h4,h5,h6元素

p元素

div元素

列表

无序列表

列表专有CSS:list-style

有序列表

列表专有CSS:list-style

自定义列表

表格

表格专有CSS

HTML属性

表单

表单及表单控件

html属性

input的type属性

与相关的文字做关联的方法

select=>下拉选框

textarea=>文本域

button=>按钮

video=>视频

audio=>音频

CSS 样式

书写的位置

CSS的三大特性

CSS选择器

CSS基础选择器

CSS复合选择器

width => 宽

max-width =>最大宽度

min-width=>最小宽度

height =>高

border=>边框

border-radius=>圆角半径

padding=>内边距

margin=>外边距

vertical-align=>行内块元素垂直对齐方式

box-shadow=>盒子阴影

outline=>轮廓线

resize=>重写尺寸

关于文本的CSS

background=>背景

背景图片

渐变色

多背景

display=>显示

block 块级元素

inline内联(行内)元素

inline-block 行内块元素

none 隐藏

float =>浮动

浮动元素的特点

浮动元素对其他元素的影响

position=>定位

static=>静态定位

fixed=>固定定位

relative=>相对定位

absolute=>绝对定位

transition=>过渡

transform=>变换

2d变换

2d的复合应用

3d变换

颜色的表达式

方位关键词

CSS的单位