CSS注释

1
<!--HTML注释-->
1
/*CSS注释*/

CSS引用方式

外部样式表

最理想的CSS引用方式,把CSS代码和HTML代码放在不同的文件中,然后在HTML文档中的head标签内使用link标签来引用CSS样式表

1
2
3
<head>
<link href="CSS路径" rel="stylesheet" type="text/css"/>
</head>

内部样式表

HTML代码和CSS代码放在同一个文件。其中CSS代码放在<style><style/>标签对中。

1
2
3
4
5
<head>
<style type="text/css">
/*CSS代码*/
</style>
</head>

内联样式表

HTML代码和CSS代码同一个文件并且就在标签内使用style属性内写CSS代码

1
2
3
<body>
<p style="CSS代码"></p>
</body>

内联样式表容易造成混乱,一般采用外部样式表,代码相对少用内部样式表

CSS选择器

元素idclass

  • id属性具有唯一性,一个页面内不能出现相同的id(身份证号)
  • class可以有多个,相当于给每一个元素归类(姓名)
  • 一个标签可以定义多个class

给特定的元素定义样式用id,要是为多个或者两个以上的元素定义相同的样式选择class减少代码重复率

id选择器

作用:给设置id的元素进行CSS样式操作,这个操作无疑是唯一的

说明:选择器id名前必须加上前缀’#’,否则不生效

1
2
3
#ivye{
/*CSS代码*/
}

class选择器

作用:可以对“相同的元素”或者“不同的元素”设置一个class,然后针对这类元素进行CSS样式操作

说明:选择器class名前必须加上’.’(英文点号),否则不生效

1
2
3
.ivye{
/*CSS代码*/
}

子选择器

作用:选中某个或者某一类元素下的子选择器,然后贵该子元素进行CSS样式操作

说明:父元素和子元素之间必须用空格间隔

1
2
3
4
5
6
7
#father1 div{
/*CSS代码*/
}

#father2 .son{
/*CSS代码*/
}

father1内的div元素被定义CSS但是father2内的div元素不受影响。同理father2son类元素被定义但是father2内的非son类元素和father1的元素不受影响。

相邻选择器

作用:选择该元素的下一个兄弟元素,即指定的下一个同级元素。

说明:两元素之间用’+'相连

1
2
3
4
5
6
7
8
9
#lv+div{
/*CSS代码*/
}

<body>
<div id="lv"></div>
<p></p>
<div id="this"></div>/*选中的是这个*/
</body>

因为指定的是lv的下一个div元素,所以跳过了p元素,选中了idthis的第一个相邻的this元素

群选择器

作用:对几个选择器进行相同的操作减小代码使用量

说明:选择器之间用’,’(英文逗号)隔开

1
2
3
h3,#father,.son,lv+div{
/*CSS代码*/
}

字体样式

属性 说明
font-family 字体类型
font-size 字体大小
font-weight 字体粗细
font-style 字体斜体
color 颜色

除了color特殊,其他的关于字体样式的设置都有font开头

font-family

font-family:字体1,字体2,字体3;

最好定义多个字体,如果不显示会依次向后定义字体

font-size

font-size:关键字/像素值

属性 说明
xx-small 最小
x-small 较小
small
medium 默认值,正常
large
x-large 较大
xx-large 最大

像素值:px是相对单位(Win每英寸96pxMac每英寸72px

color

  • 使用关键字(颜色的英文名字)
  • 使用16进制RGB

font-weight

字体粗细指的是“肥瘦”,字体大小指的是“高宽”

font-weight:关键字/粗细值;

属性 说明
normal 默认值,正常体
lighter 较细
bold 较粗
bolder 超粗(和bold没区别)

粗细值是从100~900数值取,越大越粗。不建议用

font-style

HTML的斜体改为在CSS中定义,有三种选择

属性 说明
normal 默认值,正常体
italic 应用字体斜体属性
oblique 强行将字体倾斜

有些字体没有加粗,倾斜的属性,这时候itlic取值不起作用,就需要oblique强行将字体更改为斜体

文本样式

字体样式主要是设计字体本身的形体效果(个体),文本样式主要是涉及文字的排版效果(整体),所以标签分别采用fonttext前缀来区分

属性 说明
text-decoration 下划线、删除线、顶划线
text-transform 文本大小写
text-align 文本水平对齐方式
text-indent 段落首行缩进
font-variant 英文文本转为“小型”大小写
line-height 行高
letter-spacing 字距
word-spacing 词距

text-decoration

属性 说明
none 默认值,可以用这个取消其他格式
underline 下划线
line-through 删除线
overline 顶划线

HTML中删除线用s标签,下划线用u标签

用途:超链接a标签默认样式下具有下划线用text-decoration标签的none属性删除。促销活动中经常用删除线来划掉原价。

text-transform

属性 说明
none 默认值,无转换
uppercase 大写转换
lowercase 小写转换
capitalize 首字母大写转换

text-indent

text-indent:像素值;

p标签没有首行缩进功能,用text-indent来实现

text-align

在想要设置的元素的父元素中定义

属性 说明
left 默认值,左对齐
center 居中对齐
right 右对齐

text-align不仅对于文本适用,也适用于行内元素和行内块元素(img标签),但是对其他标签一律无效

font-variant

属性 说明
normal 默认值,正常个体
small-caps 小型大写字母的字体

只适用于英文,中文哪有大小写区分

line-height

line-height:像素值;

注意:行高和行间距是两个概念

letter-spacing/word-spacing

letter-spacing/word-spacing:像素值;

  • letter-spacing控制的是字间距,每一个汉字作为一个“字”,而每一个英文字母作为一个“字”,一般用不上
  • word-spacing控制的是词间距,以空格为基准进行调节,多个单词连在一起视为一个单词,空格隔开的汉字被视为不同的单词

边框样式

注意:任何块元素和行内元素都可以设置边框属性,因为都是盒子模型

属性 说明
border-width 边框宽度
border-style 边框外观
border-color 边框颜色

注意:对于一个元素,必须同时设置这三个属性才会显示边框

整体边框样式

border-width

border-width:像素值;

border-style

作用:用来设置边框的外观,例如实线边框和虚线边框

border-style:属性值;

属性 说明
none 无样式
hidden 与"none"视觉效果相同,但是此时框还是存在的。用于解决表的边框冲突
solid 实线
dashed 虚线
dotted 点线
double 双线,双线的宽度等于border-width值
inset 内凹(3D)
outset 外凸(3D)
ridge 脊线(3D)
groove 槽线(3D)

border-color

border-color:颜色值;

注意hr标签要是想改颜色是设置border-color属性不是background-color或者color属性

边框属性的简洁写法

设置一个整体边框的三个属性时可以简写为如下:

boder:1px solid gray;

局部边框样式

单独对边框的一个边设置样式方法如下:

1
2
3
4
border-top-width:1px;
border-top-style:solid;
border-top-color:red;
border-top:1px solid red;/*简写方式也适用*/

bottom,left,right同样方法

背景样式

块元素都可以设置背景样式

属性 说明
background-color 控制背景颜色
background-image 定义背景图像路径
background-repeat 定义背景图片显示方式
background-position 定义背景图像位置
background-attachment 定义背景图片是否随 内容滚动

background-color

background-color:颜色值;

background-image

background:url("引用路径");

想要给元素设置背景图片,元素必须有一定的高度和宽度,设置content或者paddingmargin空间,或者有其他内容把元素撑开

background-repeat

属性 说明
no-repeat 表示不平铺
repeat 默认值,在x,y轴同时平铺
repeat-x 在x轴平铺
repeat-y 在y轴平铺

background-position

我们可以使用background属性来定义背景图像的位置,background只能

应用于块元素和替换元素(imginputselectobject

background-position:像素值/关键字;

  • 取值为像素值要规定x,y轴距离该元素左上角的距离,像素值之间用空格间隔
1
background:12px 24px;
  • 取值为关键字如下
属性 说明
top left 左上
top center 靠上居中
top right 右上
left center 靠左居中
center center 正中
right center 靠右居中
bottom left 左下
bottom center 靠下居中
bottom right 右下

background-attachment

background-attachment:fixed/scroll;

分别表示背景图像是否随对象滚动和固定,默认是滚动

超链接样式

超链接伪类

在所有浏览器中鼠标点击不同时期链接样式是不同的,但是默认情况下都有下划线是肯定有的

去除超链接下划线

给伪类设置一行text-decoration:none;代码就可以了

定义超链接伪类样式

CSS可以分别定义超链接伪类四个不同时期的样式

1
2
3
4
5
6
7
8
9
10
11
12
a:link{
/*定义a元素未访问时的样式*/
}
a:visited{
/*定义a元素访问后的样式*/
}
a:hover{
/*定义鼠标经过显示的样式*/
}
a:actived{
/*定义鼠标单击激活的样式*/
}

注意:四种样式写的时候必须按照上面的顺序,否则可能显示不了

记忆方法:L(link)OV(visited)E H(hover)A(actived)TE

超链接不是必须四个状态的样式都要定义,一般只需要定义未访问状态和鼠标经过的状态。

未访问的状态直接在a标签里定义就行了,这样就四个样式前遵从一个样式了,然后再在下面定义a:hover状态覆盖就实现了

深入了解:hover伪类

a:hover可以定义鼠标经过超链接(a标签)时的样式。但是:hover实际上不仅仅局限于a标签,它可以定义任意一个元素在鼠标未经过是的状态功能十分强大

鼠标样式

  • 定义浏览器鼠标样式
  • 自定义鼠标样式

浏览器鼠标样式

cursor:属性值;

属性 说明
default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右(东)移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize 此光标指示矩形框的边缘可被向上(北)移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize 此光标指示矩形框的边缘可被向下移动(南)。
w-resize 此光标指示矩形框的边缘可被向左移动(西)。
text 此光标指示文本。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。

一般就是用到defaultpoint两个属性值

自定义鼠标样式

cursor:url("引用地址"),属性;

引用图标的同时还要说明属性

图片样式

图片大小

widthheight定义元素的高度

图片边框

边框样式设置用之前的border属性就好了

图片水平对齐

text-align用于两个地方:元素内文本水平对齐和图片水平对齐,即只对文本和img标签适用。

属性 说明
left 默认值,左对齐
center 居中对齐
right 右对齐

图片垂直对齐

CSS中用vertical-align属性来定义元素内图片的垂直对齐方式

vertical-align:属性值;

属性 说明
top 顶部对齐
middle 中部对齐
baseline 基线对齐
bottom 底部对齐

文字环绕float

在网页布局中图文混排的时候(文字环绕图片布局)经常用float设置文字在某个元素的周围,它能适用于所有的元素

float:属性值;

属性 说明
left 元素向左浮动
right 元素向右浮动

默认情况下元素不浮动

定义图片与文字间距

浮动布局默认状态下图片和文字都是紧挨在一起的,可以应用盒子模型的margin(外边距)来控制间距。

列表样式

列表项符号list-style-type

CSS诞生后主张样式和标签分离,所以原先HTML定义列表项符号样式改为使用list-style-type属性设置

有序列表属性取值

属性 说明
decimal 默认值,数字1,2,3
lower-roman 小写罗马数字i,ii,iii
upper-roman 大写罗马数字I,II,III
lower-alpha 小写英文字母a,b,c
upper-alpha 大写英文字母A,B,C

无序列表属性取值

属性 说明
disc 默认值,实心圆
circle 空心圆
square 实心正方形

去除列表项符号

属性 取值
none 去除列表项符号

自定义列表项符号list-style-image

list-style-image:url("引用地址");

表格样式

下列的属性在应用时在对table元素设置即可实现

边框合并border-collapse

边框的单元格默认是存在空隙的,该属性为表格的独有属性。

作用:去除单元格之间的空隙

border-collapse:属性值;

属性 说明
separate 默认值,边框分开,不合并
collapse 边框合并,如果相邻共用一个边框

边框边距border-spacing

作用:定义边框的单元格之间横向和纵向上的间距

border-spacing:像素值;

1
2
border-spacing:1px;/*横向纵向都间距1px*/
border-spacing:1px 2px;/*横向间距1px,纵向间距2px*/

标题位置caption-side

caption-side:属性值;

属性 说明
top 默认值,标题在顶部
bottom 标题在底部

CSS盒子模型

  • 页面中所有的元素都可以看做是一个占据一定页面空间的盒子
  • 一个页面由很多这样的盒子组成且这些盒子之间会相互影响

主要研究的是:单独单独一个盒子的内部结构和多个盒子之间的相互关系

属性 说明
border (边框)元素边框
margin (外边距)用于定义页面中元素与元素之间的距离
padding (内边距)用于定义内容和边框之间的距离
content (内容)可以是文字或者图片
width (宽度)定义content的宽度
height (高度)定义content的高度

图中比较粗的那条黑线就是盒子的边框

  • 内容区是CSS盒子模型的中心,呈现主要的内容。内容区是盒子模型的必备组成部分,其他三个部分可选。

内容区有三个属性:weightheightoverflow分别辅助。overflow主要是用于当内容信息超过太多的时候可以掩藏溢出部分

  • 内边距指的是内容和边框之间的距离,可以看做是内容区的背景区域。

有五个属性padding-toppadding-bottompadding-leftpadding-right和综合四个方向的padding简洁属性

  • 边框有三个属性:border-widthborder-styleborder-color

  • 外边距指的是两个盒子之间的距离,他可能是父元素和子元素之间的距离,也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑连接在一起,是CSS布局的主要手段

外边距可以指定负数值——“负margin技术”

  • widthheight针对内容区而言,其中只有块元素可以设置widthheight,行内元素不可以

行内元素没有高度和宽度(不能设定),其所占空间由字体的多少和大小决定,但是行内元素可以设定边框和背景元素

简洁写法

由于marginpadding需要设置四个方向的间距,所以可以简写:

1
2
3
4
5
6
margin:20px;
/*四个方向间距都是20px*/
margin:20px 40px;
/*上下间距20px,左右间距40px*/
margin:10px 20px 30px 40px;
/*顺时针:上间距10px,右边距20px,下边距30px,左边距40px*/

padding也是如此

浮动布局

HTML文档流

学习正常文档流对后续学习浮动布局和定位布局很关键

正常文档流

定义:元素在页面出现的先后顺序

规则:将窗体自上而下分成一行一行,块元素独占一行,相邻行内元素在每行中按照自左向右依次排列元素

脱离正常文档流

相对于正常文档流而言,正常文档流是没用CSS样式控制HTML文档结构,写的界面的顺序就是按照网页展示顺序显示

定义:它所显示的位置和文档代码顺序不一致,例如用CSS样式把最后一个div元素显示在第一个div元素前面,此时就已经脱离正常文档流了

浮动布局float

作用:浮动属性floatCSS样式布局的最佳利器,可以通过不同的浮动属性值灵活定位div元素以达到网页布局的目的

以往这个属性用于图像来进行图文排版,不过在CSS任何元素都可以进行浮动,可以通过CSS的属性float使元素向左或向右浮动(让盒子及其其中的内容浮动到文档的左边或者右边)

规则

  • 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止

  • 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样

  • 浮动元素会生成一个块级框,不论其本身是何种元素

  • 元素浮动后宽度不再延伸而是变为能容纳其内容的最小宽度

  • 若是下一个元素不是浮动元素,则一定会紧贴当前浮动元素(不受外边距影响)

  • 若是下一个元素也是浮动元素,则之间的距离为外边距的距离

清除浮动clear

注意:应用对象不是浮动对象本身而是浮动对象后面的元素

作用:让清除浮动的元素不再受浮动元素的影响,而是回归到原本正常文档流的位置

clear:属性值;

属性 说明
left 清除左浮动
right 清除右浮动
both 左右浮动一起清除

一般就是用clear:both;直截了当的清除所有浮动属性

定位布局

浮动布局比较灵活但是不容易控制,定位布局容易控制但是很死板,响应式不好,总之各有各的好处

作用:使一个元素精确放在页面上你指定的位置

方式

  • 固定布局(fixed
  • 相对定位(relative
  • 绝对定位(absolute
  • 静态定位(static

固定定位fixed

效果:被固定的元素不会随着滚动条的拖动而改变位置。在视野中固定定位的元素的位置不会改变,相当于回顶按钮的效果

用法

1
2
3
4
5
position:fixed;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;

说明position:fixed和四个属性搭配使用但是不一定都用到。上下或者左右分别选一个定下来就可以确定位置了

参考对象浏览器的四条边

相对定位relative

效果:元素在原始位置的基础上向某一个方像移动一定的距离

用法

1
2
3
4
5
position:relative;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;

说明:相对定位的容器浮上来后其所占的额原始位置仍然保留(也就是说后面的无定位的元素不会“挤上来”)并且在新的位置占据相应空间

参靠对象相对于原始位置

绝对定位absolute

该属性在定位布局中应用最为广泛

效果:精确的指定元素所处的位置并且会将元素转变为块级元素

用法

1
2
3
4
5
position:absolute;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;

说明元素会脱离正常文档流,绝对定位元素的前面或者后面元素会认为这个元素并不存在,即这个元素浮于其他元素上面独立出来

参考对象

  • absolute的参考对象是父对象,如果父对象没有定位设置则参照body对象,这里的定位设置意思就是,absolute的父对象一定要设置position:relative才有效
  • absolute属性对象的上一个兄弟元素有float浮动属性,则要清除浮动,否则,此对象不会显示

静态定位static

没有指定元素的position属性值的(也就是默认情况下)元素是静态定位,只要是支持position属性的HTML对象都是默认static,它表示保留在原本应该在的位置不会重新定位