CSS 即层叠样式表,主要用于对页面的装饰。
使HTML专注于网页的内容,CSS专注于网页的表现
提供了丰富的格式化功能
可以针对各种可视化浏览器(主要有显示器、打印机、PDA等)来设置不同的样式
CSS与浏览器
并不是所有的CSS的样式都被浏览器支持
不同的浏览器对CSS的实现有细微的不同,需要特别注意
导航
html中引入CSS的方法
CSS基本语法
CSS中长度单位的定义
CSS中颜色的定义
CSS中和字体格式有关的属性
CSS中和文本段落格式有关的属性
掌握盒子模型
掌握背景色、背景图片
Display属性
“文档流”定位
列表样式
元素不可见
html中引入CSS的方法
在html页面中有多种方式可以引入 CSS
- 行内样式
直接使用标记的style属性
style=" width:100px; height:100px; background-color:#F00;” - 内嵌样式
在HTML中,使用<style></style>标记,将样式写在<style>标记内
注意:<style>标记要指定type属性为text/css - 链接样式(外链式)
将CSS写入单独的一个文件中,注意该文件的文件扩展名为 .css
在HTML文档中使用<link>标记引入css文件
<link>标记需要指定两个属性:type和rel(relationship)
例:< link type=“text/css” rel=“stylesheet” href=“sy.css" /> - 使用导入样式
使用@import指令可以将css文件中的css样式导入到不同的地方
导入式的结果和直接书写是同样的效果
导入式可以共享样式代码
可以在内嵌式里使用导入,也可在css文件中使用
导入样式的使用方法
@import url(“sheet1.css”);
@import “sheet1.css”;
当页面中同时具有多种样式时,优先级按就近原则,即使用最近的一个样式(行内》内嵌》链接)
CSS 基本语法
CSS使用多种选择器来确定要定义的HTML标记
CSS使用大量的属性来定义HTML文档的表现
设置属性的不同的值来实现不同的显示效果
基本语法:选择器{属性:属性值;}
选择器
CSS修饰html标签的基础就是选择符,即可以通过多种选择符来选择要修饰的html标签
- 通配符选择器
选择对象:所有标签
语法:* {font-family: “宋体”} - 类型(标记)选择器
选择对象:使用标签名做选择符
语法:p {font-size: “8”} - ID选择器
选择对象:对应id名的元素
语法:#idname {…} - 类(class)选择器
选择对象:使用此类名的元素
语法:.classname {…} - 包含选择器
选择对象:被嵌套标签包含的元素
语法:选择符a 选择符b {…}
长度的单位
px 和 em
px:像素
根据显示器分辨率的不同,像素的大小也是不同的
em:以当前字符的高度为基准
如果当前字体的高度为12px,那么1em就是12px
注意:一般以font-size为准,如果没有定义font-size,则以浏览器默认大小(16px)为准
cm/mm/pt/pc
主要用在非显示器输出上,如打印
如果网页在显示器上显示,则这些单位将转换为一定的像素显示,即长度也是依靠显示器分辨率的
颜色表达
网页中颜色采用RGB模式显示(显示器)
RGB颜色在CSS中的表达方式
- 直接使用颜色的英文单词,如red
注意:很多浏览器不支持颜色的单词表示 - 使用三色的数值,如rgb(120,222,100)
注意:数值在0~255之间- 使用三色的百分比,如rgb(10%,20%,100%)
red rgb(255,0,0) blue rgb(0,0,255) black(0,0,0)
green rgb(0,255,0) white rgb(255,255,255)
- 使用三色的百分比,如rgb(10%,20%,100%)
- 使用三色数值的十六进制,如#0000ff
注意:推荐使用这种方式,十六进制值前加#
rgb red #ff0000 #f00 blue #0000ff #00f black #000000 #000
green #00ff00 #0f0 white #ffffff #fff
字体格式
- font-family:指定字体
可以为文字指定多个字体,不同字体间用“,”隔开
字体名字中间有空格的,要用双引号引起来 - font-size:字体大小
多用px/em单位 - font-style:字体倾斜效果
normal不倾斜、oblique和italic倾斜
Italic是使用文字的斜体,Oblique是让没有斜体属性的文字倾斜! - font-weight:字体粗细
大多浏览器可以实现:正常和加粗效果
normal:正常粗细
bold:粗体
bolder:加粗体
lighter:比正常粗体细
100~900:数字越大,字体越粗 - text-transform:英文字母大小写转换
capitalize:单词首字母大写
uppercase:全部大写
lowercase:全部小写 - text-decoration:文本装饰
underline:文字加下划线
line-through:文字加删除线
overline:文字加上划线
文本段落
-
text-indent
段落内容首行缩进(悬挂缩进) -
字词间距
- 英文文本
letter-spacing 字母和字母间距 : normal / 数值
word-spacing 单词和单词间距 - 中文文本
letter-spacing 字和字之间的间距
- 英文文本
-
overflow:visible(默认)/hidden(超出部分隐藏)/scroll(出现滚动条)/auto(浏览器自动处理)内容溢出处理
-
text-overflow:clip(不显示省略标记,简单裁切) | ellipsis (文本溢出显示省略标记)文本溢出处理 white-space: normal / pre(空白被保留)/nowrap(不换行)/…元素空白的处理
-
line-height:段落内部的行高
注意:文字在每一行自动上下居中 -
text-align
文本的水平位置- left,左对齐(默认值)
- right,右对齐
- center,居中对齐
- justify,两端对齐
- justify对于主要用于英文
只能对多行中的非最后一行进行两端对齐
-
vertical-align:baseline/top/text-top/middle/bottom/… 垂直对齐方式
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
盒子模型
我们用盒子来描述一个div元素,甚至是其他块元素。某些方面,他们就像是一个盒子一样。
盒子大小
- width 和 height
只定义内容的大小,不包含边框和边距
如果内容太多,超过了width或height,那么默认情况下将忽略width或height的设置 - overflow属性 (overflow-x overflow-y)
定义内容超过width和heigth时的显示方式
scroll;使用滚动条,不论内容是否超出
auto;根据情况,如果内容超出了width,则出现横向滚动条,如果内容超过了height,则出现纵向滚动条,否则不显示滚动条
hidden;超出部分被隐藏
visible;默认值,忽略width或height
边框 - 边框的三个方面(webkit、firefox和ie)
- width,边框的宽度
- color,边框的颜色
- style,边框的样式(border-style:dotted、solid、double、dashed; )
- 边框的综合定义
分开单独设置,
例:border-width:1px; border-color:#00f; border-style:solid;
使用综合属性
例:border:1px #00f solid
注意:三个值没有先后顺序,中间用空格隔开 - 四边独立设置
单边分开设置
例:
border-left-width:1px;
border-left-color:#00F;
border-left-style:solid;
使用综合属性
例:
border-left:1px #00F solid
边距 - padding(内边距)
边框和内容之间的空白宽度
注意:这个部分只有空白,不能设置外观样式,颜色等,只能设置空白的宽度 - padding的综合设置
例:padding:2px;(四个内边距都为2px) - padding的单边设置
例:padding-left:2px;(左边的边框和内容之间的距离为2px) - margin(外边距)
标签和它相邻的标签之间的空白宽度
外边距的设置是相叠加的 - margin的综合设置
例:margin:10px;(和四边临近的标签的距离都为10px) - margin的单边设置
例:margin-left:10px;(标签距左边10px)
<body>标签的margin代表内容与浏览器边框的距离
两个行内元素的margin-right和margin-left,采用“和”
两个块元素的marign-top和margin-bottom,采用“最大值
背景
- background-color:定义标签的背景颜色
- background-image:定义背景图片,可定义多背景
- ackground-repeat:定义背景图片的显示方式
repeat,图片重复
repeat-x,图片横向重复
repeat-y,图片纵向重复
no-repeat,图片不重复 - background-position:定义背景图片的位置
直接使用两个定位单词,例:background-position: right top;
使用x、y坐标,例:background-position: 20px 30px; - background-size:定义背景图片的大小
background-size: length | percentage | cover | contain;
cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。(可能会裁剪图片)
contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。(可能会出现空白 - background-origin :定义背景图片的渲染位置
背景图片可以放置于 content-box、padding-box 或 border-box 区域。 - background-attachment定义背景图片是否固定或者随着页面的其余部分滚动
- background-attachment:fixed(固定)| scroll(默认)
display属性
CSS使用display设置的标签的显示方式
block“块”元素
inline“行内”元素
inline-block 行内块元素
none 隐藏
<div>主要用于HTML文档中独立的“大块”内容
<span>主要用于HTML文档中需要特别定义的内容
文档流定位
- float
造成标签“浮动”,影响“文档流”的空间
float:left;“左浮动”
float:right;”右浮动”
对span元素添加一个float:left,span元素已经“块”化。
除了基于“文档流”的定位,CSS还定义了标签的其他定位方式,CSS使用position属性指定标签的定位方式
position的值
static,默认值,即使用基于“文档流”的定位
relative,相对定位,即在“文档流”的基础上,结合left和top属性,相对定位
absolute,绝对定位,即脱离“文档流”,并基于它的“包含框”,使用left和top属性来定位
fixed,固定定位,即特殊的绝对定位,即它的“包含框”为浏览器
- position:relative;:相对定位
相对与原来的位置,使用left,right进行偏移原来的位置对于后继元素的定位(float)依然有效对于使用float的元素,realative也同样起作用 - position:absolute;:绝对定位
绝对定位脱离了”文档流“,使用绝对定位时,注意找准”包含框“,即包含该标签,并且距它最近的,position不等于static的标签如果没有,那么将以浏览器左上角为准来定位
只定义position:absolute;没设置left和top,标签位置仍安“文档流”定位,但已经“脱离文档流” - float:具有“破坏性”,它会导致父元素“坍塌”,这将不是所要看到的。
介绍4种清除浮动的方法
1.为父元素添加overflow:hidden
2.为父元素增加height
3.clear:both。通过在所有浮动元素下方添加一个clear:both的元素,可以消除float的破坏性。
4.伪类消除
列表样式
- list-style-type 列表样式类型
- disc/circle/square
- list-style-image 列表样式图片
- list-style-position 列表样式位置
- outside / inside
元素不可见
- display:none
- visibility:visible/hidden
- opacity:0-1
光标样式 - cursor:pointer/help/wait/url(),auto