CSS入门 学习笔记4
CSS Sprites技术
CSS Sprites技术利用背景的定位来实现,将很多小图拼接成一张大图,然后通过css定位来实现不通的盒子来使用不同的背景。
优点:利用CSS Sprites技术能很好地减少网页的http请求从而大大提高页面的性能。
综合笔记
- 注意:拿到效果图的时候,先看效果图的尺寸,将效果图的尺寸调整到主流浏览器再做切片。
- 小技巧:为了切片准确,可以跳出标尺,通过保持拉出辅助线,FW中,显示/隐藏标尺快捷键是ctrl+alt+R
- 将整个网站公用的css样式卸载外部样式中。
- 在页面中,写当前页面样式。
- li中的图片默认是基线对齐,所以图片下面会出现空隙。
解决:在li样式中设置样式底对齐vertical-aligh:bottom;
,去掉空隙。
HTML5 介绍
概念
- 官方概念: HTML5草案的前身名为Web Application1.0,是作为下一代互联网标准,用于取代HTML4与XHTML1的新一代标准版本,所以叫HTML5。它增加了网页的标准、语义化与web表现性能,同时还增加了本地数据库等web应用的功能。
- 广义概念:HTML5代表浏览器端技术的一个发展阶段,在这个阶段,浏览器呈现技术得到了一个飞跃发展和广泛支持,它包括:HTML5、CSS3、Javascript、API在内的一套技术组合。
HTML5发展时间表
目前支持HTML5的浏览器
HTML5的特点
- 更简单
- 标签语义化
- 语法更轻松
- 多设备跨平台
- 自适应网页
HTML5的变化
HTML5声明变化
HTML5的文档声明:<!document html>
HTML5的字符集声明:<meta charset="utf-8">
- 简化了字符集的声明
标准的改变:语法松散
- 不允许写结束符的标签
area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr - 可以省略结束符的标签
li、dt、dd、p、rpoptgroup、option、colgroup、thread、tbody、tfoot、tr、td、th - 可以完全省略的标签
html、head、body、colgroup、tbody
- HTML5支持松散的语法极大地兼容了编程人员的不规范代码,同时保证页面效果不会改变。
- HTML5是向下兼容的。
新增的结构标记
HTML5最大的变化就是有了予以,以前的<div>
、<sapn>
仅仅表示盒子,没有具体的语义。
<header>
头标签
<nav>
导航
<aside>
侧边栏
<article>
文章标签
<footer>
脚标签
<section>
章节
- 如果浏览器不识别这些标签,全部当成div标签。
新增的三个属性
required
必填字段autofocus
自动获得焦点placeholder="
默认显示内容"
例子如下:
新增的表单元素
HTML5的表单元素可以不放在表单域中,可以通过id关联起来,即给form定义id值,将表单元素的属性form="
对应表单的id"
例子如下:
新增的input元素
即 input 的type
取值。
email
输入框-邮件url
输入框-网址number
输入框-仅数字range
可拖动进度条-表示范围
属性有min
最小值、max
最大值、value
默认取值属性有min
最小值、max
最大值、value
默认取值color
颜色选择框date
日期选择框-年月日month
日期选择框-年月week
日期选择框-年周time
时间选择框datetime-local
年月日时间选择框
select标签
在选择第一项后,还需选择下一项。
参考代码如下:
<select>
<optgroup lable="第一个选项的内容1">
<option>第二个选项的内容1</option>
<option>第二个选项的内容2</option>
</optgroup>
</select>
datalist数据列表
给为输入框input="text"
提供下拉列表选项。
datalist参考代码如下:
<datalist id="列表ID">
<option>选项1</option>
</datalist>
注意:将input 中设置 list
取值为列表ID
插入音频、视频播放
音频播放
标签:<audio></audio>
属性 :
- 音频地址
src
路径取值 - 设置显示控制面板
controls
- 设置自动播放
autoplay="autoplay"
- 如果不支持此音频格式,则将显示标签内容;
- 在同一个设置多个音频满足如果不支持第一个音频则播放下一个,可以将在audio标签内容中增加
source
标签(其中src
属性表明音频地址),一个音频设置一个source。
视频播放
标签:<video></video>
属性 :
- 视频地址
src
路径取值 - 设置显示控制面板
controls
- 设置自动播放
autoplay="autoplay"
- 如果不支持此视频格式,则将显示标签内容;
- 在同一个设置多个视频满足如果不支持第一个视频则播放下一个,可以将在video标签内容中增加
source
标签(其中src
属性表明视频地址),一个视频设置一个source。
HTML5新增样式
伪对象选择器
:before
在盒子的前面插入(内部的前面)
:after
在盒子的后面插入(内部的后面)
content
用于插入内容(如果没有内容,content也必须要写content:'';
即为空)
- 具体使用如下:
设置内容垂直对齐
用display实现内容垂直对齐。
具体使用如下:
css例子
实现鼠标移上时给表格增加边框。
方法:
- 伪对象
:hover
和:before
搭配使用 content:'';
设置默认为空display
属性规定元素应该生成的框的类型为块级元素block
- 设置
width
和height
均为100%
的同时,box-asizing
取值为border-box
保证产生的边框是原盒子的大小 border
设置边框
颜色百分比rgba(
红色值,
绿色值,
蓝色值,
透明度百分比 其最大值为1即不透明)
solid
实线
以及它的宽度;
参考代码如下: