您的位置: 首页  >  文章  >  html及CSS 扩展学习

html及CSS 扩展学习

分类: 文章 • 2024-10-08 08:25:28

第十六章 框架

  • frameset框架：
    • <frameset> —- 用来定义一个框架；双标签
      不能和 <body> 一起使用

  • rows、cols属性

    • rows 定义行表示框架有多少行（取值 px/%/ * ）
    • cols 定义列表示框架有多少列（取值px/ %/ * ）

  • frame子框架

    • <frame> —- 表示框架中的某一个部分；单标签，要跟结束标志

      • src 显示的网页的路径
      • name 框架名
      • frameborder 边框线（取值 0 / 1）

    • <noframes>属性

    • <noframes> 提供不支持框架的浏览器显示body的内容；双标签

1
2
3
4
5
6
7
8
 
<frameset>
     <frame  src=“”  />
     <frame  src=“” />
     <frame  src=“” />
     <noframes>
      <body>内容</body>
     </noframes>
</frameset>
  • <iframe>内联框架
    • iframe元素会创建包含另外一个文档的内联框架（即行内框架）
    • 允许和 body 一起使用
    • width 宽（取值 px / %）
    • height 高（取值 px / %）
    • name 框架名
    • frameborder 边框线（取值 0 / 1）
    • src 显示的网页的路径

第十七章 css高级属性

  • opacity透明属性
    • opacity
      • 对于IE6/7/，使用filter:alpha(opacity:值;) 值为0-100
      • 对于Webkit，Opera，Firefox，IE9+，使用opacity:值; 值为0-1
      • 对于早期火狐，使用-moz-opacity:值; 值为0-1
      • 所以写透明属性时，一般写法是
1
2
3
4
5
 
 {	
    opacity:0.5;
   filter:alpha(opacity：50);/*0-100*/
   -moz-opacity:0.5;	/*取值0-1*/-->针对早起版本的火狐兼容问题的解决
}

  • border-radius圆角边框属性

    • 向 div 元素添加圆角边框
      • border-radius:10px;

  • box-shadow阴影属性

    • box-shadow属性向框添加阴影效果,后面跟4个参数。

    • box-shadow:0px 0px 10px #000;

  • <embed>属性

    • 是HTML5中新增的标签,媒体嵌入插件标签，可以通过<embed>插入音频或视频

    • <embed src=“media/music.mp3” />

    • 格式.mid .wav .mp3等

  • CSS部分导图总结

html及CSS 扩展学习


html及CSS 扩展学习

  • css常见简写

html及CSS 扩展学习

第三部分 附录

附录一 DIV命名规范

  • 企业DIV使用频率高的命名方法

  • 网页内容类

    • 标题: title

      • 摘要: summary
      • 箭头： arrow
      • 商标： label
      • 网站标志： logo
      • 转角/圆角：corner
      • 横幅广告： banner
      • 子菜单： subMenu
      • 搜索： search
      • 搜索框： searchBox
      • 登录： login
      • 登录条：loginbar
      • 工具条： toolbar
      • 下拉： drop
      • 标签页： tab
      • 当前的： current
      • 列表： list
      • 滚动： scroll
      • 服务： service
      • 提示信息： msg
      • 热点：hot
      • 新闻： news
      • 小技巧： tips
      • 下载： download
      • 栏目标题： title
      • 热点： hot
      • 加入：joinus
      • 注册： regsiter
      • 指南： guide
      • 友情链接： friendlink
      • 状态： status
      • 版权： copyright
      • 按钮： btn
      • 合作伙伴： partner
      • 投票： vote
      • 左右中：left right center
    • 注释的写法: /* Footer */ 内容区/* End Footer */

  • id的命名:

    • 页面结构

      • 容器: container
      • 页头：header
      • 内容：content/container
      • 页面主体：main
      • 页尾：footer
      • 导航：nav
      • 侧栏：sidebar
      • 栏目：column
      • 页面外围控制整体布局宽度：wrapper
      • 左右中：left right center

    • 导航

      • 导航：nav
      • 主导航：mainbav
      • 子导航：subnav
      • 顶导航：topnav
      • 边导航：sidebar
      • 左导航：leftsidebar
      • 右导航：rightsidebar
      • 菜单：menu
      • 子菜单：submenu
      • 标题: title
      • 摘要: summary

    • 功能

      • 标志：logo
      • 广告：banner
      • 登陆：login
      • 登录条：loginbar
      • 注册：regsiter
      • 搜索：search
      • 功能区：shop
      • 标题：title
      • 加入：joinus
      • 状态：status
      • 按钮：btn
      • 滚动：scroll
      • 标签页：tab
      • 文章列表：list
      • 提示信息：msg
      • 当前的:current
      • 小技巧：tips
      • 图标: icon
      • 注释：note
      • 指南：guild
      • 服务：service
      • 热点：hot
      • 新闻：news
      • 下载：download
      • 投票：vote
      • 合作伙伴：partner
      • 友情链接：link
      • 版权：copyright

    • class的命名:

      • 颜色:使用颜色的名称或者16进制代码,如

        • .red { color: red; }
        • .f60 { color: #f60; }
        • .ff8600 { color: #ff8600; }

      • 字体大小,直接使用”font+字体大小”作为名称,如

        • .font12px { font-size: 12px; }
        • .font9px {font-size: 9pt; }

      • 对齐样式,使用对齐目标的英文名称,如

        • .left { float:left; }
        • .bottom { float:bottom; }

      • 标题栏样式,使用”类别+功能”的方式命名,如

        • .barnews { }
        • .barproduct { }

      • 注意事项::

        • 一律小写;
        • 尽量用英文;
        • 不加中杠和下划线;
        • 尽量不缩写，除非一看就明白的单词.

  • 推荐的 CSS 书写顺序：

    • 显示属性

      • display
      • list-style
      • position
      • float
      • clear

    • 自身属性

      • width
      • height
      • margin
      • padding
      • border
      • background

    • 文本属性

      • color
      • font
      • text-decoration
      • text-align
      • vertical-align
      • white-space
      • other text
      • content

附录二 CSS精灵

  • CSS精灵原理以及应用
    • CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。
      • 该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。
  • 一个简单的例子：
    • 一张图片作出一个按钮的三个状态
    • 一个链接用CSS做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，a:link，a:hover，a:active <a class="button" href="#">链接</a>
    • 加入右侧的图片为：200px 65px的三个按钮图拼合而成的图片button.png，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
a {
    display:block; 
    width:200px; 
    height:65px; 
    line-height:65px; /*定义状态*/
    text-indent:-2015px; /*隐藏文字*/
    background-image:url(button.png); /*定义背景图片*/
    background-position:0 0;
    /*定义链接的普通状态，此时图像显示的是顶上的部分*/
}
a:hover {
    background-position:0 -66px;
    /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/
}
a:active {
    background-position:0 -132px;                      
    /*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/
}
  • 更多的CSS雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值
    • 如：background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位
  • 优点：
    • 减少加载网页图片时对服务器的请求次数
    • 可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
    • 提高页面的加载速度
    • sprite技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNGsprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
    • 减少鼠标滑过的一些bug
    • IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。
  • 不足：
    • CSS雪碧的最大问题是内存使用
    • 影响浏览器的缩放功能
    • 拼图维护比较麻烦
    • 使CSS的编写变得困难
    • CSS 雪碧调用的图片不能被打印
    • 错误得使用 Sprites 影响可访问性

附录三 一些tips解决方案

页面优化实践

  • 从下面的几个方面可以进行页面的优化：

    • 减少请求数
    • 图片合并
    • CSS文件合并
    • 减少内联样式
    • 避免在 CSS中使用 import
    • 减少文件大小
    • 选择适合的图片格式
    • 图片压缩
    • CSS 值缩写（Shorthand Property)
    • 文件压缩
    • 页面性能
    • 调整文件加载顺序
    • 减少标签数量
    • 调整选择器长度
    • 尽量使用CSS 制作显示表现
    • 增强代码可读性与可维护性
    • 规范化
    • 语义化
    • 模块化
写DIV+CSS 的一些常识

  • 不要使用过小的图片做背景平铺

    • 这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200200=40, 000 次，占用资源

  • 无边框

    • 推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源

  • 慎用 通配符

    • 所谓通配符，就是将CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。

  • CSS的十六进制颜色代码缩写

    • 习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。

  • 样式放头上，脚本放脚下。不内嵌，只外链

  • 坚决不用 CSS表达式

  • 使用 引用样式表，而不是通过@import 导入。

  • 一般来说，PNG比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。

  • 千万不要在 HTML中缩放图片，一者不好看，二者占资源。

  • 正文字体最好用偶数

    • 12px、14px、16px，效果非常好。特例，15px。

  • block、ul、ol等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。

  • 段落之间，至少要有一倍行距

  • 强行指定某些元素的 line-height，正文 1.6倍于文字大小，标题1.3倍。

  • 中文标点用全角

    • 英文夹杂在中文中，左右空格，半角。

  • 中文字体的粗体和斜体，远离较好

常用代码片段
  • 雅虎工程师提供的CSS初始化示例代码【仅供参考】
    • 可以在html头文件中直接引用，从而避免浏览器的不兼容带来的错误。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td { 
    margin:0; padding:0; 
}
body {
    background:#fff; 
    color:#555; 
    font-size:14px; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
}
td,
th,
caption { 
    font-size:14px;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-weight:normal; 
    font-size:100%; 
}
address, 
caption,
cite, 
code, 
dfn, 
em, 
strong,
th, 
var { 
    font-style:normal; 
    font-weight:normal;
}
a { 
    color:#555; 
    text-decoration:none; 
}
a:hover { 
    text-decoration:underline; 
}
img {
    border:none;
}
ol,ul,li { 
    list-style:none; 
}
input, 
textarea, 
select, 
button { 
    font:14px Verdana,Helvetica,Arial,sans-serif; 
}
table { 
    border-collapse:collapse; 
}
html {
    overflow-y: scroll;
} 
.clearfix:after {
    content: "."; 
    display: block; 
    height:0; 
    clear:both; 
    visibility: hidden;
}
.clearfix { 
    *zoom:1; 
}
  • mobile meta标签
1
 
<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>
  • 表格不被撑开
1
 

table-layout: fixed; word-break: break-all;;border-collapse: collapse
  • 不设宽高居中
1
2
3
4
5
 
<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
      <span style=”background:#f00; display:table-cell; vertical-align:middle;”>

            <input type=”button” value=”item1″ />

      </span>

</div>
  • 透明度的兼容代码
1
2
3
4
 
filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/
  • 文字溢出点点省略
1
2
3
 

white-space:nowrap;

text-overflow:ellipsis;

overflow:hidden;

  • 清除浮动的几种方法

    • 方法一：投机取巧法 – 不推荐

      • 直接一个放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强

    • 方法二：overflow + zoom方法 –不推荐
      .fix{overflow:hidden; zoom:1;}

      • 此方法优点在于代码简洁，涵盖所有浏览器

    • 方法三：after + zoom方法 -推荐–此方法可以说是综合起来最好的方法了

      • clearfix只应用在包含浮动子元素的父级元素上
1
2
3
4
5
6
7
8
 

.fix{zoom:1;}

.fix:after{
     display:block; 
     content:'clear'; 
     clear:both;
     line-height:0; 
     visibility:hidden;
}
一些总结

  • 自动继承属性：

    • color
    • font
    • text-align
    • list-style
      …

  • 非继承属性：

    • background
    • border
    • position
      …

  • 具有破坏性的元素：

    • float
    • display:none;
    • position:absoblute/fixed/sticky;

  • 具有包裹性的元素：

    • display:inline-block/table-cell

    • position:absolute/fixed/sticky

    • overflow:hidden/scroll

  • 消除图片底部间隙的方法

    • 图片块状化-无基线对齐
      img{display:block;}

    • 图片底线对齐
      img{vertical-align:bottom;}

    • 行高足够小 - 基线位置上移
      .box{line-height:0;}

一些概念

  • BFC

    • BFC全称”Block Formatting Context” 中文为“块级格式化上下文”

    • 记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素

    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

    • 扩展阅读

  • 优雅降级(graceful degradation)
    • 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
  • 渐进增强 progressive enhancement：
    • 是在浏览器开启JavaScript功能后，如果浏览器版本不支持某些 JavaScript 能力，我们解决这种问题的方式
  • 平稳退化
    • 是在浏览器没有JavaScript功能，或没有开启JavaScript功能情况下，我们解决这种问题的方式；
方案荟萃扩展阅读

附录四 部分工具资源

附录五 编码规范

附录六 进阶学习

附录七 其他资源

附录八 常见问题

相关推荐