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