CSS基础入门案例教程

div与span

Div是一个html标签，是一个块级元素（单独显示一行）。单独使用没有任何意义，必须结合CSS使用。主要用于页面布局。

Span是一个html标签，是一个内联元素（显示一行）。单独使用没有任何意义，必须结合CSS使用。主要用于对括起来的内容进行样式修饰。

css概述

css是什么

CSS（Cascading Style Sheets）：层叠样式表

样式：给HTML标签添加需要显示的效果

层叠：使用不同的添加方式给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。

CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。

CSS可以使HTML页面更美观，CSS+DIV布局更灵活，更容易绘制出需要的结构。

css样式规则

CSS样式具体格式：选择器

选择器：用于指定CSS样式作用的HTML对象

花括号内是对该对象设置的具体样式。属性和属性值以键值对方式出现。

注意项

CSS样式“选择器”严格区分大小写，“属性”和“属性值”不区分大小写。

多个属性之间必须用英文分号隔开，最后一个属性后的分号可省略，但为了便于添加新样式最好保留。

如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文引号。

在编写CSS代码时，为了提高可读性，会加上CSS注释

引入方式

行内样式

行内样式是通过标签的style属性来设置元素样式：

菲立思教育

内部样式

内部样式又称为内嵌式，是将CSS代码集中写在HTML文档的头部标签体中，并使用标签定义

外部样式

外部样式又称为链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过

标签将样式连接到HTML文档中。

css选择器

元素选择器

元素选择器是指用HTML标记名称作为选择器，为页面中某类标记指定统一CSS样式：标记名

例如：

元素选择器优点是快速为页面中同类型标记统一样式，缺点是不能设计差异化样式。

ID选择器

id选择器使用“#”标识，后面紧跟id名。基本语法格式：#id名

id名即为HTML元素的id属性值，大多数HTML元素都可定义id属性，id值是唯一的，只能对应文档中某一个具体的元素。

例如：

类选择器

类选择器使用”.”进行标识，后面紧跟类名。基本语法格式：.类名

类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。

例如：

属性选择器

属性选择器，在标签后面使用中括号标记。

基本语法格式：标签名[标签属性=‘标签属性值’]

该选择器是对“元素选择器”的扩展，对一组标签进一步过滤。

例如：

包含选择器

包含选择器，两个标签之间使用空格，给指定父标签的后代标签设置样式。

基本语法格式：父标签 后代标签

该选择器是对“元素选择器”的扩展，对一个标签内部所有后代标签进行过滤。

例如：

css样式

边框和尺寸：border、width、height

border:设置边框样式。格式：宽度 样式 颜色。例如：style=“border:1px solid #f00”,1像素实边红色。

width、height:用于设置标签的宽度、高度

字体：color、font-size

color:颜色，字体颜色；font-size:字体大小。

背景色：background-color

转换：display

HTML丰富的标签一般分为两类：块标签和行内标签。

块标签：以区域块方式出现。每个块标签单独占据一行或多行。常见的块元素有、

、

等。

行内标签：不必在新的一行开始，同时也不强迫其他元素在新行显示。常见的行内元素有、等。

使用display对行内元素和块元素进行转换

例如：

布局：float、clear

通常默认的排版方式是将页面的元素从上到下一一罗列，而实际开发中需要左右方式排版，就需要浮动。

选择器

常用属性值：left:元素向左浮动；right:元素向右浮动；none:元素不浮动（默认值）

浮动元素不再占用原文档流的位置，所以对页面中其他元素的排版产生影响。避免影响，需使用clear属性进行清除浮动。

选择器

常用属性值：left:不允许左侧有浮动元素（清除左侧浮动的影响）、right:不允许右侧有浮动元素（清除右侧浮动的影响）、both:同时清除左右两侧浮动的影响

例如：

盒子模型

简介

CSS框模型（Box Model）规定了元素框处理元素内容、内边距、边框和外边距的方式。

内边距：padding

所有h1元素的各边都有10像素的内边距：h1

还可按照上、右、下、左的顺序分别设置各边的内边距，各边均可使用不同的单位或百分比

h1

单边内边距属性

padding-top：上内边距

padding-right：右内边距

padding-bottom：下内边距

padding-left：左内边距

外边距：margin

可按照上、右、下、左的顺序分别设置各边的外边距，同内边距

单边外边距属性

案例

使用DIV+CSS完成首页重构

编写实现

效果展示

使用DIV+CSS完成用户注册

编写实现

效果展示

Ladies and Gentlemen, may I have your attention please:

We are now ready for check－in for flight MY1017 at here.Thank you.