今天开始撰写我的学习笔记,今天是第一次写,但是我给自己的目标是坚持写,写给现在的自己,更写给未来的自己,希望围观的各位客官见谅。
今天学习主题是DIV+CSS,其实标准的讲应该称XHTML+CSS。
一:CSS的四种控制HTML的方式
1、行内式。
直接写在标签行内部。
例:
<p style=" font:15px; color:green;"></p>
2、内嵌式。
将代码写在在html的头部<head></head>之间。
例:
<style type="text/css"> <!-- #div1{ font:15px;color:blue;} --> </style>
3、链接式
使用率最高、最实用的一种。也是将代码在<head></head>
例:
<link href="style.css" type="text/css" rel="stylesheet">
,其中style.css文件就是需要编写的CSS文件。
注意事项:在使用链接式的时候,注意CSS文件的位置,如:“./”表示当前文件夹下,“../”表示上一级文件夹下。
4、导入式
采用import导入的方法。
以上四种方式的优先级为(从高到低):行内、内嵌、链接、导入。
二:页面模块常用命名
1:header 头
2:content/container 内容
3:footer 尾
4:nav 导航
5:sidebar 侧栏
6:column 栏目
7:loginbar 登录条
8:banner 广告
9:subnav 子导航
10:submenu 子菜单
11:scroll 滚动
三:盒子模型
四:块元素和内联元素
块元素特点:块元素有点“霸道”,它有独占一行的特性。不过一物降一物,float属性可以化解块元素不与人合群独占一行的“霸道”,使之可以与其他元素同行排列。可以用css的display:inline将块级元素改变为内联元素,也可以用display:block将内联元素改变为块元素。在这里不得不提的是,clear属性。clear具有消除float同行排列的特性,使之换行。
五、float属性
理解了块级元素和内联元素,对理解浮动就容易多了。float是个重点,希望大家都能理解。在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素;且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。