`

htmlcss总结

 
阅读更多

1 HTML知识
1:<a> 标签可以自定义属性
2:块级元素 如 div 占一行
   内联元素 如 span 占往下排的
3:<mate 设置编码;文件的编码,要与指定的编码对应
4:span 内联元素,用css来美化的如
<p>aaaa <span>bb</span></p>
内联元素不能嵌套 块级元素
5:div可以存放各种标签,包括自己
6:块级元素不能放在P标签里面
<p>  <div>asdfasf</div> </p> 错误的
7:head标签中可以放的
  Base,link,mate,title,style,script
Mate 描述标签,用于搜索引擎抓取,
Link 引入css
8:iframe 框架标签
2:CSS知识
1:选择器
2:Id不能重复
3:Class 可以多个地方重复使用
Class 可以指定多个样式 如:class=”st1 st2”
4:标签选择器,样式太广了
5:交集选择器,标签下面的,class 或者id
如 p.class1 { ….} 作用于,p标签下的class
6:并集选择器
P,div {…..}  p,div 都用样式了
7:后代选择器
Div p {…..}  表示div 下面的p
如:<div><p>sdfsdf</p></div>
8:伪类选择器,鼠标放上去才有效果,一般放在<a> 标签上
A:hover{}
Div:hover{}
9:通配符选择器
*{}
10:继承,body的后代都会起作用
Body{}

3:构造文本-设置文字
1:文本缩进
text-indent:10px;
2:文本对齐
text-align:left;
3:行高
line-heigth:10px;
4:单词间隔
word-spacing:201px;
5:中文间隔
Letter-spacing:10px;
6:文字下划线
Text-decoration:none;
7:文字字体(如果用户没有字体,依次类推)
Font-family:’微软雅黑’,’宋体’;
8:字体风格
Font-style
9:字体大小
font-size
10文本颜色
Color
11文本加粗
Font-weigth
4:块级元素
1:宽高
Width
Heigth
2:背景图片
背景图片的地址是相当对于css目录,写地址
背景图片重复的问题,当div,太高,太宽时,背景重复
Background-rapeat
Norepeat 就不重复了
设置背景图片位置
Background-position
3:边框
Border
border:1px solid #F00;
4:子元素的宽带,大于父元素
Overflow
5:把内联元素 转为块级元素,如吧a标签,转为块级
Display:black;
Display:none;元素就不显示了
5:css盒模型
1:块级元素,相当于一个盒子,处理边框与内容直接的间隙
内边距:padding
外边距:Margin
6:浮动
1:4个div 默认4行显示,如何显示在一行呢??,要用到浮动
2:浮动,相当于浮在上面
  Float:left
        Right
        
取消浮动影响,清除浮动
Clear:left
7:相对定位,绝对定位
1:相对定位
Position:relative;
Left,rigth,top,....
2:绝对定位(相当于body的左上角的位置,进行定位)
Position:absolute;

相对定位 ,相当于上一个元素
绝对定位,相当于body左上角的位置
值可以为负
3:固定定位(当高度很高,有滚动条时,拉动滚动条,固定定位位置不变)
Position:fixed;
4:重叠元素的堆叠元素的顺序
Z-index 设置 堆叠顺序
只对,相当定位,绝对定位,固定定位,有效,对其他无效
值越大,越上层,可以为负值
8:构造列表
1:ul li 小点去掉
List-style:none
9:布局
1:块级元素如何在父元素中居中
Margin-left:auto
Margin-rigth:auto
2:元素之间一般把,内边距,外边距设置为0
Body,ul,li,p,img {
Magin:0px;
Padding:0px;
}

10实战项目知识总结
1:img标签IE可能有边框
Img,a img{
Border:0px;
Text-decoration:none; //去掉a标签的下划线
Text-decoration:underline; //当放上去才有下划线 

}
2:不透明度
opcity:0.2
数值0-1
3:视频标签
embed
4:html

 

 

 

 
  

 

 

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics