python-前端-html&css
目录:1. 计算机执行一条指令的主要步骤 2.前端基础 3.html 4.cssjavascript
计算机执行一条指令的主要步骤css
1.取值fetchhtml
2.译码decode前端
3.执行executejava
4.回写write-backcss3
第一步：web
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:zhaoxu@tedu.cn">联系咱们</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.从父现象：父亲怂了，儿子再牛逼也没用
- 1. htmlCss----Day3
- 2. htmlCss----html
- 3. htmlCss----Day11
- 4. htmlCss-----Day4
- 5. htmlCSS面试题
- 6. htmlCSS-----Day14（css定位）
- 7. python以前端
- 8. python 前端HTML
- 9. python--前端CSS
- 10. python前端CSS
- 更多相关文章...
- • SQLite - Python - SQLite教程
- • Docker 安装 Python - Docker教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Docker容器实战(一) - 封神Server端技术
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. htmlCss----Day3
- 2. htmlCss----html
- 3. htmlCss----Day11
- 4. htmlCss-----Day4
- 5. htmlCSS面试题
- 6. htmlCSS-----Day14（css定位）
- 7. python以前端
- 8. python 前端HTML
- 9. python--前端CSS
- 10. python前端CSS