div+css学习笔记1

今天开始撰写我的学习笔记,今天是第一次写,但是我给自己的目标是坚持写,写给现在的自己,更写给未来的自己,希望围观的各位客官见谅。

今天学习主题是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 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素;且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。

 

你可能感兴趣的:(div+css学习笔记1)