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.

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180906A1AQID00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券