table的布局
布局:是一个页面的整体结构。
结构特点:从上到下,从左到右。一般每一行的高度相同
<table width="100%">
<tr>
<td colspan="3"style="height: 120px;background-color: red"></td>
</tr>
<tr>
<td style="width: 150px; height: 400px;background-color: green"></td>
<td style="width: 700px;background-color: blue"></td>
<td style="width: 150px;background-color: purple"></td>
</tr>
<tr>
<td colspan="3"style="height: 100px;background-color: yellow"></td>
</tr>
</table>
页面的布局可以通过table来实现,一个单元格就是一个布局区域单位。该区域的大小可以通过height和width属性来设置,位置通过单元格的相对位置来提现的。同时可以结合rowspan和colspan两个属性来完成单元格的合并。
当布局比较复杂时,可以使用table的且套来实现,即在某个单元格中再嵌入一个table进行划分。
5.3div(division)
<div>标签定义一个分块
写法:
<div style="border: dashed;width: 100px;height: 100px"></div>
显示特点:在新的一行进行显示。有此特点的称为:块标签(块级标签)
块级元素和内联元素的区别:
块级元素占满行,而内联元素会按照顺序从左至右依次排列
6. 标签总结
块级标签:在新的一行进行显示。
<div>、<h1>-<h6>、<p>、<hr>、<table>、<ul>、<ol>、<dl>、<tr>、<option>、<caption>、<dd>、<dl>
内联标签:不会在新的一行进行显示。
<img>、<input>、<a>、<td>、<textarea>、<span>、<label>、<select>、<th>、<button>、1.CSS基础知识
1.1基本概念
CSS 指层叠样式表 (Cascading Style Sheets)
为什么需要用css
HTML描述了要呈现的内容,而css则定义了这些内容的呈现形式,比如字体、颜色等。使用css能够将页面内容和呈现的形式有效分离,有利于分工合作,也有利于快速更换不同的呈现形式。
css样式:内联样式和内部样式,其中内联样式的优先级高于内部样式
使用样式表可以有三种方式:
1)内联样式
<pstyle="font-size: 24px;color: green">内联样式的演示</p>
将样式定义在style属性中。
内容好呈现形式高度耦合,维护困难,不利于分工合作。
只能应用于当前标签。
2)内部样式
<style> p{ font-size: 36px; color: red; } </style> </head> <body> <p style="font-size: 24px;color: green">内联样式的演示</p> <p>内部样式的演示1</p> <p>内部样式的演示2</p> </body>
在<head>标签中通过<style>标签来定义
内容表现形式的耦合程度降低了,但都还是在html文件中,没有实现完全分离。
定义的样式只能在本页面中使用
3)外部样式表
首先需要定义一个样式表文件(.css),
/*定义了应用于段落的样式: 字体大小:36px 颜色:红色*/ p{ font-size: 36px; color: blue; }
css中也可以使用注释,形式为/*……*/
然后再需要使用这些样式的html文件中引入该样式表文件
<head>
<meta charset="UTF-8">
<title>外部样式表</title>
<link rel="stylesheet"type="text/css" href="css/E2-01-02.css">
</head>
外部样式表使得内容和表现形式彻底分离,有利于分工合作及维护,可在多个html中引用。
推荐尽量使用外部样式。
但后面的案例为了方便,还是会大量使用内部样式甚至内联样式
1.2颜色
所欲颜色都可以由红(red)、绿(green)、蓝(blue)三种颜色调配而成,这三种颜色俗称三原色。
css中用8位表示一个颜色,那么可以表示28种颜色,即256钟颜色,所以总共可以表示256*256*256种颜色
css中有多种颜色表示形式:
1) 十六进制形式:
<p style="color: #880000">十六进制颜色</p>
2) RGB颜色
<p style="color: RGB(255,0,0);">RGB颜色表示形式</p>
3) RGBA颜色
在RGB颜色基础上增加了透明度分量(Alpha),该分量的取值范围为0(完全透明)到1.0(完全不透明)
<p style="color: RGBA(255,0,0,0.5);">RGBA颜色表示形式</p>
4) HSL颜色
颜色可以由另外三个分量来表示,即色调、饱和度和明度。
<p style="color: HSL(120,50%,50%);">HSL颜色表示形式</p>
5) HSLA颜色
在HSl的基础上增加了透明度分量。
<p style="color: HSLA(120,50%,50%,0.4);">HSL颜色表示形式</p>
6) 预定义颜色
css提供了一些常用的预定义颜色
<p style="color: red">预定义颜色表示形式</p>
1.3尺寸单位
cm:厘米
mm:毫米
in(英寸:inch):
px:像素(pixel)
%:百分比
em、vw、vh(自学)
1em=元素中文本的1个垂直高度
根据上面的规则:如果元素中文本的大小为16px,那么1em=16px;如果元素中文本大小为20px,那么1em=20px……
vh:vh就是当前屏幕可见高度的1%,也就是说
height:100vh == height:100%;
但是有个好处是当元素没有内容时候,设置height:100%该元素不会被撑开,
但是设置height:100vh,该元素会被撑开屏幕高度一致。
vw:vw就是当前屏幕宽度的1%
补充一句,当设置width:100%,被设置元素的宽度是按照父元素的宽度来设置,
但是100vw是相对于屏幕可见宽度来设置的,所以会出现50vw 比50%大的情况
px:绝对单位,%:相对单位。
绝对单位:cm、mm、in、px
相对单位:%,em,vw,vh
哪些是绝对单位,哪些是相对单位,
2.基础属性
属性名:属性值
background-color:red
p{
background-color:red;
font-size:24px;
}
2.1字体相关属性
font-family:字体名称
font-size:字体大小
font-style:字体格式
font-variant:字体变化(大写字母)
font-weight:字体粗细
……
可以简写:书写顺序
font-style font-variant font-weight font-size font-family
p{
/*font-family: 楷体;*/
/*font-size: 36px;*/
/*font-style: italic;*/
/*font-variant: small-caps;*/
/*font-weight: 100;*/
font: 60px 楷体;
}
前面三个可以不写,默认设置,后边两个必须指定值
这种书写方式更加简洁
2.2文本相关属性
文本相关属性主要包括颜色、对齐方式、修饰效果等。
color:设置文本的颜色
text-decoration:
none:默认值,没有任何效果
underline:下划线
overline:文字上划线
line-through:文字删除线
text-shadow:增加阴影
text-shadow: -6px -5px red;
该代码的含义是定义一个红色的背影,其水平方向上左移6px
,垂直方向上上移5px。
direction:
ltr:自左至右;rtl:自右至左
text-align:文本对齐方式
left:左对齐
right:右对齐
center:居中对齐
justify:两端对齐
vertical-align:文本垂直对齐方式
top:靠上对齐
bottom:靠下对齐
middle:垂直居中对齐
text-indent:文本缩进
letter-spacing:字符之间的间距
word-spacing:字(单词)间距
line-height:设置行高,实际上是调整行间距
总结:第四天结束了对html基础的学习,主要学习了table网页的布局,table用于布局时,优点:页面工整,干净整洁,传统的方块布局,页面各种功能简洁明了;缺点:样式旧,每个table中的标签都很多,并且不利于维护,页面样式没有新意。在使用table布局时,要先将一个大的页面按照表格的形式分为各个小表格,在通过嵌套、合并表格(rowspan、colspan)等方式来达到预期效果。一些政府、机关等老一代网站大部分都是table布局。
在新一天的学习中初步认识了css,在对字体、文本的属性学习中发现css中的样式和word、Excel中对字体、文本等设置异曲同工。比如对齐方式:左对齐、右对齐、居中对齐等,字体的大小、形状、颜色等等。都可以在css中实现。css中的样式有三种表现形式:内联样式、内部样式、外部样式。其中内联样式只作用于当前标签,内部样式只作用于当前页面,而外部样式,需要建立.css文件,并且在该文件中设置好各个标签的样式,然后在页面设置时引用该文件中的设计样式。对颜色有了更加深刻的认识,比如三原色在电脑中组成的颜色有256*256*256种。css可以通过三原色、饱和度、亮度、色调来设计颜色,从而运用。css中的尺寸单位,分为绝对单位:cm、mm、in、px;相对单位:em,vh,vw