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)

时间: 2024-10-06 13:57:23

html CSS 学习总结的相关文章

CSS学习之float解析

转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.下面解释下这个定义中的几个名词的概念: 文档流:在html中文档流即为元素从上至下排列的顺序. 脱离文档流:元素从正常的排列顺序被抽离. 最左边/最右边:上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界(不包括padding). 二.float

css学习感言

在培训学校学习了一个多月了,最近主要讲的是css,准确的说老师上课讲css用了8天的时间,讲课的速度飞快,可能是对于我这种零基础的学生来说吧,感觉学起来很吃力,不过在这个过程中也学到了许多知识,这里主要介绍一下css中选择器权重的问题,css中选择器分为三类1.元素选择器2.类选择器3.id选择器4.通配符 ,这里主要介绍前三类. 元素选择器:例如table,input,button等他们分别表示一大类,称之为元素.它的权重是最小的,相当于日常生活中重量单位的一克.它是对一大类比如table,i

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

CSS学习(二)—浮动

一. 定义 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 解决的问题:"如何在一行显示多个div元素" 二. 浮动与不浮动区别 图1 图2 区别 不浮动的框是由上往下独占一行的,而浮动的框是紧靠着排列的.图2中d1.d2.d3都是向左浮动的,所以先把d1放在紧靠着父框摆放,然后把d2紧靠着d1摆放,最后d3紧靠着d2摆放.向右浮动亦与之类似. 语法: float : none | left |right 参数: none : 对象不浮动 left :

2016/2/25 html+css学习资源

html+css学习资源 1.Position is Everything,一个描述和展示在各种浏览器中发现的bug,并提供css解决方法的网站,顶! 2.一个国外的网页设计论坛 3.http://css-tricks.com/ 4.http://html5demos.com/ 有很多html5 DEMO 5.http://www.alistapart.com 6.http://webreference.com/ 7.http://www.webmonkey.com/ 8.http://www.

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

html+css学习笔记 3[浮动]

inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie6 ie7不支持块属性标签的inline-block(问题) float浮动: 1.块在一排显示     2.内联支持宽高     3.默认内容撑开宽度      4.脱离文档流     5.提升层级半层 文本流 float:left | right | none | inherit; 文档流是文档

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

【转】css学习专题-BFC

css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 containing block 顶部起一个接一个垂直排列,水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC). developer center上面有对BFC的一段描述: 一个 block formatting context 是web页面可视化CSS渲染的一个部分,是一块 block b