03-HTML网页布局与CSS入门

HTML网页布局与CSS入门

网页布局原理

• 标签在网页中会显示成一个个的方块，先按照行的方式，把网页划分成多个行，再到行里面划分列，也就是在表示行的标签中再嵌套标签来表示列，标签的嵌套产生叠加效果。

标签语义化

• 在布局中需要尽量使用带语义的标签，使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构，提高网站在搜索中的排名(也叫做SEO)，其次是方便代码的阅读和维护。

• 带语义的标签

  • h1~h6: 表示标题
  • p: 表示段落
  • img: 表示图片
  • a: 表示链接

• 不带语义的标签

  • div: 表示一块内容
  • span: 表示行内的一块内容

• 所以我们要根据网页上显示的内容，使用适合的标签，可以优化之前的代码。

CSS介绍

CSS概述

• CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表,为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

CSS基本语法

• css的定义方法是：

选择器 { 属性：值； 属性：值； 属性：值；}

• 选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性，每个属性有一个或多个值。属性和值之间用冒号，一个属性和值与下一个属性和值之间用分号，最后一个分号可以省略，代码示例：

div{ 
    width:100px; 
    height:100px; 
    background:gold; 
}

css引入方式

css引入页面的方式有三种：

• 内联式：通过标签的style属性，在标签上直接写样式。

<div style="width:100px; height:100px; background:red ">......</div>

• 嵌入式：通过style标签，在网页上创建嵌入的样式表。

<style type="text/css">
    div{ width:100px; height:100px; background:red }
    ......
</style>

• 外链式：通过link标签，链接外部样式文件到页面中。(推荐使用)

<link rel="stylesheet" type="text/css" href="css/main.css">