Html+div+css学习笔记



Html+css

 

Html

入门须知

http协议:

Urluri

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>

 

htmltable表格:<table></table>

表格常用的元素: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

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值