5.2table的布局
页面的布局可以通过table来实现,一个单元格就是一个布局区域单位。该单元区域的大小可以通过height和width来实现,每一个但与格斗需要进行独立的编写和修改。当需要单元格合并时,就可以结合rowspan和colspan这两个属性来完成。
如果布局比较复杂的时候,可以使用table的嵌套来完成
table表格中布局就是页面的一个整体上的结构,从上往下,从做往右,对页面进行整体规划,一般来说每一行的高度是一致的。
table一般用于政府网站或者老式网页的布局。优势在于容易编写,但缺点比较大,因为代码较多的原因,读取较慢,且不方便维护和修改。
6.div
6.1写法
<div style="border: dashed;width: 100px;height: 100px"></div>
div的显示有一个特点,它会在新的一行进行显示,是一个块级标签,跟<p>标签极其相似。
块级标签会占满一整行,而内联标签则会从左至右依次排列。
7.标签的总结
块级标签的特点是会在新的一行进行显示,内联标签则相反,不会另起一行,重新显示。
块级标签有div,h1~h6,p,hr,ul,ol,dl,tr,option,caption,dd,dl...li
内联标签有img,input,a,td,textarea,span,label,select,button....
内联标签一般情况下不能嵌套块级标签
CSS基础知识
1.基本概念
· CSS 指层叠样式表 (Cascading Style Sheets)
2.为什么要用css
HTML描述了要呈现的内容,而css则定义了这写内容的呈现形式,比如字体、颜色等。使用css能够将页面内容和呈现的行势有效的分离,有利于分工合作,也有利于快速更换不同的呈现形式。
内连样式的有效优先级要高于内部样式的有效优先级。
使用样式表可以有三种样式
(1)内联样式
<pstyle="font-size:24px;color:green">内联样式的演示</p>
将样式定义在style属性中,内部和表现形式耦合,不利于维护,分工合作变的困难
(2)内部样式
</head>
<table></table>
<style>
p{
font-size:36px;
color:red;
}
</style>
<body>
<p>内部样式的演示1</p>
<p>内部样式的演示2</p>
在<head>标签中通过<style>标签来定义
内容和表现形式的耦合程度降低了,但是都还在html文件中,没有实现完全分离
定义的样式只能在当前页面中使用
(3)外部样式表
首先定义一个css文件
p{
font-size:36px;
color:red;
}
接下来再将其引用到需要使用该样式的html文件中
<linkrel="stylesheet"type="text/css"href="css/E101-01-01.css">
外部样式的引用能够使所需内容和表现的形式彻底分离开,有利于分工合作及维护。可以在多个HTML文件中引用
1.2颜色
所有的颜色都可以由红色(red)、绿色(green)和蓝色(blue)三种无法被还原出来的颜色调配而成,这三种颜色俗称三原色。
在CSS中用8个位数表示一种颜色,即可以表示出28种颜色,也就是256种颜色。所以总共可以表示的颜色有256*256*256种。
在CSS中有多种颜色的表示形式:
(1)十六进制:
<pstyle="color:#800000">十六进制颜色</p>
(2)RGB颜色
<pstyle="color:RGB(255,0,0)">十六进制颜色</p>
(3)透明度颜色RGBA:在RGB颜色的基础上增加了透明度分量(Alpha),取值在0(完全透明)~1.0(完全不透明)之间。
<pstyle="color:RGBA(255,0,0,0.5)">RGBA颜色</p>
(4)HSL颜色:在RGB颜色之外,还有一种由色调、饱和度和明度三个分量构成的颜色
<pstyle="color:HSL(255,50%,50%)">HSL颜色</p>
(5)HSLA颜色:同RGBA类似,在HSL基础上加入透明度分量Alpha
<pstyle="color:HSLA(255,50%,50%,0.4)">HSL颜色</p>
(6)预定义颜色:由CSS提供,直接输入该颜色的英文就可以得到
<pstyle="color:red">颜色</p>
1.3尺寸单位
常见的单位:
cm:厘米
mm:毫米
in:英寸(inch)
px:像素(pixel)
%:百分比
em:相对长度单位,相对于当前对象内文本的字体尺寸
vw:相对于视口的宽度
vh:相对于视口的高度
px:绝对单位,%:相对单位
2.1字体相关属性
font-family:字体名称
font-size:字体大小
font-style:字形(斜体等)
font-variant:字体变化(如大写)
font-weight:字体粗细
可以简写,书写顺序
font-style font-variant font-weight font-size font-family
前面三个属性可以省略使用默认的数值,后两个属性必须需设置,这样比较方便
2.2文本相关属性
主要包括了颜色、对齐方式、修饰效果等。
color:颜色,前景色
none:默认没有装饰效果
text-decoration 文字的修饰
nuderline:文字下划线
line-through:删除线
overline:文字上划线
text-shadow:增加阴影,比如text-shadow: -5px 5px yellow的含义就是定义一个黄色的背影,其水平方向向左移5px,垂直方向向下移5px
direction:文字对齐方向
ltr:从左往右;rtl:从右往左
text-align:水平对齐方式
left左对齐
right 右对齐
center:居中对齐
justify:两端对齐
vertical-align: 垂直对齐方式
top:靠上对齐
bottom:靠下对齐
middle:垂直居中对齐
text-indent:文本的缩进
letter-spacing:字符的间距
word-spacing:字(单词)的间距
line-height:设置行高,实际上是调整行间距