您的位置：首页 > Web前端 > CSS

Html+div+css学习笔记

2014-07-13 11:22 316 查看

Html+css

Html
入门须知
http协议:
Url、uri
html:超文本标记语言(显示内容)
<!DOCTYPE html> 声明html文档类型
html:超文本标记语言(显示内容)

html基础:
标题:<h1></h1>
段落:<p></p>
链接:<a href="URL">连接标题</a>
图像:<img src="地址" width="" height="" alt="some_text">
水平线:<hr>
换行:<br>
注释:

<head></head>元素:在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息
引入css文件:link元素:<link rel="stylesheet" type="text/css" href="mystyle.css">

html超链接的target属性:_blank、_parent、_self、_top.
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

html的table表格:<table></table>

表格常用的元素:table、tr、td、th.

跨行rowspan

跨列colspan

表格标题:caption

html的列表:

无序列表:ul

有序列表:ol

列表子集:li

table和div都可以作为布局手段，但是不推荐使用table来布局
Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局

Html的form表单:
frameset框架

CSS

css规则由两个主要部分组成:选择器、以及一条或多条声明(指的是属性和属性值)
选择器{属性名:属性值;属性名:属性值;}
css注释: /* */

css文本属性
css字体属性:
css链接属性:

1 a:link
正常，未访问过的链接

2 a:visited
用户已访问过的链接

3 a:hover
当用户鼠标放在链接上时

4 a:active
链接被点击的那一刻
css列表属性:

css表格属性:是基于上面的

css盒子模型:(div非常重要)

1 Margin - (外边距)清除边框区域。Margin没有背景颜色，它是完全透明

2 Border - (边框)边框周围的填充和内容。边框是受到盒子的背景颜色影响

3 Padding - (内边框)清除内容周围的区域。会受到框中填充的背景颜色影响

4 Content - 盒子的内容，显示文本和图像

5.element -元素
padding(内边距)属性、边框(border)属性、margin(外边距)属性
CSS定位:float最重要也是最难

css定位机制:普通流、浮动流、和绝对定位。

css定位属性:position、top、right、bottom、left、overflow、clip

CSS选择器:

1.元素选择器

2.id选择器 # 尽量少用，留给 javascript 获得元素的时候使用

3.类选择器 . 使用的最多的选择器

4.选择器分组: html,body,table,td,span { style 声明} 组合选择器

5.通配符选择器: * { style 声明}

6.后代选择器(包含选择器) span p {} 偶尔使用

7.子选择器使用的比较少，有点类似后台选择器。

8.相邻兄弟选择器使用的很少

9.伪选择器: 超链接、a:active、a:hover、a:link:a:vistited等、、、
html中块块级元素和行内元素

内容样式要分离，这是网页开发原则。(内容指的是html,样式指的是css)

如何迅速学习CSS

1.理解css的基本语法

2.理解盒子模型

3.理解文档流和定位

4.理解浮动和清除

5.理解各种CSS样式和属性
规则声明顺序:

常用标记、常用类、布局类、导航类、表格类、表单类、组件类
div可以理解成盒子或是容器，本身没有任何意义

最重点:表单、盒子模型、css定位、div+css布局

不懂就W3cSchool官方网站学习，还有一个网站w3cschoolcc

Google

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航