CSS
注释
1 | <!--HTML注释--> |
1 | /*CSS注释*/ |
CSS
引用方式
外部样式表
最理想的CSS
引用方式,把CSS
代码和HTML
代码放在不同的文件中,然后在HTML
文档中的head
标签内使用link
标签来引用CSS
样式表
1 | <head> |
内部样式表
HTML
代码和CSS
代码放在同一个文件。其中CSS
代码放在<style><style/>
标签对中。
1 | <head> |
内联样式表
HTML
代码和CSS代码同一个文件并且就在标签内使用style
属性内写CSS
代码
1 | <body> |
内联样式表容易造成混乱,一般采用外部样式表,代码相对少用内部样式表
CSS
选择器
元素id
和class
id
属性具有唯一性,一个页面内不能出现相同的id
(身份证号)class
可以有多个,相当于给每一个元素归类(姓名)- 一个标签可以定义多个
class
给特定的元素定义样式用
id
,要是为多个或者两个以上的元素定义相同的样式选择class
减少代码重复率
id
选择器
作用:给设置id
的元素进行CSS
样式操作,这个操作无疑是唯一的
说明:选择器id
名前必须加上前缀’#’,否则不生效
1 | #ivye{ |
class
选择器
作用:可以对“相同的元素”或者“不同的元素”设置一个class
,然后针对这类元素进行CSS
样式操作
说明:选择器class
名前必须加上’.’(英文点号),否则不生效
1 | .ivye{ |
子选择器
作用:选中某个或者某一类元素下的子选择器,然后贵该子元素进行CSS
样式操作
说明:父元素和子元素之间必须用空格间隔
1 | #father1 div{ |
father1
内的div
元素被定义CSS
但是father2
内的div
元素不受影响。同理father2
的son
类元素被定义但是father2
内的非son
类元素和father1
的元素不受影响。
相邻选择器
作用:选择该元素的下一个兄弟元素,即指定的下一个同级元素。
说明:两元素之间用’+'相连
1 | #lv+div{ |
因为指定的是
lv
的下一个div
元素,所以跳过了p
元素,选中了id
是this
的第一个相邻的this
元素
群选择器
作用:对几个选择器进行相同的操作减小代码使用量
说明:选择器之间用’,’(英文逗号)隔开
1 | h3,#father,.son,lv+div{ |
字体样式
属性 | 说明 |
---|---|
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
每英寸96px
,Mac
每英寸72px
)
color
- 使用关键字(颜色的英文名字)
- 使用16进制
RGB
font-weight
字体粗细指的是“肥瘦”,字体大小指的是“高宽”
font-weight:关键字/粗细值;
属性 | 说明 |
---|---|
normal |
默认值,正常体 |
lighter |
较细 |
bold |
较粗 |
bolder |
超粗(和bold没区别) |
粗细值是从100~900数值取,越大越粗。不建议用
font-style
HTML
的斜体改为在CSS
中定义,有三种选择
属性 | 说明 |
---|---|
normal |
默认值,正常体 |
italic |
应用字体斜体属性 |
oblique |
强行将字体倾斜 |
有些字体没有加粗,倾斜的属性,这时候
itlic
取值不起作用,就需要oblique
强行将字体更改为斜体
文本样式
字体样式主要是设计字体本身的形体效果(个体),文本样式主要是涉及文字的排版效果(整体),所以标签分别采用
font
和text
前缀来区分
属性 | 说明 |
---|---|
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 | border-top-width:1px; |
bottom
,left
,right
同样方法
背景样式
块元素都可以设置背景样式
属性 | 说明 |
---|---|
background-color |
控制背景颜色 |
background-image |
定义背景图像路径 |
background-repeat |
定义背景图片显示方式 |
background-position |
定义背景图像位置 |
background-attachment |
定义背景图片是否随 内容滚动 |
background-color
background-color:颜色值;
background-image
background:url("引用路径");
想要给元素设置背景图片,元素必须有一定的高度和宽度,设置
content
或者padding
、margin
空间,或者有其他内容把元素撑开
background-repeat
属性 | 说明 |
---|---|
no-repeat |
表示不平铺 |
repeat |
默认值,在x,y轴同时平铺 |
repeat-x |
在x轴平铺 |
repeat-y |
在y轴平铺 |
background-position
我们可以使用background
属性来定义背景图像的位置,background
只能
应用于块元素和替换元素(img
、input
、select
、object
)
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 | a:link{ |
注意:四种样式写的时候必须按照上面的顺序,否则可能显示不了
记忆方法: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 |
此光标指示可用的帮助(通常是一个问号或一个气球)。 |
一般就是用到
default
和point
两个属性值
自定义鼠标样式
cursor:url("引用地址"),属性;
引用图标的同时还要说明属性
图片样式
图片大小
用width
和height
定义元素的高度
图片边框
边框样式设置用之前的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 | border-spacing:1px;/*横向纵向都间距1px*/ |
标题位置caption-side
caption-side:属性值;
属性 | 说明 |
---|---|
top |
默认值,标题在顶部 |
bottom |
标题在底部 |
CSS
盒子模型
- 页面中所有的元素都可以看做是一个占据一定页面空间的盒子
- 一个页面由很多这样的盒子组成且这些盒子之间会相互影响
主要研究的是:单独单独一个盒子的内部结构和多个盒子之间的相互关系
属性 | 说明 |
---|---|
border |
(边框)元素边框 |
margin |
(外边距)用于定义页面中元素与元素之间的距离 |
padding |
(内边距)用于定义内容和边框之间的距离 |
content |
(内容)可以是文字或者图片 |
width |
(宽度)定义content 的宽度 |
height |
(高度)定义content 的高度 |
图中比较粗的那条黑线就是盒子的边框
- 内容区是
CSS
盒子模型的中心,呈现主要的内容。内容区是盒子模型的必备组成部分,其他三个部分可选。
内容区有三个属性:
weight
、height
、overflow
分别辅助。overflow
主要是用于当内容信息超过太多的时候可以掩藏溢出部分
- 内边距指的是内容和边框之间的距离,可以看做是内容区的背景区域。
有五个属性
padding-top
、padding-bottom
、padding-left
、padding-right
和综合四个方向的padding
简洁属性
-
边框有三个属性:
border-width
、border-style
、border-color
-
外边距指的是两个盒子之间的距离,他可能是父元素和子元素之间的距离,也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑连接在一起,是
CSS
布局的主要手段
外边距可以指定负数值——“负
margin
技术”
width
和height
针对内容区而言,其中只有块元素可以设置width
和height
,行内元素不可以
行内元素没有高度和宽度(不能设定),其所占空间由字体的多少和大小决定,但是行内元素可以设定边框和背景元素
简洁写法
由于margin
和padding
需要设置四个方向的间距,所以可以简写:
1 | margin:20px; |
padding
也是如此
浮动布局
HTML
文档流
学习正常文档流对后续学习浮动布局和定位布局很关键
正常文档流
定义:元素在页面出现的先后顺序
规则:将窗体自上而下分成一行一行,块元素独占一行,相邻行内元素在每行中按照自左向右依次排列元素
脱离正常文档流
相对于正常文档流而言,正常文档流是没用
CSS
样式控制HTML
文档结构,写的界面的顺序就是按照网页展示顺序显示
定义:它所显示的位置和文档代码顺序不一致,例如用CSS
样式把最后一个div
元素显示在第一个div
元素前面,此时就已经脱离正常文档流了
浮动布局float
作用:浮动属性float
是CSS
样式布局的最佳利器,可以通过不同的浮动属性值灵活定位div
元素以达到网页布局的目的
以往这个属性用于图像来进行图文排版,不过在CSS
中任何元素都可以进行浮动,可以通过CSS
的属性float
使元素向左或向右浮动(让盒子及其其中的内容浮动到文档的左边或者右边)
规则:
-
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止
-
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样
-
浮动元素会生成一个块级框,不论其本身是何种元素
-
元素浮动后宽度不再延伸而是变为能容纳其内容的最小宽度
-
若是下一个元素不是浮动元素,则一定会紧贴当前浮动元素(不受外边距影响)
-
若是下一个元素也是浮动元素,则之间的距离为外边距的距离
清除浮动clear
注意:应用对象不是浮动对象本身而是浮动对象后面的元素
作用:让清除浮动的元素不再受浮动元素的影响,而是回归到原本正常文档流的位置
clear:属性值;
属性 | 说明 |
---|---|
left |
清除左浮动 |
right |
清除右浮动 |
both |
左右浮动一起清除 |
一般就是用clear:both;
直截了当的清除所有浮动属性
定位布局
浮动布局比较灵活但是不容易控制,定位布局容易控制但是很死板,响应式不好,总之各有各的好处
作用:使一个元素精确放在页面上你指定的位置
方式:
- 固定布局(
fixed
) - 相对定位(
relative
) - 绝对定位(
absolute
) - 静态定位(
static
)
固定定位fixed
效果:被固定的元素不会随着滚动条的拖动而改变位置。在视野中固定定位的元素的位置不会改变,相当于回顶按钮的效果
用法
1 | position:fixed; |
说明position:fixed
和四个属性搭配使用但是不一定都用到。上下或者左右分别选一个定下来就可以确定位置了
参考对象:浏览器的四条边
相对定位relative
效果:元素在原始位置的基础上向某一个方像移动一定的距离
用法
1 | position:relative; |
说明:相对定位的容器浮上来后其所占的额原始位置仍然保留(也就是说后面的无定位的元素不会“挤上来”)并且在新的位置占据相应空间
参靠对象:相对于原始位置
绝对定位absolute
该属性在定位布局中应用最为广泛
效果:精确的指定元素所处的位置并且会将元素转变为块级元素
用法
1 | position:absolute; |
说明:元素会脱离正常文档流,绝对定位元素的前面或者后面元素会认为这个元素并不存在,即这个元素浮于其他元素上面独立出来
参考对象:
absolute
的参考对象是父对象,如果父对象没有定位设置则参照body
对象,这里的定位设置意思就是,absolute
的父对象一定要设置position:relative
才有效absolute
属性对象的上一个兄弟元素有float
浮动属性,则要清除浮动,否则,此对象不会显示
静态定位static
没有指定元素的position
属性值的(也就是默认情况下)元素是静态定位,只要是支持position
属性的HTML
对象都是默认static
,它表示保留在原本应该在的位置不会重新定位