Html+div+css学习笔记



Html+css

 

Html

入门须知

http协议:

Urluri

html:超文本标记语言(显示内容)

  声明html文档类型

html:超文本标记语言(显示内容)

 

html基础:

标题:

段落:

链接:连接标题

图像:地址"  width="" height="" alt="some_text">

水平线:


换行:

注释:

 

元素:在 元素中你可以插入脚本(scripts样式文件(CSS),及各种meta信息

引入css文件:link元素:

 

html超链接的target属性:_blank_parent_self_top.

Visit W3Schools!

 

htmltable表格:

表格常用的元素:tabletrtdth.

跨行rowspan

跨列colspan

表格标题:caption

 

html的列表:

无序列表:ul

有序列表:ol

列表子集:li

 

 

tablediv都可以作为布局手段,但是不推荐使用table来布局

Tip: 使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局

 

Htmlform表单:

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定位属性:positiontoprightbottomleftoverflowclip

 

CSS选择器:

1.元素选择器

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

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

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

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

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

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

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

9.伪选择器:      超链接、a:activea:hovera:link:a:vistited等、、、

           html中块块级元素和行内元素

 

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

 

如何迅速学习CSS

1.理解css的基本语法

2.理解盒子模型

3.理解文档流和定位

4.理解浮动和清除

5.理解各种CSS样式和属性

规则声明顺序:

常用标记、常用类、布局类、导航类、表格类、表单类、组件类

div可以理解成盒子或是容器,本身没有任何意义

 

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

 

 

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

 

Google

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(html+div+css)