好诱惑人-8小时学会html+css

1.关于doctype文档

如果浏览器不支持html5,可以添加

2.网页先布局切豆

从大到小,从上往下,从左到右

div占块

3.用css来控制div(css描述html标签样子)

4.因为div总是独占一行,所以要使用浮动,float使它们左右并排。

左右浮动,父级不给高度,父亲的兄弟会上移。

兄弟关系中,如果浮动其他div,普通div会被上面的盖住。(实践证明,父子级也如此)

5.清除浮动clear。

clear:both;clear:left;clear:right;

6.和模型(外边距margin,边border,内边距padding)。

margin:0 0 0 0(上右下左)顺时针来

margin:0 0 (上下,左右)没有的取值对边。

margin:0 0 0 (上,下, 左右)

7.左右浮动,给父级高度,即可显示父级兄弟,不被隐藏。

8.盒模型border:宽border-width 形状(实线,虚线)border-style 颜色border-color

单独设置某个方向的边:border-top:10px solid red;

9. css控制div画三角形

width:0px;height:0px;border-top:50px solid red;border-left:50px solid red;border-right:50px solid pink;border-bottom:50px solid red;10. padding

主要为了控制内在的文字。盒子与文字常用padding。padding与背景,padding会让div变大 。

11. 盒子模型总结

一个盒子有margin,border,padding时,实际占多少空间?

竖直方向:height+padding_top+padding_bottom+border_top+border_bottom+margin_top+margin_bottom。

横向同理。

11. 利用margin让内容居中。

margin:0 auto;

12. margin重叠现象。

相邻的普通元素,上线边距,并非简单的相加,而是取其中较大的边距。

父子div也会发生重叠,不止兄弟。

13. 块状元素与内联元素(文字多大,背景多大,不会因为给高度会宽度而改变)相互转化

内联变块状:display:block;

块状变内联:display:inline;

display:none,div消失不见。

14. css控制锻炼文本。p标签表示一段话。

text-indent:首行缩进

text-align:center;左右居中。

letter-spacing:控制字间距。

15. 文本控制

color:字体颜色; font-style:italic,斜体;font-size;字体大小;font-weight:粗细;line-height,行高;font-family:字体样式。

font:#fff italic  bold 23px/46px “宋体”

16. 文字设计技巧

新闻标题:sans-serif(无衬线字体)黑体,微软雅黑

宋体,seift (有衬线字体)

你设置的字体,客户机器上未必有。

font-family:‘黑体’,‘微软雅黑’,sans-serif; 如果没有黑体,微软雅黑,就从系统中选择无衬线字体。

17. 背景图片

background-image:url(small,jpg);

background-repeat:no-reapeat; (图片不重复)

background-attachment:fixed;(图片固定在浏览器某个位置)

背景图和背景色都设置,显示背景图。

background-position:center center;(水平居中,数值居中)

18. 高级背景图片位置设置

默认情况下div的左上角和背景图的左上角重合。

计算机左上角是原点:0 0。

background-position:x() y(上为负值,下为正值)

background-position:top right bottom left;

19.css选择器

id选择器,class选择器,标签选择器,派生选择器(标签的上下级关系)

20.css优先级

id>class>标签21.css的四种引入方式

1.)外部链接一个css文件,我们再html头部标明:

2.)头部直接写css: div{ margin:0 10px;}

3.)外部多个css文件时:@import url(my.css);

4.)直接在html标签写入

22.css的初始化

相同的元素,li,在不同的浏览器下,效果不同;是因为,浏览器对各元素的margin,border,font-size等略有不同;为了杜绝这种情况,我们通过css强制让所有元素的属性值都一样,这样浏览器显示就一致,减少了不兼容情况的发生。

可以直接查找:网易,淘宝,腾讯的初始化代码。

23.h标签和p标签

h1-6系列,表示1-6号标题,字越来越小。

p表示段落,在新闻网站中,h与p经常一起出现,新闻标题一般用h表示,而新闻的每一个短内容,适合用p标签

24.img图片标签

特殊的内联标签,可以给宽和高。

可以通过:display:block;

24.有序和无序列表

无序:ul前面可以是小圆点,可以是空心圆,还可以是小方块,一般是用背景图

有序:ol 也可以出现罗马数字

25.整齐的表格tr是行,td是列。

border-collapse:collapse;去除表格之间的间隙。

border-collapse:separate;为默认的值。

border-spacing:20px;是每个单元格的相对距离,相当于margin。

以上属性写在table里。

都在td里写。

表格添加描边

表格描边

.table1{background:#C7D0D7;}

.table1 td{background:#ffffff;}

12345

67890

12345

67890

12345

67890

12345

67890

简单说来就是给整个表格一个背景,然后每一个小格子和其他背景一样,那要小格子和整个table的间隙就变成了描边。

26.伪类

css允许我们针对a标签的四种状态设置各自的css特性,叫做css伪类。

a可以作为锚点,有四种状态,默认,鼠标指上去,鼠标点下去,点击过后

你可能感兴趣的:(好诱惑人-8小时学会html+css)