html CSS 学习总结

Posted 冯小漂儿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 学习总结的主要内容,如果未能解决你的问题,请参考以下文章

前端学习总结HTML5+CSS3+JavaScript

HTML5+CSS3-全面详解(学习总结---从入门到深化)

学习总结HTML-02 CSS

学习总结

Html+Css学习总结

HTML+CSS学习总结