CSS学习总结
CSS
F CSS的基本概念
• 掌握样式表的语法规则
• 样式表的分类：
– 行内样式表
– 内嵌样式表
– 外部样式表
• 掌握常用的样式
指定显示样式
<P style = "color:red;font-size:30px;font-family:隶书;">
F CSS基础
@ CSS是Cascading Style Sheet的缩写，翻译为“层叠样式表”，简称“样式表”。
@ 样式表的首要目的是为网页上的元素精确定位。其次，把网页上的内容结构和格式控制相分离。即html的标签主要是定义网页的内容，而CSS决定这些网页内容如何显示。
@ 优点：简化网页的格式代码，加快网页下载显示的速度，也减少了需要上传的代码数量，大大减轻了重复劳动的工作量。
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的浏览器自动所识别的特殊选择符，
• 伪类与选择符间用冒号相连，在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 应用实例 布局
• 流体浮动布局
• 固定浮动布局
• 固定定位布局
