HTML和CSS
一 、了解
网页
1.什么是网页？
网站：因特网上根据一定规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页：网站中一页，是构成网站基本元素
格式：通常为HTML格式文件，它要通过浏览器阅读。
组成：图片，链接，文字，声音，视频等元素。
命名：通常以**.htm或.html**后缀结尾，俗称HTML文件
html
超文本标记语言（Hyper Text Markup Language）
超： 1.超越文本限制，还可有图片，动画，视频等
2.一个文件跳转另一个，与世界各地主机文件链接即超链接文本. 用于叙述网页，不是编程，而是标记语言（由标签组成）
网页的形成？
由网页元素（html标签描述）组成，通过浏览器解析给用户
浏览器
常用：ie ，edge, firefox ,chrome,safari(苹果)，opera
内核（渲染引擎）：负责读取网页（HTML文档）内容，整理讯息，计算网页显示方式并显示页面
ie(Trident),Safari(Webkit),chrome/Opera(Blink,Webkit分支，一般浏览器使用
web标准：（最佳体验方案：结构，样式，行为相分离）
W3C组织和其他标准化组织制定的一系列标准集合。
W3C（万物网联盟）是国际最著名的标准化组织。
为什么需要？
a.让不同开发人写出页面更标准，统一
b.降低网站流量费用
c.易被搜索引擎搜索提高页面浏览速度
d.网站易维护，内容可被多设备访问
构成？
a.结构: 用于对网页元素整理和分类，主要写到HTML文件中（最重要）
b.表现：用于设置网页版式，颜色，大小等外观样式，主要写到CSS文件中
c.行为：指网页模型定义及交互编写，主要为javascript文件中
二、HTML标签(一)
学习：学会书写注意规范，骨架标签，超链接标签，图片标签并alt和title区别，相对路径三种形式。
1.语法规范
1.1标签：
a。所有标签在<>中，且大部分情况标签成对出现。
例如：开始（开放）标签<html>结束标签</html>
单标签(很少）<br />。HTML标签由尖括号包围关键词.
通常成对出现，开始，结尾（多了个/）我们称为双标签。
某些特殊标签为单刚标签（极少），<br />称为单标签
1.2标签关系：包含和并列(2种)
包含：<head>
<title> </title>
</head>
并列：<head></head>
<body></body>
2.HTML基本结构标签
2.1第一个HTML网页
每个网页都有基本结构标签（称为骨架标签），页面内容在这些基本结构上书写，HTML页面又叫HTML文档。
<html></html> HTML标签 页面中最大标签（根标签）
<head></head>文档头部 注意在head标签中必须设置标签title
<title></title> 文档标题 让页面拥有属于自己网页标题
<body></body> 文档主体 元素包含文档所有内容，页面内容，基本放于body中
例如：
<html>
<head>
<title>我的第一个网页<title>
<head>
<body>
快乐的代码
<body>
<html>
其中head,title包含关系，head,body并列。
3.网页开发工具
webstorm Builder Dwcs6 S
vs Code 使用
运行
1.新建文件
2.保存文件（后缀为.html）
3.输入英文！，选择第一个选项（或！，加tab键）。
4.预览文件（单击右键 open in default browser默认浏览器打开 Alt+B）
先保存在在浏览器打开（ctrl +放大代码，ctrl -缩小）
5插件安装
安装后重新加载或重启软件件
a。中文
b。 Open in Browser(右击选择浏览器打开html文件)
c。JS-CSS-HTML Formatter 每次保存，都会自动格式化js,css,html代码（不好用，不要安装）
d。Auto Rename Tag(自动重命名配对的HTML/XML标签)（改前面标签后面会跟着改）
e。CSS Peek（追踪至样式）
改主题：左下角设置-颜色主题
VS code工具生成骨架标签新增代码：（3个）
.<!DOCTYPE>标签（文档类型声明）
作用：告诉浏览器使用哪种HTML版本（有HTML4,XTML,HTML5等（最新html)来显示网页。
<！DOCTYPE html>意思：当前页面采取HTML5版本显示网页
注 ：A。<!DOCTYPE>声明位于文档中最前面位置，处于<html>标签之前
B。<!DOCTYPE>不是一个HTML标签，是文档类型声明标签。
b. lang语言
lang为language缩写，<html lang="en">表示定义当前文档显示语言。其中
en为英文网页，zh-CN为中文网页，fr为法文。但对文档显示来说：定义为en（zh-CN)的文档也可显示中文（英文）。
c. charset字符集
定义：字符集是多个字符集合，以便计算机能够识别和存储各种文字。 在<head>标签内，可通过标签“<meta> ”标签的charest属性来规定HTML文档应该用哪种字符编码。
<meta charset=“UTF-8 />
charset常用值：GB2312（简体中文），BIG5（繁体中文）,GBK（两者包含）和UTF-8,其中UTF-8也被称为万国码，基本包含全世界所有国家需要用到的字符（上面语法为必须要写代码，否则可能引起乱码情况。一般情况下，统一使用"UTF-8”编码，尽量写出“UTF-8”,不要写为“utf8”或“UTF8”）
以上三个代码由vscode自动生成，基本不需要我们重写。
4.html常用标签
4.1标签语义
标签语义（即标签含义）在合适地方给一个最为合理标签，可让页面结构更清晰，有标题，段落等标签。
-
标题标签
<h1>-<h6>( ：作为标题使用，并依据 重要性递减（一级比二级重要） -
段落
<p>：把HTML文档分割为若干段 -
换行标签
<br/>:强制换行等4.2标题标签
<h1>-<h6>(重要)为了使网页更具有语义化，我们常在页面中用到标题标签，html提供6个等级网页标题：即
<h1>-<h6>
<h1>一级标题</h1>是单词head缩写，意为头部.
标签语义：作为标题使用，并依据 重要性递减（一级比二级重要）
特点：1.加了标题文字会变的加粗，字号也会依次变大。
2. 一个标题独占一行
<h2>文字加粗一行显</h2>
<h3>由大到小（字号）依次减</h3>
<h4>从重到轻（加粗）随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>
4.3段落和换行标签（重要）
段落
在网页中，要把文字有条理地显示出来，就需要将这些文字分段表示。在HTML标签中，
标签用于定义段落，它可以将整个网页分为若干个段落
标签语义：把HTML文档分割为若干段落
<p>我是一个段落标签</p> （表一段）
<p>我是一个段落标签</p> （表第二段）
P为paragrapht(alt+z 自动换行)
特点：1. 文本在一个段中会根据浏览器窗口的大小自动换行
2.段落和段落之间保有空隙
换行
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口右端，然后才自动换行，如果希望某段强制换行显示，就用换行标签
break打断自己,换行显示。标签语义：强制换行.
特点：单标签，简单开始新一行，跟段落不一样，段落间会插入垂直间距
4.4文本格式化标签
在网页中，有时需要设置粗体，斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或<b></b> | 更推荐使用<strong>标签加粗，语义更强烈 |
| 倾斜 | <em></em>或<i></i> | 更推荐用<em>标签加粗 语义更强烈 |
| 删除线 | <del></del>或<s></s> | 更推荐用<del>标签加粗 语义更强烈 |
| 下划线 | <ins></ins> 或<u></u> | 更推荐用<ins>标签加粗 语义更强烈 |
4.5分区和跨度标签
其中<div>和<span>是没有语义的，它们就是一个盒子，用来装内容（图片，文字）的
<div>这是头部</div>
<span>今日价格</span>
div是division的缩写，表示分割，分区。
自己独占一行（可放醒目图片，文字可联系标题标签，都独占一行但标题加粗），大盒子。（跨行）
span意为跨度，跨距。（一行放多种超链接，一行显示），小盒子。
（例如：百度 新浪 搜狐）
4.6图像标签（含属性）和路径（重点）
图像标签
<img>用于定义HTML页面中图像。单标签
<img src="img.jpg"/>
<img>为image的缩写，意为图像。
src是<img>标签的必须属性，它用于指定图像文件的路径和文明件名。
属性：属于这个图像标签的特性
图像其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示（图片裂开）时用文字表示,（图片没显示也有可能双引号用了中午输入法） |
| title | 文本 | 提示文本，鼠标放到图像上会显示出的文字 |
| width | 像素 | 设置图像宽度 |
| height | 像素 | 设置图像高度 |
| border | 像素 | 设置图像边框粗细 |
例：
<img src="img1.jpg" alt="小白兔">
<img src="img.jpg" alt="小白兔" title="兔子一种">
<img src="img.jpg" alt="小白兔" title="兔子一种" width="500”>
<img src="img.jpg" alt="小白兔" title=“兔子一种" width="500” height="100">(一般只修改图像高宽其中一个，会自动等比例缩放另一个，要么有高要么有宽)
<img src="img.jpg" alt="小白兔" title="兔子一种" height="100" boder="15">
- 注意点
- 图像标签可拥有多个属性，必须写在标签名后边
- 属性之间不分先后顺序，属性与属性之间必须空格连（title 与 alt之间必须保持一个空格）
- 属性采取键值对的格式，即
key="value"格式，属性=“属性值” - src属性必须写，alt为替换文本（图片无法显示时）但title为提示文本
路径
前期知识铺垫
目录文件夹和根目录
1.文件不能乱放，否则很难找，用一个文件夹管理他们。（新建文件夹web）
目录文件夹：普通文件夹，里面存放我们做页面所需相关素材，比如html文件，图片等。（web中新建index.html和images）
2.根目录：打开目录文件夹第一层就是根目录（进入image或index不为根目录）。
vscode打开目录文件夹
文件，打开文件夹，案例，单击选择文件夹，左侧为目录文件夹（里面为根目录，新建文件案例后边，在后边新建文件夹10-demo.html）生成骨架（就保存到其中了）(sublime)
路径
页面中图片非常多，通常会新建一个文件夹来存放这些图像文件（images）,这时查找图像就要采用“路径”方式来指定图像文件位置。
路径分为相对和绝对路径。
相对路径
以引用文件所在位置为参考基础，而建立目录路径，即图片相对于HTML页面的位置
| 相对路径分类 | 符号 | 说明 | 代码 |
|---|---|---|---|
| 同一级路径 | 图像位于html文件同一级，（图像与html文件所在位置并列） | <img src="baidu.gif> | |
| 下一级路径 | / | 图像位于html文件下一级（与html同级里的文件里图像） | <img src="images/baidu.gif> |
| 上一级路径 | …/ | 图像位于html文件上一级（图像与html文件并列，html中的test.html用图像即图像位于test.html的上一级） | <img src="…/baidu.gif> |
| 上上级路径 | …/…/ | |
绝对路径
指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径。
例如：“D:\web\img\logo.gif”或完整网络地址“http://www.itcast.cn/images/logo.gif/
<img src"D:\web\img\logo.gif"/>（很少用）还可用网络上的图片的地址做绝对地址）
首选相对路径。(两路径/ \不同)
4.7超链接标签
<a>标签用于定义超链接，作用为从一个页面连接到另一个页面
超链接的语法规范
语法格式
<a></a>
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
a为ahchor 锚 缩写
属性
herf:用于指定链接目标的url地址，（必须属性）当标签应用herf属性时，就有了超链接功能
target:用于指定链接页面打开方式，其中_self为默认值(表当前窗口打开页面)，_blank为新窗口中打开方式,例如：
<a herf="http://www.baidu.com" target="_blank">百度</a>
链接的分类
-
外部链接（链接外部网站地址）例：
<a herf="http://www.baidu.com">百度</a>必须以htt://+外部地址 -
内部链接：(目录文件夹中两个页面跳转）网站内页面相互链接，直接链接内部页面名称即可，例
<a herf =“index.html（回车）">首页</a> -
空链接：如果当时没有确定链接目标时，
<a herf="#">首页</a>(没地址时设置链接） -
下载链接：如果herf里面地址是一个文件(.exe)或压缩包（zip)，会下载这个文件
<a herf="img.zip">下载文件</a> -
网页元素链接：网页中各种网页元素，如文本,图像，表格，音频，视频，等都可超链接例：图片链接：
<a herf="http://www.baidu.com"><img src="img.jpg"/></a> -
锚点链接：点击链接，快速定位到页面中某个位置, 在链接文本的herf属性中，设置属性值为#名字的形式,
如
<a herf="# two”>第二集</a>,找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第二集介绍</h3>
5.html中的注释和特殊字符
注释：
在html中加一些便于阅读和理解但又不需要显示在页面中的注释文字，需要用注释标签。
注释以<!--“开头，以”-->结束。（ctrl /）此代码不会显示到页面中（让程序员想起代码是干什么的）
特殊字符
敲多个空格只显示一个。
解决：空格符  ；(写几个有几个空格)
< <； > >； 等其余查表.
三、HTML标签（二）
目标
写出：表格，无序列表，写出3到4个常用intput表单类型，写出下拉列表表单，能使用表单元素实现注册页面，能独立查阅W3C文档
主要内容：表格，列表，表单标签，查文档
1.表格标签
1.1表格主要作用
用于显示，展示数据（复杂数据简单展示）不为布局页面而是展示数据.
1.2表格基本语法：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
</table>
-
<table></table>用于定义表格标签。（四方框） -
<tr></tr>定义表格行，必须嵌套于<table></table>中 -
<td></td>为单元格，必须嵌套于<tr></tr>中（td为table date表格数据，表单元格主要内容）例：<head> <table> <tr><td>姓名</td> td>性别</td> td>年龄</td></tr> <tr><td>小红</td> td>女</td> td>18</td></tr> <table> </head>
表格基本语法由3个标签组成。
1.3表头单元格标签
一般表头单元格位于表格第一行货第一列，表头单元格里面的文本内容加粗居中显示,<th>标签位于html表格表头部分（table head）
<table>
<tr>
<th>姓名</th>
.......
</tr>
.......
</table>
<table>(tr行，td格，th表头单元格（一般用于第一行td位置用th）)
1.4表格属性
（不常用，用css设置）记住英语单词，直观感受外观。
属性写入<table></table>里
| 属性 | 属性名 | 描述 |
|---|---|---|
| align | left(默认)，center,right | 表格相对周围元素对齐形式 |
| border | 1或“” （默认，无边框） | 格单元是否有边框 |
| cellpadding | 像素值 | 单元边沿与其内容之间空白（内边距），默认1像素 |
| cellspacing | 像素值 | 规定单元格之间空白，默认2像素 |
| width | 像素值或百分比 | 表格宽度 |
例如 ：
<table ailgn="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250">
1.5表格结构标签
使用场景：表格表头和表格主体两部分
-
<thead>表表格头部区域（必须包含<th>) -
<thody>表表格主体区域，放数据.
以上两个标签放于<table></table>中
1.6合并单元格
特殊情况下，把多个单元格合并为一个单元格方式：
-
.跨行(上下格）合并：rowspan=“合并单元格个数”
-
跨列（左右格）合并：colspan=“合并单元格个数”
<td colspan="2"></td>//再把第一行第三个<td></td>即可完成合并
删掉目标单元格：（写合并代码）
- .跨行：最上侧单元格为目标单元格，写合并代码
- 跨列：最左侧单元格为目标单元格，写合并代码
三步曲合并：1确定跨什么。2.找到目标单元格，写合并代码。3.删除多余单元格。
2.列表标签
表格是用来显色数据的，列表则用于布局。（自由，方便）
三大类：无序列表，有序列表，自定义列表
2.1无序列表（重点）
<ul>标签表示HTML页面中项目无序列表，一般以项目符号呈现列表项，而列表项用
- 标签定义基本语法格式：
-
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ..... </ul>(默认小黑圆点)注：
- 无序列表各个列表项无顺序级别之分，并列关系
<ul></ul>只能嵌套<li></li>,标签输入其他标签，字都为错误<li></li>里可放任何元素- 无序列表带有自己样式属性，但实际使用，我们用css来设置
2.2有序列表（理解)
有排列顺序列表，各个列表项会按一定顺序排列定义。
用- 定义有序列表（方框），列表排序用数字表示，并用
- 定义列表项.
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ..... </ol>(排行榜用到)注：
-
<ol></ol>只能嵌套`` - `标签,输入其他标签，字都为错误
-
<li></li>里可放任何元素 -
有序列表带有自己样式属性，但实际使用，我们用css来设置（会默认加数字）
2.3自定义列表（重点）
一个大哥领一群小弟（自定义列表常用于对术语，名词进行解释，描述，定义列表表项前没有任何项目符合）
语法格式：
<dl>描述列表（或定义列表），该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/文字)一起使用<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ......... </dl>(dt 带头大哥，dd弟弟)注：
<dl></dl>（相当于方框）只能嵌套<dt></dt> <dd></dd>标签,输入其他标签，字都为错误<dt>和<dd>无限制，经常一个<dt>对应多个<dd>,可有多个<dt><dt>和<dd>为并列关系<dt>和<dd>里可放任何元素
3.表单标签（注册多用）
为什么需要表单？收集用户信息
3.1表单构成
表单域（大方框），表单控件（也称表单元素）和提示信息3部分组成
3.2表单域
- 定义：包含表单元素区域，用
<form>标签定义，以实现用户信息收集，传递。
<form></form>会把它范围内的表单元素信息提交给服务器
例：
<form action=“url地址” method=“提交方式” name=“表单域名称”> .........各种表单元素控件 </form>-
常用属性：
属性 属性值 作用 action url地址 用于指定接收并处理表单数据的服务器程序的url地址 method get/post 用于设置表单数据的提交方式，其取值为get或post name 名称 用于指定表单名称，以区分同一个页面中的多个表单域
（现阶段先用
<form>标签，属性先不用）3.3表单控件（表单元素）
允许用户在表单中输入或选择的内容控件
input表单元素
<input>标签中，包含一个type属性，根据不同type属性值，输入字段拥有很多种形式（可以是文本段，复选框，掩码后的文本控件，单选按钮，按钮等）
单标签：<input type="属性值"/>
type属性值设置不同的属性值用来指定不同控件类型3.3.1type属性值：
属性值 使用 button 定义可点击按钮（多用于通过javaScript）； checkbox 复选框（多选） file 输入字段和“浏览”，供文件上传 hidden 定义隐藏的输入字段 image 定义图像形式的提交按钮 password 密码字段 radio 单选 reset 重置按钮(清除表中所有数据) 例如： <input type="reset" value="重新设置">submit 提交按钮（会把表单数据发送给服务器）例如： <input type="submit" value="免费注册">text （定义单行的输入字段，用户可在其中输入任何文字，默认宽度20个字符（文本框） 例如：
<form> 用户名<input type="text"><br> 密码：<input type="password"><br> 性别：男<input type="radio">女<input type="radio"><br>(注：此时同时可选多个选项,没有name) 爱好：吃饭<input type="checkbox"> 睡觉 <input type="checkbox"> 打豆豆<input type="checkbox"> </form>3.3.2 其他属性
除type属性外，
<input>标签还有其他很多属性：属性 属性值 描述 name 由用户自定义 定义input元素名称 value 由用户自定义 规定input元素值 checked checked 规定此input元素首次加载时应该被选中（默认选中），主要针对单选和复选框 maxlength 正整数 规定输入字段中的字符最大长度 例如：
<form> 用户名<input type=“text” name=“username” value=“请输入用户名”><br> 密码：<input type=“password”><br> 性别：男<input type=“radio” name=“sex” value=“男”>女<input type=“radio” name=“sex” value=“女”><br>(!--name是表单元素名字，这里性别单选按钮必须有相同的名字name,才可以实现多选一) 爱好：吃饭<input type=“checkbox” name=“hobby”> 睡觉 <input type=“checkbox” name=“hobby”> 打豆豆<input type=“checkbox” name=“hobby”> </form>注：
ctrl /注释快捷键
name和value是每个表单元素都有的属性值，主要给后台人员使用
name表单元素的名字，要求单选按钮和复选框有同样name值3.4.2
<lable>标签<lable>标签为input元素定义标注（标签）
使用场景：绑定表单元素，当点击<lable>标签内文本时，浏览器就会自动将焦点转到或选择对应表单元素上。
语法规范：
<lable for="sex">男</lable>
<input type="radio" name="sex" id="sex"/>
lable中for属性要与相关元素id属性相同3.4.3select下拉表单元素
使用场景：多个学项选，节省页面空间用
<select>
语法：<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> …… <select>在
<option>中定义selected="selected"时，当前选项为默认3.4.4textarea标签
<textarea>文本域标签
使用场景：当用户输入内容较多时，不使用文本框表单，用<textarea>定义多行文本输入（留言板 评论等）
语法规范：<textarea rows="3" cols="20">这里文字会显示在框里</textarea>rows行数，cols每行字符，实际中用css
四、css
1.简介
1.1作用及含义
- 场景使用：美化网页，布局页面
（HTML没有修改外观，写的代码很多，主要做结构） - 含义：css是层叠样式表（Casscading Style Sheets），又叫CSS样式表或级联样式表，是一种标记语言。
- 设置：HTML页面中的文本内容（字体，大小，对齐方式等），图片的外形（宽高 边框样式，边距等），以及版面布局和外观样式。CSS可美化HTML,布局网页，使结构（HTML)与样式（CSS)相分离。
1.2 CSS语法规范
CSS规则由两个主要部分构成，选择器以及一条或多条声明。
h1(选择器) {color（属性）: red（值）; font-size: 2px;}
属性和值为声明（键值对形式）1.3代码风格
样式：用展开格式（多行）
大小写：除特殊情况，用小写
空格：属性值前，冒号后；选择标签和大括号中间保留空格2.css基础选择器
2.1选择器作用
作用：用于选择标签的
h1 {color: red; font-size: 2px;}
这里的h1把所有h1选出来
{color: red; font-size: 2px;}设置标签样2.2选择器分类
分为基础选择器和复合选择器
基础选择器（单个选择器组成）：
包括：标签选择器，类选择器，id选择器和通配符选择器（4类）2.3标签选择器
用于选择页面中某一类表签并设置统一样式，但不能设计差异化样式
标签名 {
属性1： 属性值1；
属性2： 属性值2；
属性3： 属性值3；
…
}<style> div { color: red; width: 100px; background-color: green; } </style>2.4类选择器
差异化选择不同标签，单独选一个或某几个标签
.类名{
属性1： 属性值1；
…
}例如：
<style> .red{ color: red; } </style>调用(结构要用clss属性调用,class为类的意思)
<div class='red'>变红色</div> <li class='red'>变红色</li>口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用
注：类名自己定义，但不与标签冲突
长名称或词组用横线为选择器命名
不要使用纯数字，中文等命名，尽量使用英文字母表示。
命名最好有意义，命名要规范。（类命名规则：百度）
类选择器多类名：一个标签可有多个名字
使用方式：css已经定义了<style> .red { color : red; } .box{ height: 100px; width: 100px; font-size: 30px; } </style> 调用时：<div class="red box">亚瑟</div>(div同时调用red和box)
在标签class属性中写多个类名,但多个类名必须用空格分开
使用场景：可以把一些标签元素相同样式（共同部分）放到一个类里，这些标签可调用公共类和自己独有类
最终节省css代码，修改方便2.5id选择器(像类选择器)
可以为标有id的HTML设置样式
HTML元素以id属性来设置id选择器,css选择器用#来定义
语法：
#id名 {
属性1：属性值1；
…
}
例如：<style> #nav { color：red； } </style> body中调用时： <div id="nav">迈克杰克逊</div>注意：id属性只能在每个HTML文档中出现一次。口诀：样式#定义，结构id调用，只能用一次别人切勿用。
（类选择器好比人名可有多个，重复使用；id为身份证号，全国一个人用）
类多用，id用于页面唯一性元素上2.6通配符选择器
Css中选取页面中所有元素，用*定义
例：<style> *{ color: red; } </style> /*把html body div span li等都改为红色*/注：通配符选择器不需要调用,自动给所有元素使用样式。(可能特殊情况会使用)
2.7基础选择器总结
基础选择器 作用 特点 使用情况 用法 标签选择器 选出所有相同标签，比如div 不能差异化选择 较多 p {color：red；} 类选择器 可以选出1个或多个标签 根据需求 非常多 .nav { color: red;} id选择器 一次只能选一个标签 id属性只能在html中出现一次 一般与js连用 #nav {color : red;} 通配符选择器 选所有标签 选择的太多，有的不需要 特殊情况用 * {color: red;} 修改样式，类最多用
3.css字体属性
3.1字体
Css使用font-family属性定义文本字体系列，例：
p {font-family: "微软雅黑"} div{font-family: Aril,"Microsoft YaHei,"微软雅黑"} h1 {font-family: "宋体"}
注：各种字体间用英文状态下的逗号隔开;
一般情况下，如果有多个空格隔开的多个单词组成的字体加引号
尽量使用系统默认自带字体，保证在任何用户浏览器中都能正确显示
（实际开发定义body{font-family:…}多）3.2字体大小
p { font-size: 20px; }
px大小是像素，网页最常用单位;
谷歌默认16px,不同浏览器不同,标题需要单独指定文字大小，一般给body指定整个页面文字大小。3.3字体粗细
font-weight: normal默认（400）（可使文字变细）
粗体：bold(700，不加px,实际开发多用)；100-900均为字体粗细，注意不加px3.4文字样式
p { font-style: normal; }
normal:默认值，浏览器会显示标准字体样式,italic显示斜体文字样式3.5复合属性
body { font: font-style font-weight font-size/line-height font-family; }例：
body { font: iltalic 700 16px Microsoft yahei; }
使用font属性，必须按顺序，各个属性用空格隔开。
不需要设置属性可省略，但必须保留font-size和font-family，否则font不起作用.3.6字体属性总结
属性 表示 注意 font-style 样式 倾斜：italic。不倾斜：normal font-weight 粗细 加粗700（bold）；不加粗400（normal） 数字不加单位 font-size 字号 一定有单位px font-family 字体 font 多个属性结合 连写有顺序（st，we，si，fa），不能随意换位置 4.css文本属性
4.1文本颜色
div { color: red; }
表示：预定义颜色值（green,red…）
十六进制(开发多用)（#FF0000,#FF6600）
RGB代码：rgb(255,0,0)或rgb(100%,0%,0%)4.2对齐文本
taxt-ailgn:设置水平对齐方式
h1 { taxt-ailgn: center }
center可换为left(默认值),right4.3装饰文本
text-decoration:可添加：下划线，删除线，上划线等。
div{ text-decoration: underline; }
underline（下划线）可换为none(无修饰，最常用),取消链接下划线
a { text-decoration: none; }
还可换为overline（上划线），line-through(删除线)4.4文本缩进
文本第一行首行缩进（可为负值）
div { text-indent: 10px; }
（-）20px: (向左)向右缩进。
em的使用：em为相对单位，当前元素（font-size）1个文字大小，如果当前元素未设置大小，会按照父元素的1个文字大小
p { text-indent: 2em; }
缩进当前2个文字大小距离4.5行间距
line-height:设置行间距离(上间距+下间距+文字高度）（主要为改变文字上下间距）
div { line-height: 26px; }4.6文本属性总结
5.css引入方式
5.1行内样式表（行内式）
修改简单样式或样式少的，控制当前标签设置样式
<div style=“color: red; font-size:12px;”>回家<div>5.2内部样式表（嵌入式）
css写入html中，单独放入
<style></style>中
理论上可放在html任何地方，一般放于<head>中（方便控制当前整个页面元素样式设置）5.3外部样式表（链接式）
开发多用（适用于样式较多情况），
样式单独写到css(建立… .css)文件中，之后把css引入html页面使用
方法：1.新建一个后缀名为.css样式文件，把所有css代码放入其中。
2.用link标签<link rel=“stylesheet（样式表名字）” href="css文件路径”>引入5.4 引入方式总结
样式表 使用 控制范围 行内 较少 一个标签 内部 较多 一个页面 外部 最多 多个页面 6.chrome调试工具（检查错误）
F12或右键检察
使用：左边html,右边css
ctrl+0复原浏览器大小
2622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
