html CSS 学习总结
HTML文件格式
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
标签
<b></b>粗标签
<strong></strong>粗标签
<mark></mark>高亮强调
<em></em>斜体强调
<i></i>斜体
<p></p>文本，删除空格
<pre></pre>保留原来的文本
<form></form>表单
文本框（可在尖括号里添加value对其进行初始化）
<input type="text"/> 普通文本框
<input type="password"/>密码框
<input type="textarea"/>文本域
<textarea ></textarea>文本域（属性：readonly（只读），disable（不可使用））
按钮
<input type="submit" value="按钮"/>（触发提交）
<button></button>普通按钮
<input type="reset" value="重置按钮">(重置按钮)
下拉框
<select>
<option value="">""</option>
......
</select>
单选框
<label>""</label><input type="radio" name=""/>
<label>""</label><input type="radio" name=""/>
复选框
<label>""</label>
<label></label><input type="checkbox"/>
......
<span></span>包含文本的标签
<fieldset></fieldset>定义一个框
<legend>""</legend>在框上添加文字
HTML框架
iframe内联框架，用来嵌入另一个文档
<iframe src="文件路径"></iframe>
表格
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
colspan单元格列合并
rowspan单元格行合并
<div></div>布局
<table></table>布局
<ol></ol>有序列表
<ul></ul>无序列表
<dl></dl>自定义列表
css样式 h{第一个样式；第二个样式}
背景
background
-color;颜色
-image:url(图片路径);背景图片
-repeat背景重复（no-repeat默认左上角，repeat-y纵坐标平铺，rapeat-x横坐标平铺）
-position图片位置（center，right bottom...）
文本
text-indent缩进文本
text-align水平对齐（left，right，center）
word-spacing英文字符间隔
letter-spacing单词或汉字间隔
text-transform字符转换（uppercase大写，lowercase小写，none不改变，captialize首字母大写）
text-decoration文本装饰（underline...）
white-space处理空白符
direction文本方向（rtl靠右显示）
字体
font-family字体样式
font-style字体风格（italic 斜体，oblique文本斜体，normal正常）
font-varaint字体变形（small-caps小型大写字母,normal，inherient继承）
font-weight加粗
font-size字体大小
超链接
a:link{}链接默认
a:visited{}点完之后
a:hover{}鼠标放上去
a:active{}点击时
CSS列表
无序列表前的标识
p{list-style-square}正方形
p{list-style-image:url("路径")}图片
p{list-style-position}(inside将形状放于文本内，outside右偏移)
CSS表格
border-collapse边框合并
text-align水平设置（center,left,right）
vertical-align上下设置（middle，bottom，top）
CSS样式表优先级
内联>内部样式表>外部样式表
CSS框模型
padding内边距
padding:x x x x(上)（右）（下）（左）
padding：x x;（上下）（左右）
padding:x x x（上）（左右）（下）
pdding:x(上下左右)
margin外边距（同内边距）
border边框（left,right,top,bottom）
min-width:""当品目缩放到""时，会产生滚动条
定位
position:relative相对定位
1.使用相对定位不会影响元素本身
2.不会脱离文档流，只是发生了偏移
3.如果没有设置偏移量，不会对元素造成影响
4.还会占据原来的空间
position:absolute绝对定位
1.脱离文档流
2.使用绝对定位会设置当前元素为inline-block(可以设置宽高)
3.可以使坐标进行移动（
1.绝对定位没有定位父级，默认以文档作为父级
2.如果有定位父级，就以定位父级移动
3.如果有多个定位父级，找最近的定位父级
4.相对定位一定配合绝对定位使用）
z-index:1/2/3...提升模块优先级，但其必须配合position使用
！important可将其他权重设置为0
position:static静态定位
按照正常的文档流排版（默认属性）
position:fixed固定定位（可做导航，不会随着滚动条运动而运动）
浮动
float:left/right/none
1.使块元素在一行显示，为每个元素设置了inline-block
2.使行元素支持高、宽
3.不设置高宽，高宽由内容决定
4.left从左往右开始，right从右往左开始
浮动按照一定顺序排列，碰到父元素的边界就停止或者前一个兄弟元素也停止下来
浮动会脱离文档流
clear:（both消除两边的浮动,left,right）
html CSS 学习总结的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- css学习归纳总结（三） 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- css学习归纳总结（二） 转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
- css学习归纳总结（一） 转
原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...
- 【2016年特别福利】史上最全CSS学习资料大全
css学习篇 [2016年特别福利]史上最全CSS学习资料大全
- 【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
- css学习归纳总结
来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...
- html+css学习总结
HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
随机推荐
- [Outlook] outlook如何实现自动CC和BCC邮件发送
由于需要在不同机器上发送邮件,最终发送的邮件会在不同的机器上,最终导致邮件丢失,以后想找也找不回来,故在网上搜索一翻,找到解决办法. 1. 实现自动CC邮件发送: 方法:使用outlook的配置规则 ...
- jackson对多态or多子类序列化的处理配置
[TOC] Jackson Jackson可以轻松的将Java对象转换成json对象和xml文档,同样也可以将json.xml转换成Java对象. 多态类型的处理 jackson允许配置多态类型处理, ...
- World of Warcraft
一大堆快捷键 鼠标中键:致盲 上滚:闪避 下滚:疾跑 通用:~伺机待发 Q加速 E斗篷 R徽章 T消失 alt+Q脚踢,alt+W毒刃 alt+E亡灵意志 alt+D烟幕弹 alt+F死亡标记 Z天降 ...
- eclipse文本编码格式修改为UTF-8 (转)
如果要使插件开发应用能有更好的国际化支持,能够最大程度的支持中文输出,则最好使 Java文件使用UTF-8编码.然而,Eclipse工作空间(workspace)的缺省字符编码是操作系统缺省的编码,简 ...
- zoj 3471(状态压缩）
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4257 dp[state]表示当前状态为state时的所能获得的最大值 ...
- Arduino101学习笔记（十二）—— 101定时器中断
一.API 1.开定时器中断 //*********************************************************************************** ...
- 为什么我们可以使用while(~scanf("%d"))读到文件末尾
经过测试文件末尾是一个标志位EOF 在c语言里我们用int来输出EOF 可以发现EOF等于-1 我们之前那个文章已经写过了..在c语言里负数的存储策略是补码 [-1]的补码=~(1)+1 那么就是比如 ...
- LoadRunner关联之学习笔记
去银行办业务,进银行的门,大堂经理给你一张业务号,拿着这张业务号,去柜台办理业务.--录制下来 第二天又去银行,还是拿着这张业务号,去柜台办理业务,柜员就不理你了,因为这张业务号是昨天的.--回放过程 ...
- 【转】【技术博客】Spark性能优化指南——高级篇
http://mp.weixin.qq.com/s?__biz=MjM5NjQ5MTI5OA==&mid=2651745207&idx=1&sn=3d70d59cede236e ...
- JNDI 配置：JBoss + MySQL
一.JNDI 名词解释 JNDI 是Java 命名和目录接口(Java Naming and Directory Interface,JNDI)的简称.从一开始就一直是 Java 2 平台企业版(JE ...