首页 > 代码库 > html－Css 基础大全
html－Css 基础大全
一、 HTML基础
Web组成：结构（XHTML、XML）、表现（css）、行为（ecmascript）
HTML：超文本标记语言（hyper text markup language）
HTML5的基本结构：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body>10 </html>
HTML的基本语法：
常规标记
<标记 属性=”属性值” 属性=”属性值”></标记>
空标记
<标记 属性=”属性值” />
标题字体<h1~h6></h1~h6>
段落<p></p>
加粗<b></b> <strong></strong>
倾斜<em></em><i></i>
下划线<u></u>
删除线<del></del>
上标<sup></sup>
下标<sub></sub>
空格
大于号>
小于号<
备案图标©
强制换行<br/>
水平线<hr/>
超链接<a href=http://www.mamicode.com/”路径” alt=”替换文本” title=”提示信息” target=”_blank”>
图片<img src=http://www.mamicode.com/”路径” alt=”替换文本” title=”提示信息” width=”” height=”” border=””/>
无序列表<ul><li></li></ul>
有序列表<ol><li></li></ol>
自定义列表<dl><dt></dt><dd></dd></dl>
表格<table><tr><td></td></tr></table>
表格里的重要属性：
单元格的间距cellspacing
单元格与内容的距离cellpadding
边框border
宽width
高height
边框颜色bordercolor
背景颜色bgcolor
行合并rowspan
列合并colspan
表单域：<form name=”表单名称” method=”提交方式方法” action=””></form>
表单控件<input type=””>
文本框 text
密码password
单选按钮radio
复选框checkbox
提交按钮submit
重置reset
按钮button
禁用disabled
默认选中checked
下拉菜单<select><option></option></select>
多行文本<textarea cols=”” rows=””></textarea>
常用标签 div span
Get与post的区别：
Get是向服务器获取数据，post向服务器上传数据，出于安全性考虑我们建议用post
二、Css的基础
CSS层叠样式表（cascading style sheets）
Css的样式表：
内部样式表：直接写在头部
<style type=”text/css”>css语法</style>
内联样式：（直接写在html标签里面）
<div style=”color:red”></div>
外部样式表：（建立在html的外面需要引用才能生效）
引用方式：
<link rel=”stylesheet” type=”text/css” href=”路径”><style type=”text/css”> @import url(路径);</style>
两种外部样式表引用方式的区别
A、 老祖宗的区别，link是XHTML提供的，可以引用其他文件例如RSS文件，@import只能引用css文件
B、加载顺序的区别：link和html一起加载，@import是等html加载完成之后再加载
C、兼容性的区别：@import在ie5以上才支持，link没有限制
D、控制dom的区别：link支持@import不支持控制dom
样式表的优先级：
内联样式表优先级最高，内部和外部的优先级与顺序有关，谁在后边谁生效
CSS的选择器：
类型选择器（标签选择器）例如h1{color:red;}
Id选择器 例如：#top{color：red} <div id=”top”></div>
类选择器（class选择器）例如：.class{color:red;} <div class=”class”></div>
通配符 *{color:red;}
包含选择器 例如 p b{color:red}
群组选择器 例如 h1,h2,p….{color:red;}
伪类选择器 例如
a:link{color:red;} a:visited{color:#00f;} a:hover{color:#ff0;} a:active{color:#0f0;}
伪类选择器要注意顺序（L V H A）
选择器的权重：
继承 0
类型 1
类 10
伪类 10
Id 100
内联 1000
注释：
Html注释 <!—注释-->
CSS注释/*注释*/
三、 CSS核心属性
文字的设置：
字体font-family（如果是中文需要加双引号，如果是是由多个英文单词组成需要加双引号，只有一个英文单词不需要双引号，文字字体可以设置多个，中间用逗号隔开）
大小font-size
颜色color
加粗font-weight：（normal正常、bold加粗）
倾斜font-style：（italic倾斜、normal正常）
大小写font-variant
文字的复合写法：font：style variant weight size family
当同事设置文字大小字体行高时写法font：size/line-height family
文本设置
水平居中 text-align（left左 right右 center居中 justify两段对齐）
垂直对齐vertical-align（top上 bottom下 middle居中 图片与文字才能生效）
行高line-height（当单行文本行高等于实际高度可以居中，当大于时居下，小于时居上）
文本修饰text-decoration（none、underline、overline、 line-through）
首行缩进 text-indent（可以设置负值）
字符间距 letter-spacing
词间距 word-spacing
控制文本大小写text-transform（）
文字阴影 text-shadow（c3出来的某些浏览器还不支持）
列表的设置：
项目符list-style-type（none）
项目符设置为图片list-style-image
项目符的位置list-style-position
去掉项目符list-style：none
边框 border：3px solid #f00（粗细 线型 颜色 无顺序要求）
上边框border-top
左边框 border-left
有边框 border-right
下边框 border-bottom
更改某一边的粗细border-left-width
更改某一边的线型border-top-style（solid实线 dashed虚线 dotted点状线 double双实线）
更改某一边的颜色border-top-color
背景设置：
背景颜色background-color
背景图片background-image：url（路径）
背景平铺 background-repeat（no-repeat、repeat、 repeat-x、 repeat-y）
背景的位置background-position：值1 值2；
如果是方向先是左右（left center right） 后是上下（top center bottom）
具体数值，向左和向上是负值
背景的固定 background-attachment（scroll滚动 fixed固定）
浮动 float（left right none）
浮动的三大特征：脱离正常文档流，后边的紧跟着前边当宽度不够时自动换行，会占据行内元素的空间。
清除浮动clear（left right both）
四、 盒模型
盒模型的组成：
内容（width、height） 内填充（padding） 边框（border） 外填充（margin）
内填充（padding）外填充（margin）值的四种情况
一个值：代表上下左右
两个值：代表 上下 左右
三个值：代表 上 左右 下
四个值： 代表 上 右 下 左
注意：margin可以设置负值，padding不可以 背景颜色或图片不能延伸到margin区域
盒子的实际宽度=左边距+左边框+左填充+内容+右填充+右边框+右边距
盒子的实际高度=上边距+上边框+上填充+内容+下填充+下边框+下边距
Margin-top不生效的解决办法
1、给父元素添加边框
2、父元素添加padding
3、父元素浮动
4、自身浮动
盒子直接的距离：
两个div都不浮动正常显示，上边设置margin-bottom，下边设置margin-top时他们上下的距离是最大值
一个浮动一个清除浮动，上边设置margin-bottom，下边设置margin-top时他们上下的距离是浮动的距离（如果上面存在多个浮动div且设置距下边距离不同取最大值）
两个都浮动当宽度不够时会自动换行，上边设置margin-bottom，下边设置margin-top时他们上下的距离是两个之和
五、文本溢出
容器溢出overflow
Visible：默认值
Hidden：隐藏且不可见
Scroll：隐藏以滚动条形式可以
Auto：自适应，超出显示滚动条不超出不显示
空白空间white-space
Pre：等宽预格式化显示保留文字间空格遇到边界不换行
Pre-wrap：等宽预格式化显示保留文字间空格遇到边界换行
Pre-line：不保留文字间空格
Nowrap：强制文本在一行显示
Normal：正常的默认值
文本溢出text-overflow
Clip：裁切
Ellipsis：溢出显示省略号
超出文本显示省略号的条件：
1、宽度width：value
2、强制在一排显示white-space：nowrap；
3、超出隐藏overflow：hidden；
4、文本溢出显示省略号text-overflow：ellipsis；
六、 元素类型
分类：块状元素 内联元素 可变元素
块状元素与内联元素的区别（div与span的区别）：
Div为块状元素，独占一行，自上而下排列
Span为内联元素，自左向右依次排列，知道遇到边界换行
Div可以设置宽高，span不可设置宽高
他们都遵循盒模型但是span的和模型的某些属性不能正常显示
常用的块元素：div dl dt dd ol ul h1-h6 p
常用的内联元素：a span b strong em i
元素类型之间的转化display（属性值有18个）
Block：变成块状
Inline：内联
Inline-block：行内块元素（这种类型可以使用vertical-align）
None 隐藏
List-item 列表类型
大多数的块元素的默认元素类型是block，li的默认类型为list-item
大多数内联元素的默认类型为inline，img input的默认类型为inline-block
七、浏览器兼容
最早的浏览器：网景领航者简称NN
五大浏览器内核以及他们的代表作：
Trident（三叉线） ie 360 市场份额最大
Grcko（壁虎）火狐 开源
Presto（迅速的）欧朋 渲染速度最快
Webkit 苹果 谷歌 跨平台
Blink 他是由谷歌和欧朋共同开发
常见的兼容性
1、div插入图会有三像素问题
</div>与img在一排显示（只有ie6生效）
将img转化成块状元素添加display：block
2、 li dl插入图的间隙问题
将img转化成块状元素添加display：block
3、ie6的双边距问题（浮动元素的双边距问题）
浮动元素添加display：inline
4、ie的默认高度问题（18像素一下的高度）
font-size：0或者overflow：hidden
5、表单行高不一致
给input标签添加float：left
6、 同一表单行高
是给input一个实际高度
7、按钮大小不一致
按钮的边框是算在高度里边的
用a标签代替按钮或者给按钮单独写样式
在按钮外部套一个标签并将input的样式清空
直接用图片作为背景设置宽高
8、百分比的bug
Clear：right
9、鼠标指针异常
Cursor：pointer
10、透明属性
Opacity：value（0-1）
Filter：alpha（opacity=value）value=http://www.mamicode.com/0-100
11、下划线只对ie生效
加号 ie6 ie7
\9 ie6-ie10
\0 ie8以上
* ie6 ie7
12、关键字！important（将此属性的权限设置为最大，ie6不支持）
八、 设置导航时 li浮动 a也给浮动
写导航时中间的间距都给a尽量用padding
如果左边一张图片右边是导航想在一排显示需要图片左浮动 ur右浮动
九、 定位position(用定位时宽一定要有)
Static 默认
Absolute 绝对定位 脱离正常文档流 不占用空间 可以层叠
Relative 相对定位 相对原来位置的偏移 占用空间
Fixed 固定
一个固定宽高的div如何水平垂直居中
一种：宽200px 高 100px(用绝对定位或固定)
width:200px;
height:100px;
position:absolute(fixed);
left:50%;
top:50%;
margin-top:-50px;
margin-left:-100px;
一种：宽20% 高 10%(用绝对定位或固定)
width:20%;
height:10%;
position:absolute(fixed);
top:45%;
left:40%;
如果想让子元素根据父元素去定位，需要给父元素一个相对定位
如果父元素没有任何定位，那么将依据浏览器进行定位，html是最大的包含块
锚点：必须是id=”锚点名称” a标签里必须是href=http://www.mamicode.com/”#锚点名称”
圆角：border-radius
单独设置某一角 border-top-left-radius
滚动条 overflow overflow-x overflow-y（visible、hidden、scroll、auto）
Flash
Marquee
十、图片整合background-position（向上、左走是负值）
图片整合的优势：
减少向服务器请求次数，提高访问速度；
减小图片体积
十一、 宽高自适应
宽度自适应width100%
最小高度的自适应min-height（ie6不识别min-height）
解决方式：min-height：value ；_height:value;
Min-height:value; height:auto !important; height:value;
元素的高度自适应窗口的高度
Html,body{height:100%}
元素本身设置为height：100%；
浮动元素的父元素高度自适应（高度塌陷）
解决方式：父元素添加overflow：hidden
在浮动元素的下边添加一个空div设置样式如下：
Clear：both；height：0； font-size:0；overflow：hidden；
万能清除法
：after{content:”.”; display:block; height:0; visibility:hidden; clear:both;}
伪对象选择符：（ie6及以下不支持）
：after在后边
：before在前边
：first-letter第一个字
：first-line第一行
十二、表单表格的高级
表单的组成：表单域form 表单控件 input 提示信息 label
表单字段集 fieldset 字段集标题 legend
文件域 type=”file” 图片域 type=”image”
表格按数据行分类：表头thead 表体 tbody 表尾 tfoot
合并单元格间距border-spacing
合并相邻边框border-collapse
表格内容为空时隐藏 empty-cells：hide
控制单元格行、列的算法 table-layout：fixed、auto
表格的标题 caption
表格的列标题 th
表格的分组rules（all、cols、rows、groups）
Col colgroup
这些只是基础知识，学会这些并不一定就能写出一个很好的静态网页，还需要多实践，灵活运用。
html－Css 基础大全