您的位置:首页 > Web前端 > CSS

Html与CSS快速入门01-基础概念

2016-06-20 14:18 1081 查看
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间。最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下。内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握。

快速入门系列--HTML-01简介

快速入门系列--HTML-02基础元素

快速入门系列--HTML-03高级元素和布局

快速入门系列--HTML-04进阶概念

first02.css
body{
font-size: 10pt;
font-family: Verdana, Geneva, Arial, Helvetica,sans-serif;
color:black;
line-height: 14pt;
padding-left: 5pt;
padding-right: 5pt;
padding-top: 5pt;
}

h1{
font:14pt Verdana, Geneva, Arial, Helvetica,sans-serif;
font-weight: bold;
line-height: 20pt;
}

p.subheader{
font-weight: bold;
color: #593d87;
}

img{
padding:3pt;
float:right;
}

a{
text-decoration:none;
}

a:link, a:visited{
color:#8094d6;
}

a:hover,a:active{
color: #FF9933;
}

footer{
font-size: 9pt;
font-style: italic;
line-height: 12pt;
text-align: center;
padding-top: 30pt;
}

first01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About Xionger</title>
<link rel="stylesheet" type="text/css" href="first02.css">
</head>
<body>
<section>
<header>
<h1>About Xionger</h1>
</header>
<p>
<img src="python.jpg" alt="Xionger logo" /> 伐木工光头强在森林中伐木赚钱。为了保卫丛林,熊兄弟一起反抗,无数次打败了光头强。上演了搞笑的丛林保卫战。 后来光头强变成猎人,由于对外面世界的好奇,熊大和熊二翻山越岭,走出丛林,来到城镇动物马戏团,光头强仍不屈不挠地与他们作对。后来又因臭豆腐阴差阳错返回丛林。由于怜悯光头强,经历一次次困难后,送光头强回家过年。 熊二[1] 是比较懒惰,贪吃的狗熊,但不失可爱。他很懒,比较笨,一般是熊大想出来的决策,虽然他的体型很胖胜于熊大,但力气超大,熊大无法抵挡。他还非常善良,心很软,也会为光头强感到可怜(在熊出没之过年中,正是他带头帮助了光头强,如果不是他,那等到猴年马月光头强都回不了家了)。
</p>
<p class="subheader">Xionger History</p>
<p>熊二一般情况下呆呆傻傻,憨态可掬,但是非常善良,特别是那婉转的腔调。他非常可爱,力大无穷,但是太过肥胖,每当去光头强家被光头强发现后,熊大和蹦蹦都会很轻松地从窗户逃出,而熊二的屁股肯定都会卡在那里。 熊二是一头憨厚可爱、力大无穷、有勇无谋的雄性狗熊,但又十分鲁莽,有时熊大不在,小动物们落难,熊二都会挺身而出,运用力量打败光头强。熊二喜欢母熊翠花,常常为了讨好翠花与熊大大打出手;在讨好翠花这一方面,熊二略逊于熊大。熊二老实又听话,但是笨笨的,也非常可爱,贪吃。可是由于熊二有时太过鲁莽,或者熊二做出些蠢事,总被他那聪明的老哥熊大责备甚至教训,熊二对此也只能老实地听着挨着。动物们几乎都是依靠熊大的计谋、熊二的力量才打败光头强的。而且在光头强家中搞恶作剧,偷吃光头强的水果,捣毁光头强的家。防止光头强砍树,捍卫了东北丛林。
</p>
<p><a href="http://www.baidu.com" />[continue reading]</p>
</section>
<footer>
Copyright ©2016-2016(www.xionger.com). All rights reserved.Use with permission.
</footer>
</body>
</html>


View Code
基本布局属性(display属性)

标签元素诠释
block在新行上显示元素,比如在一个新段落中
list-item在新行上显示元素,并在其旁边带有一个列表项标记
inline利用当前段落内联显示元素
none不显示元素,它是隐藏的
Diplay属性依赖于相对定位(relative positioning)的概念,它以为着元素将相对于页面上的其他元素进行定位,之后还会介绍绝对定位(absolute positioning)的概念。

Tip:常见的表示长度和宽度的单位有:in,英寸;cm厘米,mm毫米,%百分比,px像素,pt磅。

基本格式化属性

属性诠释
border边框的各边
border-Width边框边缘的宽度
border-color边框边缘颜色
border-style边框边缘样式:solid单线边框,double双线边框,dashed短划虚线边框,dotted点线边框,groove具有沟槽外观的边框,none无边框,hidden等价无边框
border-left/right/top/bottom边框左、右、上、下
background-color元素的内部区域颜色
text-align内容对齐方式,包括左边、右边、中间,justify两端对齐
text-indent内容缩进方式
font-family字体系列,按顺序选择
font-size/weight字体大小和粗细(normal,lighter,bold,bolder)
font-style字体的样式,normal,italic
line-height行距,用于设置每个文本行的高度
padding给元素左边、右边、上边、下边添加填充
使用样式类和ID

使用样式类
p.subheader{
font-weight: bold;
color: #593d87;
}
使用样式ID
p#title{
font:24pt Verdana,Geneva, Arial
}
引用样式
<link rel="stylesheet" type="text/css" href="first03.css">


Tip:验证样式表,http://jigsaw.w3.org/css-validator/



经典的html5页面结构如下图所示



Tip:常见标签

audio音频内容; canvas画布功能; command命令按钮; datalist下拉列表; details元素详细内容; dialog对话框; keygen表单声称的键值; mark有标记的文本; output定义输出类型; progress任务的过程; source媒体资源; video视频内容

参考资料:

梅洛尼. HTML与CSS入门经典(第9版) [M]. 北京:人民邮电出版社, 2014.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: