CSS课程的学习已经告一段落了,正所谓‘师傅领进门,修行在个人’。在众多的资源中,选择了《HTML5程序开发范例宝典》作为自己进阶学习的资料。
用心分析每一个实例,动手执行。做好每一个范例的笔记,分享心得,希望能够找到也在学习的程序猿(媛)一起学习,互相指导。
实例一、统一站内网页的风格
知识点:CSS样式的字体属性、颜色属性、边框属性
1) 字体属性
字体属性包括字体的综合设置、字体名称、字体大小、字体风格、字体加粗,字体英文大小写转换等
2)颜色和背景属性
颜色属性是指定页面元素的颜色,背景属性用于指定页面的背景颜色或者背景图像的属性。
说明: 颜色是由 “red” “green” “blue " 三原色组合而成的,在 HTML 中对颜色 的定义是用十六进位的,对于三原色HTML 分别给予两个十六进位去定义,也 就是每个原色可有 256 种彩度,故此三原色可混合成 16777216 种颜色。
例如: 白色的组成是 red=ff, green=ff, blue= ff,RGB 值即为 ffffff
红色的组成是 red=ff, green= 00, blue= 00, RGB 值即为 ff0000
绿色的组成是red=00, green=ff, blue= 00, RGB 值即为 00ff00
蓝色的组成是red=00, green= 00, blue= ff, RGB 值即为 0000ff
黑色的组成是 red=00, green=00, blue=00, RGB 值即为 000000
应用时常在每个 RGB值之前加上“ # “ 符号,如:bgcolor=”#336699" 用英文名字表示颜色时直 接写名字。如 bgcolor=green
RGB 颜色可以有四种表达形式::
• #rrggbb ( 如 ,#00cc00)
• #rgb ( 如 ,#0c0)
•rgb(x,x,x) x 是一个介乎 0 到 255 之间的整数 ( 如 ,rgb(0,204,0))
• rgb(y%,y%,y%) y 是一个介乎 0.0 到 100.0 之间的整数 ( 如 , rgb(0%,80%,0%)
Windows VGA(视频图像阵列)形成了 16 各关键字: aqua,black, blue,fuchsia, gray,green,
lime,maroon,navy,olive, purple,red,silver,teal,white,and yellow 下
3)边框属性
边框属性用于设置一个元素边框的宽度、样式和颜色
代码实现效果:
备注:由于没有相关的图片素材,采用了<div>
块元素多照片的大小进行设置布局。
部分代码:
`/* 标签选择器 */
td{
font-size:9pt;color:#3c7796;
}
/* 类选择器 */
.btn_grey{
font-family: "宋体"; font-size: 9pt; color: #333333;
background-color: #eeeeee;cursor: hand;padding: 1px;height: 19px;
border-top:1px solid #FFFFFF;border-right: 1px solid #666666;
border-bottom: 1px solid #666666;border-left:1px solid #FFFFFF;
}
源代码:由于GitHub使用不太熟练,后续贴上