css布局原理思想步骤

css布局原理教程,掌握css 布局思想步骤后,快速上手修改与布局HTML,布局css流程是什么,轻松明白掌握。

css布局原理教程,掌握css 布局思想步骤后,快速上手修改与布局HTML,布局css流程是什么,轻松明白掌握。

一、id与class

学会CSS布局首先搞明白id和class。简单快速理解

html中id对应css以“#”命名类。

html中class对应css以“.”命名的类。

示范:

CSS代码:

.abc{width:100px}
#bbb{height:200px}

HTML代码

<div class="abc">我是以小写句号abc命名设置div宽度为100px</div>
<div id="bbb">我在CSS以#号命名,设置div高度为200px</div>

二、css布局步骤

1、新建HTML,使用软件新建HTML,这样免去敲初始HTML

2、新建外部CSS文件,比如style.css,放入css文件中

3、HTML中使用link将css文件引入开发布局的HTML中

<link rel="stylesheet" href="css/style.css" />

4、无论在HTML先写HTML代码还是 CSS文件先写CSS代码均可

一点一点写点HTML代码,对应CSS文件中写CSS样式,写点CSS样式对应HTML引用(class或ID)

一般情况下大结构使用id命名(一个HTML中只使用一次),小局部使用class,class可以多次使用调用。

上一篇:css居中
下一篇:html和css是什么关系
更新