目录:1. 计算机执行一条指令的主要步骤 2.前端基础 3.html 4.css
计算机执行一条指令的主要步骤
1.取值fetch
2.译码decode
3.执行execute
4.回写write-back
第一步：
1.控制器将指令的地址送往存储器
2.存储器按给定的地址读出指令内容，送回控制器
第二步：
1.控制器分析指令的操作性质
2.控制器向有关部件发送指令所需的控制信号
第三步：
执行
第四步：
将运算结果写入通用寄存器或存储器
前端基础
静态页面：不能与用户进行交互，只能浏览网页的文字与图片 flash+fireworks+dreamweaver三剑客
网页主要由三部分组成：结构、表现和行为
网页现在新的标准是W3C，目前的模式是HTML、CSS和JavaScript
HTMl；超文本标记语言，是网页的结构
CSS；层叠样式表，是网页的外观
JavaScript；一门脚本语言，是页面的行为
HTMl:超文本标记语言
是一种用于创建网页的标记语言
文件后缀一般使用.html或.htm，这两种后缀没有区别，互换也没有影响，就用html就好了
HTML作为一门标记语言，就是通过各种各样的标签来标记网页内容的，学习HTML就是学习HTML的标签
标签使用英文的尖括号<>包起来
双闭合<html></html>
单闭合<meta><img>
标签通常是成对出现的，分为开始标签和结束标签，结束标签比开始标签多一个 / 即<head>...</head>
标签之间是可以嵌套的，但不是所有的标签都支持嵌套
HTML标签不区分大小写，但是通常建议使用小写
一个HTML文件实例
<!DOCTYPE HTML> 文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档
<html> 根节点，根标签，所有的网页标签都在<html></html>中
<head> 子节点，用于定义文档的头部，它是所有头部元素的容器
头部信息相关内容
</head>
<body> 子节点，内部是网页的主要内容，最终会在浏览器中显示出来
页面主题相关内容
</body>
</html>
常见的头部元素：<title> <script> <style> <link> <meta>等标签
网页内容标签：<h1> <p> <a> <img>等
HTML中的注释：<!--这里是注释的内容-->
注释中可以直接使用回车换行，并且我们习惯用注释的标签把HTML代码包裹起来，如：
<!--xx部分开始-->
html代码
<!--xx部分结束-->
HTML注释不支持嵌套
HTML注释不能写在HTML标签中
<head>标签
文档的头部描述了文档的各种属性和信息，包括文档的标题、编码方式和url信息，主要用于提供索引
<head lang='en'>
<title>标题信息</title>
<meta charset='utf-8'>
<link>
<style type='text/css'></style>
<script type='text/javascript'></script>
</head>
title标签
<title></title>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中
meta标签
提供有关页面的原信息，针对搜索引擎和更新频度的描述和关键词，用户不可见
标签位于文档的头部，不包含任何内容
meta标签共有两个属性：http-equiv属性和name属性
http-equiv属性：用来向浏览器传达一些有用的信息，帮助浏览器正确的显示网页内容
与之对应的属性值是content，content中的内容其实是各个参数的变量值
<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型--> 下面这句代码一定要写
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页--> 下面这句代码最好也要写
<meta http-equiv="x-ua-compatible" content="IE=edge">
name属性 这里的东西可以先不写，但是工作的时候一定要写
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个，用,逗号隔开
与之对应的属性值为content，content中的内容主要是便于搜索引擎查找信息和分类信息
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="路飞学城">
其他标签：
<!--icon图标(网站的图标)-->
<link rel="icon" href="fav.ico">
<!--定义内部样式表>
<style type="text/css"></style>
<!--引入外部样式表文件-->
<link rel="stylesheet" href="mystyle.css">
<!--定义JavaScript代码或引入JavaScript文件-->
<script src="myscript.js"></script>
<body>标签
想要在网页上展示的内容放在body标签内
标题标签h1~h6
<h1>-<h6>标签可定义标题，<h1>定义最大的标题 <h6>定义最小的标题
由于h元素拥有确切的语义，因此请慎重的选择恰当的标签层级来构建文档的结构
因此请不要利用标题标签来改变同一行中的字体大小，而应该使用css来定义来达到漂亮的显示效果
标题标签通常用来制作文章或网站的标题
h1~h6标签的默认样式
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>路飞学城</title>
</head>
<body>
<h1>一级标题</h1><h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
<h1><h2>写在了同一行，但是在浏览器上显示的时候会换行，因为标题标签是块级元素，独占一行
文本样式标签主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<s></s> 删除线
<sup></sup> 上标
<sub></sub> 下标
<em> 强调，在浏览器中默认用斜体显示
<strong> 更强烈的强调，在浏览器中会用粗体显示，更推荐用这个
段落标签p
<p>定义段落，paragraph的简写
<body>
<p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
<p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
</body>
浏览器展示特点：
1.跟普通文本一样，但我们可以通过css来设置当前段落的样式
2.是否又独占一行？是的 块级元素
超链接标签a
<a>代表一个链接点，anchor的简写，作用是把当前位置的文本或图片连接到其他的页面、文本或图像
行内标签，设置高度宽度不起作用
a 标签的颜色不继承父元素的color，要单独设置
实例：
<body>
<h1>
<!--a链接 超链接
target:_blank 在新的网站打开链接的资源地址
_self 在当前网站打开链接的资源地址，这个是默认值
title:鼠标悬停时显示的标题
-->
<a href="http://www.baidu.com" target="_blank" title="路飞学城">路飞学城</a> 常用
<a href="a.zip">下载包</a> # 下载资源
<a href="mailto:[email protected]">联系我们</a> # 电子邮件链接
<!--返回页面顶部的内容-->
<a href="#">跳转到顶部</a> # 返回页面顶部的空链接
<!--返回某id-->
<a href="#p1">跳转到p1</a> # 返回具体id值的标签
<!--javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，
而javascript:;表示什么都不执行，这样点击<a>时就没有任何反应，意味着把a标签的默认动作取消了-->
<a href="javascript:alert(1)">内容</a>
<a href="javascript:;">内容</a>
</h1>
</body>
链接的其他形式：
1.目标文档为下载资源
2.电子邮件链接，前提是计算机中必须安装邮件客户端，并配置好了邮件相关信息
3.返回页面顶部的空链接或具体id值的标签
4.javascript: 是表示在触发<a>默认动作时，执行一段JavaScript代码
5.javascript:; 表示什么都不执行，这样点击<a>就没有任何反应
列表标签 ul ol
块级标签
通常跟<li>标签一起用，每条<li>表示列表的内容
<ul> unordered lists的缩写，无序列表
<ol> ordered lists的缩写，有序列表
实例：
<!--无序列表 type可以定义无序列表的样式-->
<ul type="circle">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<!--有序列表 type可以定义无序列表的样式-->
<ol type="a">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
type:列表标识的类型
1：数字，默认值
a:小写字母
A:大写字母
i:小写罗马字符
I:大写罗马字符
列表标识的起始编号默认为1
ul标签的属性：
disc：实心圆(默认值)
circle：空心圆
square：实心矩形
none：不显示标识
ul ol {list-sytle:none}
取消列表的默认样式
盒子标签div
<div>可定义文档的分区，division的缩写
实例：
<div id='wrap'>
<div class='para'></div>
<div class='anchor'></div>
<div class='para'></div>
<div class='lists'></div>
</div>
上例中包含四块区域，四个div块，在浏览器中，每个小区域都独占一行
div是块级元素，每块区域表示独立的一块，id与class属性很简单，可以看成给这个区域起个名字
id是唯一的，一个页面中不能有两个重复的id，class可以设置同样的值，也可以设置多个
图片标签img
语法：<img src="图片地址" alt="图片加载失败时显示的内容" title="提示信息" />
单闭合标签
行内块元素
注意：
1.src设置的图片地址可以是本地的地址也可以是一个网络地址
2.图片的格式可以是png、jpg和gif
3.alt属性的值会在图片加载失败时显示在网页上
4.还可以为图片设置宽度width和高度height，不设置就是图片默认的宽度和高度
<div>
<span>与行内元素展示的标签</span>
<span>与行内元素展示的标签</span>
<img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px">
<img src="./finance-right.png" alt="人工智能实战" style="width:200px;height:200px">
</div>
5.与行内元素在一行显示
6.可以设置宽度和高度
7.span标签可以单独摘出某块内容，结合css设置相应的样式
练习：将img标签内的图片独占一行展示，并设置相应标题，在图片下方，描述该图片内容的信息
其他标签：
换行标签<br>
用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行
分割线<hr>
用来在HTML网页中创建水平分割线，通常用来分割内容
特殊符号
浏览器在显示的时候会移除源代码中多余的空格和空行，连续的空格或空行都会被算作一个空格
需要注意的是，HTML代码中所有连续的空行(换行)也会被显示为一个空格
所以HTML代码对缩进的要求并不严格，使用缩进是为了让我们的代码结构更清晰
常用的特殊字符：
空格
> >
< <
& &
￥ ¥
版权 ©
注册 ®
表格标签table
表格由<table>标签来定义，每个表格均有若干行(由<tr>标签来定义)，
每行被分割为若干单元格(由<td>标签来定义)，td即table data表格数据，即数据单元格的内容
数据单元格的内容可以包含文本、图片、列表、段落、表单、水平线、表格等
table表格 thead表格头 tbody表格主体 tr表格行 th表格头里的单元格(默认加粗且居中)
td表格主体里的单元格 tfoot表格底部
实例：
<div class="table">
<table>
<!--表格头-->
<thead>
<!--表格行-->
<tr>
<!--表格列，这里使用的是th-->
<th></th>
</tr>
</thead>
<!--表格主体-->
<tbody>
<!--表格行-->
<tr>
<!--表格列，这里使用的是td-->
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
<!--表格底部-->
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
</div>
表格行和列的合并
rowspan合并行，竖着合并
colspan合并列，横着合并
实例：
<body>
<div class="table">
<table border="1" cellspacing="0">
<!--表格头-->
<thead>
<!--表格行-->
<tr>
<!--表格列，这里使用的是th-->
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<!--表格主体-->
<tbody>
<!--表格行-->
<tr>
<!--表格列，这里使用的是td-->
<td rowspan="3">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
</tbody>
<!--表格底部-->
<tfoot>
<tr>
<td colspan="6">课程表</td>
</tr>
</tfoot>
</table>
</div>
</body>
表单标签form 使用非常频繁
表单是一个包含表单元素的区域,用于显示、收集信息，并提交给服务器
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框()
块级元素
1.属性
action 定义表单被提交时发生的动作，提交给服务器处理程序的地址
如果什么都不写，那就默认使用当前form表单所在的地址
method 定义表单提交数据时的方式
取值：
get 默认值，明文提交，所提交的数据可以显示在地址上，安全性低，有大小限制，最大2KB
post 隐式提交，所提交的内容不会显示在地址栏上，安全性高，无大小限制
enctype 编码类型，即表单数据进行编码的方式，允许表单将什么样的数据提交给服务器
取值：
application/x-www-from-urlencoded 默认值，允许将普通字符、特殊字符都提交给服务器，不允许提交文件
multipart/from-data 允许将文件提交给服务器
text/plain 只允许提交普通字符，特殊字符和文件等都无法提交
注：如果有文件需要提交给服务器，method必须用post，enctype必须用multipart/from-data
2.表单控件分类
textarea文本域
作用：允许用户录入多行数据到表单控件中
属性：
cols 指定文本区域的列数，变相设置当前元素宽度
rows 指定文本区域的行数，变相设置当前元素高度
select和option选项框
select属性：
size 取值大于1的话，则为滚动列表，否则就是下拉选项框
multiple 设置多选，该属性出现在<select>中，那么就允许多选(针对滚动列表)
option属性
value 选项的值
selected 预选中，注意：如果不设置selected属性的话，默认选项框中的第一项被选中
input组元素 行内块元素
type
button 普通按钮，与form表单没有任何关系
text 明文显示用户输入的数据 <input type="text">
password 密文显示用户输入的数据 <input type="password">
radio 单选按钮 checkbox复选框 checked设置值后被选中
submit 功能固定化，负责将表中的表单控件提交给服务端 <input type="submit"> 提交功能
file 上传文件所用 <input type="file">
reset 重置
value 控件的值，即要提交给服务的数据
name 控件的名称，服务端用
disabled 该属性只要出现在标签中，表示的是禁用该控件
lable
功能：关联文本域表达元素的，点击文本时，如同点击表元素一样 行内元素
for属性 表示与该lable相关联的表单控件元素的id值
input {outline:none;} /*清除输入框的外部样式*/
实例：
<form action="http://www.baidu.com" method="get">
<!-- input -->
<!--文本框-->
<p>
用户名称：
<input type="text" name="txtUsename" value="请输入用户名称" readonly>
</p> placeholder="请输入用户名" 可以放这个，就是起提示作用的
<p>
用户密码：
<input type="password" name="txtUsepwd">
</p>
<p>
确认密码：
<input type="password" name="txtcfmpwd" disabled>
</p>
<!--单选框-->
<p>
用户性别：如果想产生互斥的效果，name值要相同
<input type="radio" name="sexrdo" value="男">男
<input type="radio" name="sexrdo" value="女" checked=''>女
</p>
<!--复选框-->
<p>
用户爱好：吃
<input type="checkbox" name="chkhobby" value="吃" checked> 喝
<input type="checkbox" name="chkhobby" value="喝"> 玩
<input type="checkbox" name="chkhobox" value="玩"> 乐
<input type="checkbox" name="chkhobox" value="乐" checked>
</p>
<!-- 按钮 -->
<p>
<input type="submit" name="btnsbt" value="提交">
<input type="reset" name="btnrst" value="重置">
<input type="button" name="btnbtn" value="普通按钮">
</p>
<!--文件选择框-->
<p>
请上传文件：
<input type="file" name="txtfile">
</p>
<!--textarea-->
<p>
自我介绍：
<textarea name="txt" cols="20" rows="5"></textarea>
</p>
<!--选择框-->
<!--滚动列表 multiple设置以后实现多选效果，ctrl+鼠标左键进行多选-->
<p>籍贯：
<select name="sel" size="3" multiple="">
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
</p>
<!--下拉列表-->
<p>意向工作城市：
<select name="sel">
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
</p>
</form>
HTML标签属性
HTML标签可以设置属性，属性一般以键值对的方式写在开始标签中
实例：
<div id="i1">这是一个div标签</div>
<p class='p1 p2 p3'>这是一个段落标签</p>
<a href="http://www.luffycity.com">这是一个链接</a>
<input type='button' onclick='addclick()'></input>
我们这些标签会通过css美化，通过javascript来操作，所以可以把标签看做一个对象，那么对象就有自己的属性与方法
属性：type='button' 方法：onclick='addclick()'
注意事项：
1.HTML标签除了一些特定属性外可以设置自定义属性，一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序
2.属性值要用引号包裹起来，通常使用双引号，也可以用单引号
3.属性与属性值不区分大小写，但是推荐小写
HTML标签分类
标签元素三种不同类型：块状元素、行内元素、行内块状元素
块状元素：display:block
1.每个块级元素都从新的一行开始，并且其后的元素也另起一行，独占一行
2.元素的高度、宽度、行高以及顶和底边距都可设置
3.元素宽度在不设置的情况下，是它本身父容器的100%(和父元素的宽度一致)除非设定一个宽度
如果不设置宽度那就是浏览器的宽度
常用块状元素：<div> <p> <h1>~<h6> <ol> <ul> <table> <form> <li>
行内元素：display:inline
1.和其他元素都在一行上，在一行内展示
2.元素的高度、宽度及顶部和底部边距不可设置
3.元素的宽度就是它包含的文字或图片的宽度，不可改变
常用行内元素：<a> <span> <br> <i> <em> <strong> <label>
行内块级元素：display:inline-block
1.和其他元素都在一行上，在一行内展示
2.元素的高度、宽度、行高以及顶和底边距都可设置
常用行内块状元素：<img> <input><textarea><select>,但是select里面的option是block
标签嵌套规则
块元素可以包含内联元素或某些块元素，但内联元素不能包含块元素，只能包含其他的内联元素
块元素不能放在p标签里面 p标签不能包含div，可以包含列表标签
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊标签是：
h1~h6, p
li元素可以嵌入ul,ol,div等标签
CSS
使用css的目的就是让网页具有美观一致的界面，并且使内容与格式分离
css的出现解决了两个问题：
1.将HTML页面的内容与样式分离
2.提高web开发的工作效率
css是指层叠样式表(cascading style sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中
css的优势：
1.内容与表现分离
2.网页的表现统一，容易修改
3.丰富的样式，使页面布局更加灵活
4.减少网页的代码量，增加网页浏览器速度，节省网络带宽
5.运用独立页面的css，有利于网页被搜索引擎收录
如何使用css？
把样式规则的内容保存在css文件中，此时该css文件被称为外部样式表，然后在HTML文件中通过link标签
引用该css文件，这样浏览器在解析到该link标签时就会加载该css文件，并按照该文件中的样式规则渲染
css基础语法：
1.选择器
2.声明，由属性和值组成，多个声明之间用分号分隔
伪代码： 实例：
选择器{声明1; h1{
声明2; font-size:12px;
声明3; color:#F00;
...... }
}
css注释：/*这是注释*/
网页中引用css样式
1.内联样式
又称为内嵌方式
<style>标签
实例：
<!doctype html>
<html>
<head>
<meta charset="utf8">
<style type="text/css">
p{
color:red;
}
</style>
</head>
<body>
<p>这是一个标签</p>
</body>
</html>
2.行内样式表
实例：
<!doctype html>
<html>
<head>
<mate charset="utf8">
</head>
<body>
<p style="color:blue;">这是一个标签</p>
</body>
</html>
3.外部样式表
3.1链接式 建议用这种
index.css
p{
color:green;
}
通过link标签引入
<!doctype html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>这是一个标签</p>
</body>
</html>
3.2导入式 (了解)
@import url(other.css) # 必须写在文件最开始的位置
链接式与导入式的区别
1.link标签属于XHTML，@import是属性css2.1
2.使用link链接的css文件先加载到网页当中，再进行编译显示
3.使用@import导入css文件，客户端显示html结构，再把css文件加载到网页当中
4.@import属于css2.1特有，不兼容css2.1的浏览器是无效的
选择器
选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了
选择器为样式规则指定一个作用范围
1.基础选择器：
标签选择器
类选择器
ID选择器
通用选择器
标签选择器
通过标签名来选择元素，可以选中所有的标签
不管标签藏得多深，都能选中，选中所有指定标签
可以用来设置共性元素
实例：
p{
color:red;
}
将所有的p标签设置字体颜色为红色
类选择器 css里面尽可能多用这个
通过样式类选择元素
所谓类就是class，class与id很相似，任何标签都可以加类，但是类可以重复
同一个标签可以有多个类，多个类的时候，后面类的效果会把前面的覆盖掉，只覆盖相同的部分
div>p*3然后tab键一下出来三个<p>
一定要有公共类的概念
1.不要试图用一个类将页面写完，一个标签应该用多个类来设置属性
2.每个类要尽可能的小，有公共的概念，能够让更多的标签去使用
实例：
.c1{
color:red;
}
将所有样式类含.c1的元素设置字体颜色为红色
ID选择器 一般用在js里面
通过元素的ID选择元素，注意id的唯一性，同一个页面中id不能重复
任何的标签都可以设置id，id的命名要规范，区分大小写，不过id还是尽量少写
实例：
#i1{
color:red;
}
将id值为i1的元素字体颜色设置为红色
通用选择器
使用*选择所有元素，性能有点差
实例：
*{
color:black;
}
2.高级选择器：
并集选择器，多个选择器通过逗号连接而成，同时声明多个风格相同样式，设置多个标签的统一样式
交集选择器，由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格
第一个必须是标签选择器，第二个必须是类选择器或ID选择器
后代选择器，外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔
标签嵌套时，内层的标签成为外层标签的后代
子元素选择器，通过>连接在一起而成，仅作用于子元素
属性选择器，选取带有指定属性的元素，或选取带有指定属性和值的元素
后代选择器实例：
因为HTML元素可以嵌套，所以我们可以从某个元素的后代查找特定元素，并设置样式
div p{
color:red;
}
从div的所有后代中找p标签，设置字体颜色为红色
儿子选择器实例：子元素选择器
div>p{
color:red;
}
从div的直接子元素中找到p标签，设置字体颜色为红色
毗邻选择器实例：
div+p{
color:red;
}
找到所有紧挨在div后面的第一个p标签，设置字体颜色为红色
弟弟选择器实例：
div~p{
color:red;
}
找到所有div标签后面同级的p标签，设置字体颜色为红色
属性选择器
css3版本中有的
除了HTML元素的id属性和class属性外，还可以根据HTML元素的特定属性选择元素
在表单控件中使用比较频繁
1.根据属性查找
[title] {
color:red;
}
2.根据属性和值查找
找到所有title属性等于hello的元素
[title="hello"] {
color:red;
}
找到所有title属性以hello开头的元素
[title^="hello"] {
color:red;
}
找到所有title属性以hello结尾的元素
[title$="hello"] {
color:red;
}
找到所有title属性中包含(字符串包含)hello的元素
[title*="hello"] {
color:red;
}
找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素
[title~="hello"] {
color:red;
}
3.表单常用 常用
input[type="text"] {
backgroundcolor:red;
}
3.分组选择器
当多个元素的样式相同的时候，我们没必要重复地为每个元素都设置样式，
可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式
实例：
div,
p {
color:red;
}
为div标签和p标签统一设置字体为红色的样式，通常分两行写，更清晰
4.伪类选择器 也是css3版本中有的
这四个要按顺序写，一定不能乱
4.1没有访问的超链接a标签样式
a:link {
color:blue;
}
4.2访问过的超链接a标签样式
a:visited {
color:gray;
}
4.3鼠标悬浮在元素上时该标签的应用样式
a:hover {
background-color:#eee;
}
4.4鼠标点击瞬间该标签的样式
a:active {
color:green;
}
4.5input输入框获取焦点时样式
input:focus {
outline:none;
background-color:#eee;
}
4.6
/*选中第一个元素*/
div ul li:first-child{
font-size: 30px;
}
/*选中最后一个元素*/
div ul li:last-child{
font-size: 30px;
}
/*选中当前指定的元素，nth-child()元素写在括号里面，数值从1开始
n表示选中所有，0表示没有选中
2n表示选中偶数2 4 6 2n-1表示选中奇数1 3 5 7
3n+1表示隔2行换一行，就是间隔两行起作用一次
*/
div ul li:nth-child(3n+1){
font-size: 35px;
}
5.伪元素
first-letter 不常用
用于为文本的首字母设置特殊样式
p:first-letter {
font-size:48px;
}
before 不常用
用于在元素的内容前面插入新内容
一定要有content
p:before {
content:"*";
color:red;
}
在所有p标签的内容前面加上一个红色的*
after 经常用
用于在元素的内容后面插入新内容
一定要有content
与布局有关(清除浮动)
p:after {
content:"?";
color:red;
}
在所有p标签的内容后面加上一个蓝色的?
6.选择器的优先级
内联样式的权重为1000
id选择器的权重为100
类选择器的权重为10
元素选择器的权重为1
权重计算永不进位
字体相关css属性介绍
font-family
字体系列
font-family可以把多个字体名称作为一个"回退"系统来保存，如果浏览器不支持第一个字体，则会尝试下一个
浏览器会使用它可识别的第一个值，如果写的都没有那就找宋体
页面中中文我们只是用微软雅黑 宋体(Simsun) 黑体，用逗号隔开
英文一般用Arial
实例：
body {
font-family:"Microsoft Yahei","微软雅黑","Arial",sans-serif
}
如果设置成inherit，则表示继承父元素的字体
简写：font:12px/30px 12px是字体大小，30px是行高
font-weight
字重(字体粗细)
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bord
inherit 继承父元素字体的粗细值
font-size
字体大小
p {
font-size:14px;
}
如果设置成inherit表示继承父元素的字体大小值
color
字体颜色
支持三种：
十六进制值，如#FF0000红色 000000黑色fff白色f00红色333灰色222深灰ccc浅灰
一个RGB值，如RGB(255,0,0) 还可以写rgba(255,0,0,0.8)最后这个a是透明度，从0到1
颜色的名称，如red
p {
color:red;
}
text-align
文本对齐
规定元素中的文本的水平对齐方式
left 左边对齐，默认值
right 右对齐
center 居中对齐
justify 两端对齐
text-indent
文本缩进，单位用em，1em就是一个字的大小，em这个单位跟字体有关
line-height
行高，一定要大于文字大小，在处理垂直居中的时候要注意盒子高度 行高 字体大小 padding等
单行文本 文字在行高的高度范围内是自动垂直居中的
如果设置行高等于盒子的高度，文本就垂直居中了，再加上text-align:center那就水平垂直都居中了
如果盒子不设置行高，设置行高的话就会自动垂直居中了，行高把盒子高度撑起来
多行文本的垂直居中用padding来处理，盒子的高度加上padding设定的值才是最终的盒子的高度
text-decoration
文字装饰
none 默认值，定义标准的文本，可以用来去除a标签自带的下划线
underline 定义文本下的一条线 可以加颜色
overline 定义文本上的一条线
line-through 定义穿过文本下的的一条线
inherit 继承父元素的text-decoration属性的值
cursor:pointer 加了这个，鼠标移动上去的时候会变成小手的样子
背景属性
background-color 规定要使用的背景颜色
background-image 规定要使用的背景图像
background-size 规定背景图片的尺寸
background-repeat 规定如何重复背景图像
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动
background-position 规定背景图像的位置
inherit 规定应该从父元素继承background属性的设置
可以设置给body
body {
.....
}
background-repeat取值范围
repeat 默认值，背景图像将在垂直方向和水平方向重复
repeat-x 背景图像将在水平方向重复
repeat-y 背景图像将在垂直方向重复
no-repeat 背景图像将仅显示一次
inherit 规定应该从父元素继承background-repeat属性的设置
background-attachment取值范围
scroll 默认值，背景图像会随着页面其余部分的滚动而移动
fixed 当页面的其余部分滚动时，背景图像不会移动
inherit 规定应该从父元素继承background-attachment属性的设置
background-position取值范围
用来定位切图 精灵图也叫雪碧图 盒子高度设置成一个图片或图标的高度然后position调整位置去切出来想要的那个元素
可以写数字 单位是像素 可以写负值
1. top left/top center/top right
center left/center center/center right
bottom right/bottom center/bottom right
上面这些如果只设置一个关键词，那么第二个值就是center，默认为0% 0%
2. x% y% 第一个值是水平位置，第二个值是垂直位置
左上角是0% 0%，右下角是100% 100%，如果只设置一个值，另一个值就是50%
3. xpos ypos 第一个值是水平位置，第二个值是垂直位置
左上角是0 0，单位是像素(0px 0px)或任何其他css单位
如果只设置了一个值，另一值就是50%,可以混合使用%和position值
实例：
body {
background-color:red;
background-image:url(xx.png)
background-size:300px 300px;
background-repeat:no-repeat;
background-position:cneter
}
简写：
body {
background:red url(xx.png) no-repeat fixed center/300px 300px;
} 顺序是固定的
css盒子模型
HTML文档中的每个元素都被描述成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒子模型
盒子模型就是在网页中显示的一些方方正正的盒子
盒子模型通过四个边界来描述：margin(外边距) border(边框) padding(内填充) content(内容区域)(width height)
border边框，常用值：
none 无边框，用这个就可以设置没有border了,0也可以
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
double 双线
border-radius:5px;/*设置圆角*/ 3px 5px都行
三要素：粗细(border-width)、颜色(border-color)、线形(border-style)
如果不写颜色，默认是黑色
如果不写粗细，默认不显示
只写线性样式，默认的有上下左右3px的宽度，solid类型 黑色
实例：
div.box {
display:inline-block;
width:200px; 指的是内容的宽度，而不是整个盒子的真实宽度，高度也一样
height:200px;
background-color:red;
padding:5px 10px 15px 20px;
border:5px solid blue;
margin:5px 10px;
}
border会改变元素的实际大小，背景色会渲染到border区域
padding内边距
控制内容到边框的距离，不支持负值
padding的区域是有背景颜色的，并且背景颜色和内容区域的颜色一样，也就是说background-color这个属性将会填充所有的border以内的区域
1.只写一个padding代表4个方向，也可以单独指定某一个方向
2.元素设置了padding值是额外加在原来大小之上的width+padding，如果不想改变实际大小，那就在width-padding对应方向的值
3.padding是添加给父级的，改变的是父级包含的内容的位置，自身位置不变，要善用父元素的padding，少用margin
4.简写方法：用空格隔开
4.1一个值：4个方向
4.2两个值：上下 左右
4.3三个值：上 左右 下
4.4四个值：上 右 下 左(顺时针方向)
pycharm里day45_css的12里面有关于清除某些标签的默认padding
margin外边距
控制元素与元素之间的距离
1.margin有四个方向，可以自己设置上下左右的宽度
2.margin会改变实际大小，背景色不会渲染到margin区域，这个区域会以空白显示，但也是盒子的一部分
3.margin是添自身的，如果哪个想要改变自己的位置，就给谁添加margin
html的部分标签自带margin padding p body ul
margin的塌陷问题：
当给两个兄弟盒子设置垂直方向上的margin时，那么以较大的那个为准，这就是塌陷
这种情况只出现在不浮动的时候，而浮动的盒子不塌陷
margin:0 auto；水平居中盒子 盒子的宽度一定要设置，并且是适用于标准流下的盒子
文字居中 text-align:center
display 重要
1.控制HTML元素的显示和隐藏
2.块级元素与行内元素的转换
block(块级)
默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分
inline(行内)
行内元素
只要设置了display:inline，那么元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响
inline-block(行内块级)
行内块级元素
同时具备行内元素和块级元素的特点
none
HTML文档中元素存在，但是在浏览器中不显示，一般用于配合JavaScript代码使用
用于隐藏，并且不占位置
如果用visibility:hidden;也是隐藏，但是会占位置，只是在页面中不显示内容，显示空白的位置
父元素设置display:table使它成为一个块级表格元素
子元素设置display:table-cell使子元素成为表格单元格，就好比是在表格中一样
float 重要
block元素通常被显示为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度
block元素可以设置width、height、margin、padding属性
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行
其宽度随元素的内容而变化，设置width、height属性无效
常见的块级元素有div/form/table/p/pre/h1~h5/dl/ol/ul等
常见的内联元素有span/a/strong/em/label/input/select/textara/img/br等
浮动的四个特性：
1.浮动的元素脱标
2.浮动的元素互相贴靠
如果父元素有足够的空间，那么3紧靠2,2紧靠1,1靠边
如果没有足够的空间，那么3靠着1，如果没有足够的空间靠着1，那么3就自己往边靠
3.浮动的元素有“字围”效果
所谓字围效果：当div浮动，而p不浮动，div挡住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果
关于浮动，我们初期要遵循一个原则：永远不要是一个盒子单独在浮动，要浮动就要一起浮动
4.紧凑的效果
就是一个浮动元素，如果不设置宽度，那么就自动收缩为文字的宽度，这点跟行内元素很像
如果想制作整个网页，就是通过浮动来实现并排
子元素浮动，父盒子一般不设置高度，只有宽度没有高度的话设置背景颜色也就没有用了
所谓的标准文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列
1.浮动会使元素脱离标准文档流，即脱标，脱标后盒子定位的时候，会把脱标的文档当做不存在，而进行定位
并且浮动的元素不需要再转成块级元素也能够设置宽高，能够并排，不区分行内还是块状元素
2.浮动会使元素提升层级
3.浮动可以使元素在一行排列，不设置宽高的时候，可以使元素适应内容
4.浮动可以使行内元素支持宽高
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位
如果某个div元素A是浮动的，A的顶部总是和上一个元素的底部对齐的
而浮动的框之后的block元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置
浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列
float属性值
1.left左浮动 左侧为起始，从左向右排列
2.right右浮动 右侧为起始，从右向左排列
3.none不浮动，默认不浮动
浮动产生的影响
浮动可以使元素按指定方向排列，直到遇到父元素的边界或另一个浮动元素停止
浮动产生的问题
父元素不设置高度，子元素设置浮动后，不会撑开父元素的高度，那么此时父盒子没有高度了
如果在次父盒子下面还有一个标准流的盒子，那么就会影响页面的布局
清除浮动：有一个目的是为了把父盒子撑起来？
1.给父元素固定高度，不灵活
2.在浮动元素最后加一个空的块元素div，且该块元素不浮动，设置其属性为clear:both 结构冗余，内墙法
3.常用方法: 伪元素清除法
.wrap:after{
clear:both; 必写
content:""; 必写，可以不写内容是空的，也可以在“”里面放一个点.
height:0; 然后把height设为0，就不占位置
visibility:hidden; 设置隐藏
display:block; 必写
}
4.给父盒子 添加overflow:hidden属性 该方法简单常用
position定位 重要
设置定位后，top/left/right/bottom属性值可以使用，就可以直接接着position下一行写 top:20px
1.relative 相对定位：相对于自身原来位置定位，仅仅是微调元素的位置
如果对当前元素仅仅设置相对定位，那么与标准流下的盒子没有区别
影响：
1.没有偏移量的时候对元素本身基本没有影响
2.提升层级，但是不要使用相对定位来做遮盖效果
三大特性：1.不脱标 2.形影分离 3.老家留坑
两个作用：1.微调元素位置 2.做绝对定位的参考
2.absolute 绝对定位
绝对定位的子盒子无视父辈盒子的padding
绝对定位下的子盒子居中
position:absolute;
left:50%
margin-left:这里写宽度的一半的负值
这三行当做公式记下来
没有定位父级，设置top值，相对于页面的左上角定位，设置bottom值，相对于浏览器的左下角定位
有定位父级，相对于最近的父级定位
父辈盒子设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，
这个父辈盒子可以是父级也可以是更高的，找最近的相对定位的父辈元素 父相子绝
不止是父相子绝，父绝子绝 父固子绝都是以父辈元素左上角为参考点，
但是父绝子绝没有实际意义，因为绝对定位脱标，影响页面布局，父相子绝常用且最有用
特性：
脱离文档流
提升层级，做遮盖效果
设置绝对定位之后，不管是块级元素还是行内元素，都可以设置宽高
3.fixed 固定在浏览器的某个位置，当前位置，可以做小广告
1.脱标 2.提升层级 3.固定不变不会随页面滚动
参考点：设置top以浏览器的左上角为参考点
设置bottom以浏览器的左下角为参考点
作用：1.返回顶部栏 2.固定导航栏 3.小广告
4.static 静态定位，默认```
css的继承性
给父级设置一些属性，子级继承了父级的该属性
有一些属性是可以继承下来的：color、font-*、text-*、line-*只有这四个
像一些盒子元素，定位的元素(浮动，绝对定位，固定定位)不能继承
css的层叠性
谁的权重大，浏览器就会显示谁的属性
权重大的标签覆盖掉权重小的
比权重就是数个数：id选择器 类选择器 标签选择器，先比id，有结果就不往后比了，没结果再比类选择器
当权重一样的时候，以后设置的属性为准
继承来的属性，权重为0
<!--!important设置权重无限大
不影响继承来的权重，只影响选中的元素-->
总结：先看有没有被选中，如果选中了，数个数(id，class，标签的数量) 谁的权重大就显示谁的属性
权重一样大的话以后面设置的为准
如果没有被选中，权重为0
如果属性都是被继承下来的权重都是0，按照就近原则，谁描述的近，就显示谁的属性
都描述的一样近的话就开始数个数了
z-index
1.z-index值表示谁压着谁，数值大的压盖住数值小的
2.只有定位了的元素，才能有z-index，也就是说不管是相对定位、绝对定位还是固定定位
都可以使用z-index，而浮动元素不能使用
3.z-index值没有单位，就是一个正整数，默认的z-值为0
4.如果大家都没有z-index值，或者z-index值一样，那么谁写在html后面，谁在上面压着别人
定位了元素，永远压住没有定位的元素
5.从父现象：父亲怂了，儿子再牛逼也没用