- CSS简介
- CSS基本语法
- CSS定义
- 基本格式
- CSS分类
- 按选择器分类
- 类选择器（class）
- ID选择器
- 标记选择器
- 关联选择器
- 组合选择器
- 伪类选择器
- 按位置分类
- 内嵌样式
- 行内样式
- 外部样式
- 链接外部样式
- 导入外部样式
- 链接样式和导入样式的==区别==
- 多个样式的应用
- 样式的优先级
- 强制优先级
- 样式的继承
- 权重叠加
- 例子：多个类样式的应用
- 注释
- HTML注释
- CSS注释
- HTML5 介绍
- 概念
- HTML5发展时间表
- 目前支持HTML5的浏览器
- HTML5的特点
- HTML5的变化
- HTML5声明变化
- 标准的改变：语法松散
- 新增的结构标记
- 新增的三个属性
- 新增的表单元素
- 新增的input元素
- select标签
- datalist数据列表
- 插入音频、视频播放
- 音频播放
- 视频播放
- HTML5样式新增
CSS简介
CSS是Cascading Style Sheet（层叠样式表）的缩写。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
- 将网站分成两个部分：表现和内容，表现由CSS来控制，内容由PHP从数据库中读取。
CSS基本语法
CSS定义
CSS定义是由三个部分构成：
- 选择器
- 属性
- 属性的取值（value）
基本格式
标记：<style type=”text/css”></style>
- 样式一般写在<head>标记之间
基本格式如下：
选择器{属性:值;}
- 一个选择器中可以有多个属性，每个属性都有对应的值，属性和值之间用:隔开，属性和属性之间用分号隔开。
CSS分类
按选择器分类
类选择器（class）
语法规则：
- 必须以.开头
- 通过class属性来调用
- 类样式可以被多次调用
ID选择器
语法规则：
- 必须以#开头
- 通过元素的id属性来调用
- ID样式只能被调用一次
标记选择器
直接选择HTML标记。
- 后面跟多个字体，默认使用第一个字体，例如font-family:”黑体”,”隶书”,”微软雅黑”;默认使用黑体；
- 如果第一个没有，就是用第二个…以此类推；
- 如果样式中的字体客户端一个都没有，就用客户端的默认字体，中文操作系统默认是宋体。
关联选择器
用空格表示其后代；
用>表示其子级；
例子：
- 表示p下面的所有b，b只要是p的后代即可；
- 表示p>b中b必须是p的子级；
- 注意有无空格的区别；
- 无空格：同时具备该条件
组合选择器
作用：多个样式使用相同的属性
使用：用,分隔
伪类选择器
伪类：类可以被多个元素访问，有一个状态，超链接a有4个状态。
:link：表示正常链接时候的状态。
:visited：表示已经点击过的状态。
:hover：表示当鼠标移上去时的状态。
:active：表示当鼠标点下去时的状态。
使用：伪类有四个状态，可以省略其中的某个状态；如果省略，就使用默认样式；如果要写这些状态，就必须按照l(link)v(visited)h(hover)a(active)的顺序。
- 如果在一个页面上，一部分超链接是一种样式，礼仪部分超链接是另一种样式，可以使用伪类和类的组合（给超链接a设置class选择器）。
- 例子：
按位置分类
内嵌样式
内嵌样式：在HTML页面中以<style>开头，</style>结束，这里面的样式只能供本页面使用。
行内样式
行内样式：通过元素的style属性直接写的样式。
外部样式
外部样式：写一个CSS文件，在需要使用CSS的页面中链接或导入的方法来引用外部CSS。
- 可以将页面公用的CSS写道外部CSS中。
引用方法：链接和导入。
链接外部样式
语法：<link rel=”stylesheet” type=”text/css” href=”CSS的地址”>
- rel表示链接的脸型，这个属性不能省略，rel=”stylesheet”表示链接的类型是样式表。
- type=”style/css”表示这个文件是css文本。
导入外部样式
语法：@import tul(‘CSS的地址’);
使用：如下
链接样式和导入样式的区别
链接样式只能在HTML页面中引入外部样式；
导入样式既可以在HTML中导入外部样式也可以在样式文件中导入外部样式。
- 在HTML中导入CSS样式的两种方法：如下
- 在CSS页面中引入外部样式：如下
多个样式的应用
样式的优先级
- ID样式 > class样式 > 标记样式
- 行内样式 > 内嵌样式 > 外部样式
强制优先级
书写：!important
- 注意：尽量避免使用。
样式的继承
子元素覆盖和继承父元素的样式。
如果父元素有，子元素没有，子元素继承父亲的样式；
如果父元素有，子元素也有，子元素覆盖父元素的样式。
权重叠加
标签样式 < 类样式 < id样式 < 行内样式 < important
1 < 10 < 100 < 1000 < 10000
根据权重的叠加，选择权重最大的样式进行显示。
例子：多个类样式的应用
以程序执行先后为优先级，后执行的将前面的覆盖。
注释
HTML注释
语法： <!–HTML注释–>
CSS注释
语法：/*CSS注释*/
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>
1
2
3
4
5
6
datalist数据列表
给为输入框input=”text”提供下拉列表选项。
datalist参考代码如下：
<datalist id=\”列表ID\”>
<option>选项1</option>
</datalist>
1
2
3
注意：将input 中设置 list取值为列表ID
插入音频、视频播放
音频播放
标签：<audio></audio>
属性 ：
- 音频地址src 路径取值
- 设置显示控制面板controls
- 设置自动播放autoplay=”autoplay”
- 如果不支持此音频格式，则将显示标签内容；
- 在同一个设置多个音频满足如果不支持第一个音频则播放下一个，可以将在audio标签内容中增加source标签（其中src属性表明音频地址），一个音频设置一个source。
视频播放
标签：<video></video>
属性 ：
- 视频地址src 路径取值
- 设置显示控制面板controls
- 设置自动播放autoplay=”autoplay”
- 如果不支持此视频格式，则将显示标签内容；
- 在同一个设置多个视频满足如果不支持第一个视频则播放下一个，可以将在video标签内容中增加source标签（其中src属性表明视频地址），一个视频设置一个source。
HTML5样式新增
在后面的笔记中整理出。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 55@qq.com 举报，一经查实，本站将立刻删除。转转请注明出处：https://www.szhjjp.com/n/31211.html