HTML的组成
<!DOCTYPE html>
<!-- 文档头申明 -->
<meta charset="UTF-8">
<!-- 解析规范（大管家） -->
head:
meta[keywords,description,author],title,link,script.style
css-正文
css的正文/* */
html-正文
<!-- html的正文 -->
css的引入有四种
一、行间款式
写法：在标签中，写一个style的属性,例如：style="..."，在引号当中写css款式
劣势：优先级最高
劣势：不是人写的代码
二、外部样式表
写法：在head标签中，写一个style的标签，在style标签中通过选择器来管制款式
通过选择器进行对标签的款式操作
三、内部样式表
1.新建一个css的文件
2.在head标签中写一个link标签，
写法：
<link rel="stylesheet" href="门路">
用来关联1个css文件，在css文件中，通过选择器来管制款式
长处：利于扩大，利于保护
毛病：须要申请服务器。
四、@import
css款式的优先级：引入行间款式 > id选择器 > class选择器 > 标签名选择器
css-background
背景色彩
background-color: 英文单词，十六进制，rgb()
背景图片
background-image:url("门路")
舒适小提示：门路不要写错了，否则不显示
背景平铺
background-repeat:
repeat-x x轴平铺
repeat-y y轴平铺
no-repeat 不平铺
背景定位
background-position:x轴地位 y轴地位;
第一值为X轴地位
能够承受含糊的值如：left center right
也能够承受具体的数值：如：100px
第二只为Y轴地位
能够承受含糊的值如：top center bottom
也能够承受具体的数值：如：100px
例子：
background-position:100px 35px;
或
background-position:right bottom;
复合写法
background:color image position repeat;
css-边框
border 边框，算标签页面的宽度
边框形态：solid(实线) dashed(虚线) datted(点线)
边框通明 border:10px solid transparent;
css-圆角
圆角 border-radius:具体数值
一个值代表4个角
两个值代表两条对角线，第一个值代表左上/右下，第二个值代表右上/左下
三个值，第一个值代表左上，第二个值代表右上/左下，第三个值代表右下
四个值，从左上开始，顺时针顺次安顿，第一个值左上，第二个值是右上，第三个值右下，第四个值是左下
css-内边距
padding 内边距，算标签在页面的宽度
css-外边距
margin 外边距，不算标签在页面的宽度
margin的小性子
1.父级的第一个子级的margin-top会穿透父级
解决办法：
1.给父级加边框
2.overflow:hidden
3.不要用margin-top,用父级的padding-top
2.兄弟之间的margin-top和margin-bottom会叠压
盒模型 标签在页面中具体的地位
页面的宽度:border-left + padding-left + width + padding-right + border-right
页面的高度:border-yop + padding-top + height + padding-bottom + border-bottom
标签类型
一、块标签
个性：
1 独占一行
2 默认宽度是父级的100%
3 反对所有的css款式
权重最大的标签是：title
在head标签中，权重最重的标签，为10.
1、div
史上最罕用的标签
写法<div></div>
语义：无意义
权重：无
2、h1-h6
题目标签
写法：双标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
3、p标签
4、 ul ol li
二、内联标签
内联标签分为：
内联标签
内联块标签
个性：同类型的标签在同一排
内容撑开宽高
不反对宽高，不反对margin和padding
1、span
无意义
无权重
2、strong
强调
强调作用
默认款式：font-weight
3、em
链接
链接作用
舒适提醒
1.href="..." 中的网址肯定记得加http://
2.在新页面关上，要在标签中增加一个target属性，值为_blank；
例如：
<a href="http://www.baidu.com" target="_blank"></a>
三、内联块标签个性：
1.同类型的标签排在同一排
2.内容撑开宽高
3.反对所有的css款式
4.代码换行被解析,解析宽度和父级的字体大小无关
img
图片标签
写法:<img src="门路" alt="图片说明">
语义：图片
权重：alt利于搜索引擎优化
标签类型的转化
display
block 转为块标签
inline 转为内联标签
inline-block 转为内联块标签
none 显示为无
字体大小
font-size:具体数值;
行高
line-height:具体的数值;
示意文字中一行的高度（高低居中）
测量方法，从一行文字的顶端，量到下一行文字的顶端
文字字体
font-family:
'simsun' 宋体
'simhei' 黑体
'Microsoft yahei' 微软雅黑
'kaiti' 楷体
字体歪斜
font-style:
italic 歪斜
normal 不歪斜
文本款式（字体的粗细）
font-weight:具体的数值(100 ~ 900)/ bold/bolder
例子:font-weight:100;
文本款式的复合写法
font:style weight size/line-height family ;
舒适小提示：
font的设置，必须蕴含 font-size、line-height和font-family，否则不失效
例如：
font:20px/40px "simhei";
文本对齐
text-align:;
left 默认值 左对齐
center 两头对齐
right 右对齐
首行缩进
text-indent:具体的数值/2em;
具体的数值就是偏移多少数值
2em,是指缩进两个字符
字符间隙
letter-spacing:具体的数值;
舒适提醒：数值能够是正数；
单词间隙
word-spacing:具体的数值;
舒适提醒：数值能够是正数；
文本款式的继承问题
父级设置的文本款式，子级会享受父级的文本款式，就是继承
只有a标签的文字色彩设置例外，a标签的文字色彩须要独自设立色彩。
浮动
float
飘起来 left right
浮动的个性
1.浮动元素排在同一排
2.浮动元素内容撑开宽高
3.浮动元素反对所有的css款式
4.脱离文档流
解决脱离文档流的形式为清浮动（4种清浮动的形式）
1.父级浮动
弊病：整个页面都会飘起来，margin居中会生效
2.给父级加高，子级有多高，父级就多高
弊病：不利于扩大
3.给父级加overflow:hidden;（hidden【暗藏】；scroll【呈现滚动条】）
弊病：裁刀，子级超出的内容全副干掉
4.标签清浮动
clear
left ：标签左侧不容许呈现浮动元素
right：标签右侧不容许呈现浮动元素
both：标签两侧不容许呈现浮动元素
5.晋升层级半级
定位
position:relative 绝对于原地位的左上角，不会让出原来的空间
个别状况下会作为，脱离规范文档流父级来应用
position:absolute 相对定位【页面的左上角定位，脱离规范文档流父级】
position:fixed 固定定位【个别用来定广告位】
z-index 只能用在脱离了规范流的元素中【position】
float:文字围绕图片
table 内部表格构造
thead 表格头部
tr行
th头部单元格【默认状况下，文本程度，垂直对齐，文本加粗】
tr
td内容单元格
tbody
tfoot
鼠标悬浮 ：hover
：first-child第一个子元素
：last-child最初一个子元素
：nth-child(n）第几个子元素
：nth-child(2n）偶数个元素
：nth-child(2n-1）奇数个元素
空格 后辈选择器
>子元素选择器
+第一个相邻兄弟
~所有兄弟
ftp:文件的上传下载
服务器/空间：阿里，景安【文件夹】
域名 www一级域名 二级域名
SEM:百度竞价，花钱的
SEO：优化，不花钱，代码，文件，服务器，内部文字【外链】
品牌的关键词，行业的关键词
keywords:
description:
h1：题目
单标签：<img/> <br/> <hr/> <mata/><link/>
双标签：html body head h1~h6 p a i ul li ol strong
em span div dt dd dl b u sup sub
form表单，用来做数据的提交，跟后盾交互
mathod: get【地址栏传输数据；电商网站；字符串】
post【暗藏的模式传递；传输明码；file，能够传输大文件】
action 属性，定义连贯的门路；如果不写，跳转到以后门路；
input 输出元素
type 类型辨别
text 单行文本
placeholder 提醒文本，输出文本之后会主动隐没
maxlenth 最大长度
name 传输数据的键【重要的，必须增加】
password 明码框【cols列[宽]，row行[高]】
textarea 多行文本
radio 单选按钮【所有的按钮的name值必须统一[性别]】
checkbox 多选按钮【name值必须统一】
select option 下拉菜单
file浏览框
reset 重置按钮
button一般按钮
submit 提交按钮
value 提醒文本
按钮的readonly和disabled
readonly 只读，能够提交数据
disabled 不容许，禁止 不能够提交数据
border-radius ：%或者px圆角
box-shadow 背景暗影
box-shadow: 程度暗影的地位 垂直暗影的地位 含糊度 暗影的尺寸，内外部暗影【默认为outside】，内暗影inside
分类：单层暗影，多层暗影，内暗影，外暗影
图片设置暗影：外暗影，不能设置内暗影
text-shadow 文本暗影
语法 text-shadow：x,y,blur,color
背景突变 指定两个以上的色彩进行适度
分类：
线性突变：linear-gradient
径向突变：radial-gradient
反复线性突变：repeating-linear-gradient
反复径向突变：repeating-radial-gradient
线性突变语法：background：linear-gradient（方向，color1，color2）
径向突变语法：background：-webkit-radial-gradient(center,shape【circla圆形，ellipse椭圆】,size,color1,color2)
shape示意径向突变的形态，默认状况下是椭圆的
浏览器的兼容性：
-o- Opear欧朋
-webkit- Safari Chrome
-moz- Firefox火狐
-ms- IE浏览器
默认状况下：方向为从上到下
before和after 伪元素选择器
iframe 内联框架
varify 验证码
opacity 图片，文本通明
overflow 溢出
background-Origin 背景图片地位
background-clip 背景剪切
伪类： ：hover ：focus ：active
伪元素：
first-letter：第一个文本
first-line：第一行
before 在元素后面插入元素
after 在元素的前面插入元素
伪类：
a:link 【未拜访的链接】蓝色
a:visited【已拜访过的链接】紫色
a:hover【鼠标滑过链接】没有色彩
a:active【已选中的链接】红色
iframe 在一个html页面中增加另一个html（内联框架）
<iframe name="" src="" frameborder="0|1" scrolling="no|auto|yes"><iframe/>
name:规定iframe的名称
src：规定iframe 中显示文档的URL
scrolling:规定是否在iframe 中显示滚动条
white-space: nowrap;【不让文本换行】
overflow：hidden【溢出暗藏】
text-overflow：ellipsis;【增加省略号】
雪碧图 借助工具
transition:过渡过程（不兼容的，须要加上浏览器前缀）
transition：属性，破费的工夫，速度，提早
transition-property: 规定利用过渡的css属性的名称
（width height background transform）
transition-duration:定义过渡成果。默认是0（2 ，3）
transition-timing-function：规定过渡成果的工夫曲线。默认是ease（ease由慢到快 再由快到慢，linear匀速，ease-in由慢到快，ease-out先快后慢，ease-in-out中间慢）
transition-delay：规定过渡成果何时开始。默认是0s。
transform：rotate(0deg)；旋转0度
deg为正值时，顺时针
负值，逆时针
缩放：scale（x，y）[x,y别离代表x轴y轴]
x是倍数，1为不缩放；大于1 放大；小于1放大
能够为负值，如果x为负值，沿着x轴翻转
如果y轴为负值，沿着y轴翻转
如果都为负值则沿着中心点翻转
x,y的值为倍数，不能用px
歪斜：skew(x,y)
100.本期的教程到了这里就完结了啦,让咱们一起致力走向巅峰!
发表回复