CSS 简介
HTML
控制网页的结构,CSS
控制网页的外观,JavaScript
控制网页的行为
CSS引入方式
外部样式表
外部样式表: 把 CSS
代码和 HTML
代码单独放在不同文件中,然后在 HTML
文档中使用 link
标签来引用 CSS
样式表
外部样式表在单独文件中定义,然后在 HTML
文件的 <head></head> 标签对中使用 link
标签来引用
<link rel="stylesheet" type="text/css" href="文件路径" />
rel:
relative
缩写,取值是固定的,即 stylesheet
引入一个样式表文件,即 CSS
文件
type
取值固定即 “text/css”
,表示这是标准的 CSS
href
属性表示 CSS
文件的路径
内部样式表
内部样式表: 把 HTML
代码和 CSS
代码放到同一个 HTML
文件中,CSS
代码放在 style
标签内,并且 style
标签是放在 head
标签内部
<style type = "text/css"></style>
type = “text/css”
是必须添加的,表示标准的 CSS
行内样式表
行内样式表: 把 HTML
代码和 CSS
代码放到同一个 HTML
文件中,行内样式表的 CSS
是在 style
属性中定义的。
@import
方式在实际开发中不常用,因为 @import
方式会先加载 HTML
后加载 CSS
,如果 HTML
在 CSS
之前加载,页面用户体验就会非常差
CSS 选择器
元素的 id 和 class
id:
具有唯一性,同一个页面相同的 id
只能出现一次,如果出现多个相同的 id
,那么 CSS
和 JavaScript
就无法识别这个 id
对应的是哪一个元素
class:
同一个页面的相同元素或者不同元素设置相同的 class
,相同的 class
具有相同的 CSS
样式
选择器
选择器: 用一种方式选中你想要的元素,选择器的不同在于选择方式的不同
元素选择器
元素选择器: 选中相同的元素,然后给相同的元素定义同一个 CSS
样式
<style>
选择符{ 属性: 属性值;} /*选择符就是元素符号*/
</style>
id 选择器
在同一个页面,不允许有两个相同的 id
<style type="text/css">
#id名称{ 属性:属性值;} /* id选择器 id名前必须加上前缀# */
</style>
class 选择器
类选择器: 对相同元素或者不同元素定义相同的 class
属性,然后相同的 class
的元素拥有相同的 CSS
属性
<style type="text/css">
.类名称{ 属性: 属性值; } /* 必须加前缀 . 表明这是一个 class 选择器*/
</style>
后代选择器
后代选择器: 选择元素内部中所有的某一种元素,包括子元素和其他后代元素
<style type="text/css">
选择器1 选择器2 { 属性:属性值; } /*选择器1 父选择器 选择器2 后代选择器*/
</style>
父元素和后代元素必须要用空格隔开,从而表示选中某个元素内部的后代元素
群组选择器
群组选择器: 同时对几个选择器进行相同的操作
<style>
选择器1, 选择器2{ 属性: 属性值; } /* 群组选择器,两个选择器之间用一个 , 隔开*/
</style>
字体样式
字体类型 font-family
语法格式
font-family: 字体1, 字体2, ... , 字体 N;
font-family:
可以指定多种字体,使用多种字体时,从左到右的顺序排列,并且以英文 , 隔开,如果不定义 font-family
浏览器默认字体类型一般是宋体
在实际开发中,比较美观的中文字体有微软雅黑、宋体;英文字体有
T
i
m
e
s
N
e
w
R
o
m
a
n
Times New Roman
TimesNewRoman、
A
r
i
a
l
Arial
Arial、
V
e
r
d
a
n
a
Verdana
Verdana
字体大小 font-size
font-size
属性定义字体大小,属性取值关键字 small
、medium
、large
等,还可以取像素值 px
font size: 像素值;
字体粗细 font-weight
font-weight: 取值;
属性值 | 说明 |
---|---|
n o r m a l normal normal | 正常(默认值) |
l i g h t e r lighter lighter | 较细 |
b o l d bold bold | 较 粗 较粗 较粗 |
b o l d e r bolder bolder | 很粗(效果跟 b o l d bold bold 差不多) |
实际开发中,一般用 bold
这个属性值,其余用的很少
字体风格 font-style
font-style: 取值;
属性值 | 说明 |
---|---|
n o r m a l normal normal | 正常( 默认值 ) |
i t a l i c italic italic | 斜体 |
o b l i q u e oblique oblique | 斜体 |
字体颜色 color
color: 颜色值;
颜色值可以选择关键字,例如 red
、blue
、green
等,也可以选择 16 进制 RGB
值
CSS 注释
/* 注释内容 */
文本样式
文本样式: 注重整体效果
首行缩进 text-indent
如果用四个  
实现两个空格缩进,但是在实际开发中冗余代码很多,因此设置 text-indent
为 font-size
值的两倍实现空格缩进
水平对齐 text-align
text-align: 取值;
属性值 | 说明 |
---|---|
l e f t left left | 左对齐( 默认值 ) |
c e n t e r center center | 居中对齐 |
r i g h t right right | 右对齐 |
文本修饰 text-decoration
text-decoration: 取值;
属性值 | 说明 |
---|---|
n o n e none none | 去除所有的划线效果( 默认值 ) |
u n d e r l i n e underline underline | 下划线 |
l i n e − t h r o u g h line-through line−through | 中划线 |
o v e r l i n e overline overline | 顶划线 |
下划线: 一般强调文章的重点
中划线: 一般用于促销
顶划线: 实际开发用的很少
大小写 text-transform
text-transform:取值;
属性值 | 说明 |
---|---|
n o n e none none | 无转换( 默认值 ) |
u p p e r c a s e uppercase uppercase | 转换为大写 |
l o w e r c a s e lowercase lowercase | 转换为小写 |
c a p i t a l i z e capitalize capitalize | 只将每个英文单词首字母转换为大写 |
行高 line-height
行高: 一行的高度
line-height: 像素值;
字间距 letter-spacing
letter-spacing: 像素值;
词间距
word-spacing: 像素值;
边框样式
边框宽度 border-width
border-width: 像素值;
边框外观 border-style
属性值 | 说明 |
---|---|
n o n e none none | 无样式 |
d a s h e d dashed dashed | 虚线 |
s o l i d solid solid | 实线 |
边框颜色 border-color
border-color: 关键字(16进制RGB值)
border: 1px solid red;
/* 等价于 */
border-width: 1px;
border-style: solid;
border-color: red;
局部样式
上边框
border-top: 1px solid red;
下边框
border-bottom:1px solid red;
左边框
border-left:1px solid red;
右边框
border-right:1px solid red;
去掉上边框
border-top:0px; border-top:0; border-top:none; /*三个是等价的*/
列表样式
列表项符号 list-style-style
list-style-type: 取值;
有序列表取值
属性值 | 说明 |
---|---|
d e c i m a l decimal decimal | 阿拉伯数字: 1、2、3 … ( 默认值 ) |
l o w e r − r o m a n lower-roman lower−roman | 小写罗马数字: i、ii … |
u p p e r − r o m a n upper-roman upper−roman | 大写罗马数字: I、II … |
l o w e r − a l p h a lower-alpha lower−alpha | 小写英文字母: a、b、c … |
u p p e r − a l p h a upper-alpha upper−alpha | 大写英文字母: A、B、C … |
无序列表取值
属性值 | 说明 |
---|---|
d i s c disc disc | 实心圆( 默认值 ) |
c i r c l e circle circle | 空心圆 |
s q u a r e square square | 正方形 |
去除有序列表或无序列表的列表项符号
list-style-type: none;
列表项图片 list-style-image
list-style-image:url(图片路径);
使用图片来代替列表项符号
表格样式
在 table
元素中定义
表格标题位置 caption-side
caption-side
属性定义表格标题的位置
caption-side:取值;
属性值 | 说明 |
---|---|
t o p top top | 标题在顶部(默认值) |
b o t t o m bottom bottom | 标题在底部 |
表格边框合并 border-collapse
border-collapse:取值;
属性值 | 说明 |
---|---|
s e p a r a t e separate separate | 边框分开,有空隙 ( 默认值 ) |
c o l l a p s e collapse collapse | 边框合并,无空隙 |
表格边框间距 border-spacing
border-spacing: 像素值;
图片样式
width:像素值;
height:像素值;
图片边框
border: 1px solid red;
/*边框宽度 边框样式 边框颜色*/
图片对齐
text-align
:图片水平对齐和文本水平对齐
text-align:取值;
属性值 | 说明 |
---|---|
l e f t left left | 左 对 齐 ( 默 认 值 ) 左对齐(默认值) 左对齐(默认值) |
c e n t e r center center | 居中对齐 |
r i g h t right right | 右对齐 |
vertical-align
:垂直对齐方式
vertical-align:取值;
属性值 | 说明值 |
---|---|
t o p top top | 顶部对齐 |
m i d d l e middle middle | 中部对齐 |
b a s e l i n e baseline baseline | 基线对齐 |
b o t t o m bottom bottom | 底部对齐 |
文字环绕 float
float
:实现图文混排的效果,文字环绕着图片进行布局
float:取值;
属性值 | 说明 |
---|---|
l e f t left left | 元素向左浮动 |
r i g h t right right | 元素向右浮动 |
背景样式
背景颜色 background-color
background-color: 颜色值;
color
属性定义文本颜色;background-image
属性来为元素定义背景图片
背景图片样式 background-image
background-image: url(图片路径);
背景图片重复 background-repeat
background-repeat:取值;
属性值 | 说明 |
---|---|
r e p e a t repeat repeat | 在水平方向和垂直方向上同时平铺 ( 默认值 ) |
r e p e a t − x repeat-x repeat−x | 只在水平方向 ( x轴 ) 上平铺 |
r e p e a t − y repeat-y repeat−y | 只在垂直方向 ( y轴 ) 上平铺 |
n o − r e p e a t no-repeat no−repeat | 不平铺 |
背景图片位置 background-position
background-position:像素值/关键字;
像素值的情况
background-position:水平距离 垂直距离;
水平距离,垂直距离这两个数值之间要用空格隔开,两者取值都是像素值
关键字
属性值 | 说明 |
---|---|
t o p top top l e f t left left | 左上 |
t o p top top c e n t e r center center | 靠上居中 |
t o p top top r i g h t right right | 右上 |
l e f t left left c e n t e r center center | 靠左居中 |
c e n t e r center center c e n t e r center center | 正中 |
r i g h t right right c e n t e r center center | 靠左居中 |
b o t t o m bottom bottom l e f t left left | 左下 |
b o t t o m bottom bottom c e n t e r center center | 靠下居中 |
b o t t o m bottom bottom r i g h t right right | 右下 |
背景图片固定 background-attachment
background-attachment:取值;
属性 | 说明 |
---|---|
s c r o l l scroll scroll | 随元素一起滚动 ( 默认值 ) |
f i x e d fixed fixed | 固定不动 |
超链接样式
默认情况下:字体为蓝色,带有下划线
鼠标点击时:字体为红色,带有下划线
鼠标点击后:字体为紫色,带有下划线
超链接伪类
伪类 | 说明 |
---|---|
a : l i n k a:link a:link | 定义 a a a 元素未访问时的样式 |
a : v i s i t e d a:visited a:visited | 定义 a a a 元素访问后的样式 |
a : h o v e r a:hover a:hover | 定义鼠标经过 a a a 元素时的样式 |
a : a c t i v e a:active a:active | 定义鼠标点击激活时的样式 |
超链接伪类,用到两种状态:未访问时状态 a{ }
和鼠标经过状态a:hover{ }
元素: hover{ }
:hover
伪类可以定义任何一个元素在鼠标经过时的样式
鼠标样式
cursor: 取值;
自定义鼠标样式
cursor:url(图片地址), 属性值;
图片地址即鼠标图片地址,其后缀名一般是 .cur
,属性值一般是 default
、pointer
、text
这三种
盒子模型
CSS
盒子模型理论中,页面中所有元素都可以看成一个盒子,并且占据着一定的页面空间
属性 | 说明 |
---|---|
c o n t e n t content content | 内容,可以是文本或图片 |
p a d d i n g padding padding | 内边距,用于定义内容与边框之间的距离 |
m a r g i n margin margin | 外边距,用于定义当前元素与其他元素之间的距离 |
b o r d e r border border | 边框,用于定义元素的边框 |
宽高 width与height
只有块元素才可以设置 width
、height
width:像素值;
height:像素值;
边框 border
border:1px solid red;
/* border-width border-style border-color*/
内边距 padding
内边距: 指的是内容区和边框之间的空间
padding-top:像素值;
padding-right:像素值;
padding-bottom:像素值;
padding-left:像素值;
padding 简写
padding:20px; /*表示四个方向的内边距是 20px*/
padding:像素值1 像素值2;
/*表示padding-top 和 padding-bottom为20px;
padding-right 和 padding-left为40px*/
padding:20px 40px 60px 80px;
/*padding-top:20px; padding-right:40px;
padding-bottom:60px; padding-left:80px;
*/
外边距
外边距: 指的是边框到 “父元素” 或 “兄弟元素” 之间的那一部分;外边距是在元素边框的外部
margin-top:像素值;
margin-right:像素值;
margin-bottom:像素值;
margin-left:像素值;
当只有父元素时,该元素设置的 margin
就是相对于父元素之间的距离
当既有父元素,也有兄弟元素时,该元素会先看看四个方向有没有兄弟元素存在。如果该方向有兄弟元素,则这个方向的 margin
就是相对于兄弟元素而言。该方向没有兄弟元素,则这个方向的 margin
就是相对于父元素而言
margin:20px; /*表示四个方向的外边距都是 20px*/
margin:20px 40px;
/*
margin-top 和 margin-bottom 为 20px;
margin-right 和 margin-left 为 40px;
*/
margin:20px 40px 60px 80px;
/*
margin-top:20px;
margin-right:40px;
margin-bottom:60px;
margin-left:80px;
*/
浏览器审查元素
以 Chrome
浏览器为例
①将鼠标移到你想要的元素上面,然后按一下右键,从菜单中选择检查
②在弹出的控制台中,可以找到该元素的盒子模型
浮动布局
正常文档流
正常文档流 即普通文档流或普通流;将一个页面从上到下分为一行一行的,其中块元素独占一行,相邻行内元素在每一行中按照从左到右排列直到该行排满;即默认情况下页面的布局情况
脱离文档流
脱离文档流: 脱离正常的文档流,设置浮动或定位即可
浮动
浮动主要考虑用来实现两列或者多列并排效果
float:取值;
属性值 | 说明 |
---|---|
l e f t left left | 元素向左浮动 |
r i g h t right right | 元素向右浮动 |
清除浮动
clear:取值;
属性值 | 说明 |
---|---|
l e f t left left | 清除左浮动 |
r i g h t right right | 清除右浮动 |
b o t h both both | 同时清除左浮动和右浮动 |
定位布局
定位布局的出现,使得精准定位页面中的任意元素成为可能,页面布局操作更加随心所欲
固定定位 fixed
position:fixed; /* 使元素成固定,使用 top; bottom; left; right 设置相对于浏览器的位置*/
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
相对定位:relative
相对定位指元素的位置是相对于它的原始位置计算而来的
position:relative; /* 使元素成相对定位,使用 top; bottom; left; right 设置相对于原始的位置*/
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
绝对定位 absolute
绝对定位精确地把元素定位到任意你想要的位置
position:absolute;/*使元素成绝对定位,使用 top; bottom; left; right 设置相对于浏览器的位置*/
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
默认情况下,固定定位和绝对定位的位置是相对于浏览器而言,而相对定位的位置是相对原始位置而言
静态定位 static
默认情况下,元素没有指定 position
属性时,这个元素就是静态定位