风之力科技
股票代码:781340
400-718-5885或13605745691
service@nwpit.com

技术资讯

08Apr2016
点击

CSS的基本概念,为新手准备

CSS的基本概念

• 掌握样式表的语法规则

• 样式表的分类:

– 行内样式表

– 内嵌样式表

– 外部样式表

• 掌握常用的样式

指定显示样式

<P style = "color:red;font-size:30px;font-family:隶书;"> 

F CSS基础

@ CSS是Cascading Style Sheet的缩写,翻译为“层叠样式表”,简称“样式表”。

@ 样式表的首要目的是为网页上的元素精确定位。其次,把网页上的内容结构和格式控制相分离。即html的标签主要是定义网页的内容,而CSS决定这些网页内容如何显示。

@ 优点:简化网页的格式代码,加快网页下载显示的速度,也减少了需要上传的代码数量,大大减轻了重复劳动的工作量。

属 性

CSS名称

说 明

颜色 

color

 

文本属性

font-size

字体大小

font-family

字体

text-align

文本对齐

边框属性

(用于表

单元素) 

border-style

边框样式

border-width

边框宽度 

border-color

边框颜色 

定位属性(position)

top

顶部边距(上边距)

left

左边距

width

宽度

height

高度

z-index

z 轴索引号,用于层


F 使用CSS

@ CSS通过“样式”来表示网页的颜色、字体、背景色、边框线及网页内容的位置及大小尺寸等属性。

@ 一系列的样式组成了“样式表”。

@ CSS的语法结构:

选择符{样式属性:取值;样式属性:取值;样式属性:取值;…}

CSS的基本语法

样式和样式表

   1.样式

    样式是由成对的属性名和属性值以冒号“:”相间组成。 

        2.样式表

     一系列的“样式”以分号“;”相间组成为“样式表”。

根据样式代码的位置,分为三类:

q 行内样式

q 内嵌样式

q 外部样式

q 行内样式:HTML标签直接使用style属性,称为行内样式(Inline Style)。它适用于只需要简单地将一些样式应用于某个独立的元素的情况。

例如:<table style="color:red;margin-left:200px">

           …

           </table>

注意:在使用行内样式的过程中,建议同学们在<head>标签中添加<meta>标签,添加的<meta>标签如下:

<head>

<meta http-equiv="Content-Style-Type" content="text/css">

</head>
内联的样式比其他方法更加灵活。要使用内联样式,必须使用Content-Style-Type HTTP页眉扩展对整个文档进行单独的样式表语言声明。使用内联CSS的网页制作者必须将text/css作为Content-Style-Type HTTP页眉.

@ 内嵌样式表:是在<head>标签内添加<style></style>标签对,在标签对内定义需要的样式。

例如,<head>

<style type=“text/css”> 

td{font-size:9pt;color:red}

.font105{font-size:10.5pt;color:blue}

</style>

</head>

注意:有些低版本的浏览器不能识别style标记,这意味着低版本的浏览器会忽略style标记里的内容,并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生,我们用加HTML注释的方式(<!-- 注释 -->)隐藏内容而不让它显示 

内嵌样式-2 选择器

选择器分为:

• HTML 选择器

• CLASS 类选择器

• ID 选择器

• 样式选择器

• HTML标签选择器:在HTML页面中使用的标签,如果在CSS中被定义,那么此网页的所有该标签都将按照CSS中定义的样式显示。 

• 类选择器:使用HTML标签的class属性引入CSS中定义的样式规则的名字,称为类选择器,class属性指定的样式名字必须是以“.”开头。

• ID选择器:ID属性是用来定义某一特定的HTML元素,与class属性刚好相反,class属性是用来定义一组功能或格式相同的HTML元素。ID选择器定义的CSS名称必须以“#”开头,

• 通用选择器:是所有选择器中最强大却最少使用的。通用选择器的作用就像是通配符,它匹配所有可用元素。 

• 伪类选择器:是指对同一HTML元素的各种状态和其所包括的部分内容的一种定义方式。 

Id的优先级高于class

外部样式

@ 外联样式表:是将<style>标签内的样式语句定义在扩展名为.css的文件中。通过使用<link>标签引入样式文件。

例如,<head>
<link href="mystyle.css" rel="stylesheet"  type=“text/css”>
    </head>

优点:一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时,所有页面的样式都随之而改变。在制作大量相同样式页面的网站时,非常有用,不仅减少了重复的工作量,而且有利于以后的修改、编辑,浏览时也减少了重复下载代码。 

使用LINK(链接)标签 ,语法:

<HEAD>

<LINK   rel = “stylesheet”    type = ”text/css”    href = ”样式表文件.css” >

</HEAD>

可以连接多个html应用到html里面

行内样式表、内嵌样式表、外部样式表各有优势,实际的开发中常常

需要混合使用:

• 有关整个网站统一风格的样式代码,放置在独立的样式文件*.css

• 某些样式不同的页面,除了链接外部样式文件,还需定义内嵌样式

• 某张网页内,部分内容”与众不同“,采用行内样式

对于某个HTML标签:

1)如果有多种样式,如果规定的样式没有冲突,则叠加;

2)如果有冲突,则最先考虑行内样式表显示,如果没有,再考虑内嵌样式显示,如果还没有,最后采用外面样式表显示,否则就按HTML的默认样式显示;

CSS中的注释

样式规则的注释
样式规则是使用/*需要注释的内容*/进行注释的。即在需要注释的内容前使用“/*”标记开始注释,在内容的结尾使用“*/”结束。注释可以多行内容注释。其注释范围在“/*”与“*/”之间

常用的样式属性

• 1.文字

• 2.背景

• 3.边框线

• 4.高度和宽度

• 5.间距和边距

• 6.列表

• 7.位置和布局

指定“对象”来定义样式表的语法规则如下:

对象1, 对象2 …… { 样式表 }

下级对象

用于某一种元素中的下级元素,定义时两元素名之间用空格相间。

P em{color:blue;}

所以元素对象

 *{color:blue;

CSS文字与文本

设置字体——font-family

设置字号——font-size

设置字体样式——font-style

设置字体加粗——font-weight

设置字体变体——font-variant

组合设置字体属性——font

文本的精细排版

调整字符间距——letter-spacing

调整单词间距——word-spacing

添加文字修饰——text-decoration

设置文本排列方式——text-align

设置段落缩进——text-indent

调整行高——line-height

转换英文大小写——text-transform

颜色和背景

设置颜色——color

设置背景颜色——background-color

插入背景图片——background-image

插入背景附件——background-attachment

设置重复背景图片——background-repeat

设置背景图片位置——background-position

设置文本排列方式——text-align

• 语法说明

该语法中的4个属性值可以任意选择其中一个。其中,left代表左对齐方式;right代表右对齐方式;center代表居中对齐方式;justify代表两端对齐方式。

转换英文大小写——text-transform

插入背景图片——background-image

基本语法

background-image:url|none

URL指定要插入的背景图片路径或名称,路径可以为绝对路径也可以为相对路径。第6章有绝对路径和相对路径的详细内容讲解。图片的格式一般以GIF、JPG和PNG格式为主。

Ø  none是一个默认值,表示没有背景图片

插入背景附件——background-attachment

基本语法

background-attachment:scroll|fixed

Ø  scroll表示背景图片是随着滚动条的移动而移动。是浏览器的默认值。

Ø  fixed表示背景图片固定在页面上不动,不随着滚动条的移动而移动。

设置重复背景图片——background-repeat

基本语法

background-repeat:repeat|repeat-x|repeat-y|no-repeat

设置背景图片位置——background-position

• 基本语法

background-position:百分比|长度|关键字

利用百分比和长度设置图片位置时,都要指定两个值,并且这两个值要用空格隔开。一个代表水平位置,一个代表垂直位置。水平位置的参考点是网页页面的左边,垂直位置的参考点是页面的上边。

Ø 关键字在水平方向的主要有left、center、right,表示居左、居中和居右。关键字在垂直方向的主要有top、center、bottom,表示顶端、居中和底端。其中水平方向和垂直方向的关键字可相互搭配使用。

Ø使用百分比和关键字对比说明background-position属性的属性值。

边框和边距

设计边框样式——border-style

调整边框宽度——border-width

设置边框颜色——border-color

设置边框属性——border

边距——margin-top /margin-bottom /margin-left/ margin-right/margin

填充——padding-top/padding- bottom /padding-left / padding- right /padding

设计边框样式——border-style

基本语法

border-style:样式取值

border-top-style:样式取值

border-bottom-style:样式取值

border-left-style:样式取值

border-right-style:样式取值

边框样式属性中border-style是一个复合属性,其他4个都是单个边框的样式属性,只能取一个值,而复合属性border-style可以同时取一到4个值。下面分别说明border-style属性的4个取值方法:

— 取一个值:四条边框均使用这一个值。e:s

— 取两个值:上下边框使用第一个值,左右边框使用第二个值,两个值一定要用空格隔开。

— 取三个值:上边框使用第一个值,左右边框使用第二个值,下边框使用第三个值,取值之间要用空格隔开。

— 取4个值:四条边框按照上、右、下、左的顺序来调用取值。取值之间也要用空格隔开。

调整边框宽度——border-width

基本语法

border-width:关键字|长度

border-top-width:关键字|长度

border-bottom-width:关键字|长度

border-right-width:关键字|长度

border-left-width:关键字|长度

边框宽度属性基本语法中的关键字说明

Ø 长度包括长度值和长度单位,不可以使用负数。长度单位可以使用绝对单位也可使用相对单位,如px、pt、cm等。

Ø 基本语法中边框宽度属性border-width是一个复合属性,可以同时设置四条边框的宽度。具体使用方法和边框样式的复合属性border-style是一样的,可以参照上一节关于border-style的讲解

设置边框颜色——border-color

基本语法

border-color:颜色关键字|RGB值

border-top-color:颜色关键字|RGB值

border-bottom-color:颜色关键字|RGB值

border-left-color:颜色关键字|RGB值

border-right-color: 颜色关键字|RGB值

颜色关键字可使用常用的16个关键字

Ø  RGB值使用十六进制的RGB值和RGB函数值都行。

Ø 在使用边框颜色复合属性border-color时,如果只设置1种颜色,则四条边框的颜色一样;设置2种颜色,则边框的上下为一个颜色,左右为另一个颜色;设置3种颜色,边框的颜色顺序为上、左右、下;设置4中颜色,边框的颜色顺序为上、右、下、左。

设置边框属性——border

基本语法

border:<边框宽度>||<边框样式>||<边框颜色>

border-top: <上边框宽度>||<上边框样式>||<上边框颜色>

border-right: <右边框宽度>||<右边框样式>||<右边框颜色>

border-bottom: <下边框宽度>||<下边框样式>||<下边框颜色>

border-left: <左边框宽度>||<左边框样式>||<左边框颜色>

基本语法中每一个属性都是一个复合属性,都可以同时设置边框的宽度、样式和颜色属性。但是在用该语法定义边框属性时,每个属性间必须用空格隔开。

Ø 这五个属性语法中,只有border可以同时设置四条边框的属性。其他的只能设置单边框的属性。

边距——margin-top /margin-bottom /margin-left/ margin-right/margin

• 基本语法

margin-top:长度|百分比|auto

margin-bottom: 长度|百分比|auto

margin-left: 长度|百分比|auto

margin-left: 长度|百分比|auto

margin: 长度|百分比|auto

长度包括长度值和长度单位,长度单位可以使用前面多次提到的绝对单位或相对单位。

Ø 百分比是相对于上级元素宽度的百分比,允许使用负数。

Ø  auto为自动提取边距值,是默认值。

Ø  margin复合属性和其他复合属性的设置方法是一样的,也可以取1到4个值来同时设置边框周围的四个边距。

填充——padding-top/padding- bottom /padding-left / padding- right /padding

基本语法

padding-top:长度|百分比

padding-bottom: 长度|百分比

padding-left: 长度|百分比

padding-right: 长度|百分比

padding: 长度|百分比

长度包括长度值和长度单位。 

Ø 百分比是相对于上级元素宽度的百分比,不允许使用负数。

Ø 填充复合属性padding的取值方法,可以参照边框样式border-style的取值方法。

列表

设计列表样式——list-style-type

添加列表图像——list-style-image

调整列表位置——list-style-position

设计列表样式——list-style-type

基本语法

list-style-type:<属性值>

添加列表图像——list-style-image

基本语法

list-style-image:none|URL

none表示不使用图像符号。

Ø  URL指定图像的名称或者路径。

调整列表位置——list-style-position

基本语法

list-style-position:outside|inside

outside表示列表符号不向内缩进,是列表的默认属性值。

Ø  inside表示列表符号向内缩进

定位

定位方式——position

设置位置——top、bottom、right、left

浮动——float

清除——clear

定位方式——position

基本语法

position:static|absolute|relative

static表示为静态定位,是默认设置。

Ø  absolute表示绝对定位,与下一节的位置属性top、bottom、right、left等结合使用可实现对元素的绝对定位。

Ø  relative表示相对定位,对象不可层叠,但也要依据top、bottom、right、left等属性来设置元素的具体偏移位置

设置位置——top、bottom、right、left

• 基本语法

top:auto|长度值|百分比

bottom: auto|长度值|百分比

left: auto|长度值|百分比

right: auto|长度值|百分比

浮动——float

基本语法

float:left|right|none

Ø  left表示浮动元素在左边,是居左对齐的。

Ø  right表示浮动元素在右边,是居右对齐的。

Ø  none表示不浮动,是默认值

清除——clear

基本语法

clear:left|right|both|none

清除——clear

语法说明

Ø left表示不允许在某元素的左边有浮动元素。

Ø  right表示不允许在某元素的右边有浮动元素。

Ø  both表示在某元素左右两边都不允许有浮动元素。

Ø  none表示在某元素左右两边都允许有浮动元素

层的应用

图层的创建——<div>

创建嵌套图层

层的属性设置

图层的创建——<div>

基本语法

<body>

<div id="Layer1" style="position:absolute; left:29px; top:12px; width:165px; height:104px;"></div>

</body>

在进行层的定义时,需要将层的样式同时定义,否则在网页中不会显示出来。

创建嵌套图层

基本语法

<body>

<div id="Layer1" style="position:absolute; z-index:1; left:29px; top:12px; width:165px; height:104px;"></div>

<div id="Layer1" style="position:absolute; z-index:1; left:29px; top:12px; width:165px; height:104px;"></div>

</body>

图层的嵌套只要插入多个成对的<div></div>,设置好的层的样式属性就可以完成层的嵌套。

层的属性设置

• 

• 

• 图层定义常见属性

层的属性设置

基本语法

<body>

<div id="Layer1" style="position:absolute; left:29px; z-index:1; top:12px; width:165px; height:104px;"></div>

</body>

position属性将对象从文档流中拖出,进行绝对定位;

Ø  left、top属性进行左边距和顶端间距的设置;

Ø  width、height属性进行宽度和高度设置;

Ø  层叠通过z-index属性定义。

CSS层

设置层空间——z-index

设置层裁切——clip

设置层大小—度来—width、height

设置层溢出——overflow

设置层可见——visibility

设置层空间——z-index

基本语法

z-index:auto|数字

auto表示子层会按照父层的属性显示。

Ø 数字必须是无单位的整数或负数,但一般情况下都取正整数,所以z-index属性值为1的层位于最下层。

设置层裁切——clip

基本语法

clip:rect{<上>|<右>|<下>|<左>} |auto

auto表示不裁切。

ؠؠrect的4个坐标值表示所裁切矩形的4个顶点位置,其中以网页左上角为坐标(0,0),而上、右、下、左这4个坐标值则是以左上角为参照点计算的。而且任意一个坐标值都可由auto来代替,表示该边不裁切。

设置层大小—width、height

• 基本语法

• width:auto|长度 

• height:auto|长度

• width表示的是宽度,而height表示的是高度。

• Ø  auto表示自动设置长度。

• Ø 长度包括长度值和单位。

• Ø 长度也可使用相对值中的百分比。

• 对于每个层在设置层大小时,其中只能设置宽度和高度中的一个值,另一个值则自动获得。如果两个值都设置了,则还要同时设置层溢出属性overflow。

设置层溢出——overflow

基本语法

overflow: visible/hidden/scroll/auto

visible:扩大层的容纳范围,将所有内容都显示出来。

Ø  hidden:隐藏超出范围的内容(超出范围的内容将被裁切掉)。

Ø  scroll:表示一直显示滚动条。

Ø  auto:当层内容超出了层的容纳范围时,则显示滚动条。

设置层可见——visibility

基本语法

• visibility:visible|hidden|inherit

visible表示该层是可见的。

ؠؠhidden表示该层被隐藏,是不可见的。

Ø  inherit表示子层或子元素会继承父层或父元素的可见性,父级元素可见则子级元素也可见。

鼠标指针——cursor

基本语法

cursor:auto|关键字|URL(图像地址)

auto表示根据对象元素的内容自动选择鼠标指针形状。

Ø  URL(图像地址)表示选取自定义的图像作为鼠标指针的形状。

Ø 关键字共有16种,是系统预先定义好的鼠标指针形状,具体说明和形状见表20-2



属 性

CSS名称

说 明

边界属性

margin-top

设设置对象的上边距

m margin -right

设设置对象的右边距

m margin -bottom

设设置对象的下边距

m margin -left

设设置对象的左边距


边框属性

bbborder-style

设设置边框的样式

boborder-width

设设置边框的宽度

boborder-color

设设置边框的颜色


填充属性

papadding-top

设设置内容与上边框之间的距离

papadding-right

设设置内容与右边框之间的距离

papadding-bottom

设设置内容与下边框之间的距离

papadding-left

设设置内容与左边框之间的距离

伪类

• 伪类是一种特殊的类选择符,用来指定链接或者与其相关的选择符的状态;能被支持CSS的浏览器自动所识别的特殊选择符,

• 伪类与选择符间用冒号相连,在CSS中,伪类对文本或图像处于链接状态的修饰,故选择符大部分下是a标记,本章主要对a标记做实例讲解,其中伪类有四种常用形式是本章要讲解的,内容如下:

• “:link”用在为访问的链接上

• “:hover”用于鼠标光标置于其上的链接

• “:active”用于获得焦点(如“被单击”)的链接上

• “:visited”用在已经访问过的链接上

• 盒子在标准流中的定位原则

• 实验1——行内元素之间的水平margin 

span.left{

margin-right:30px;

background-color:#a9d6ff;

}

span.right{

margin-left:40px;

background-color:#eeb0b0;

}

• 盒子在标准流中的定位原则

– 实验2——块级元素之间的竖直margin 

<body>

<div style="margin-bottom:50px;">块元素1</div>

<div style="margin-top:30px;">块元素2</div>

</body>

CSS+Div 应用实例     布局

• 流体浮动布局

• 固定浮动布局

• 固定定位布局