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、tbodyHTML5支持松散的语法极大地兼容了编程人员的不规范代码，同时保证页面效果不会改变。HTML5是向下兼容的。

新增的结构标记

HTML5最大的变化就是有了予以，以前的&<p&>、&<sapn&>仅仅表示盒子，没有具体的语义。

&<header&> 头标签

&<nav&> 导航

&<aside&> 侧边栏

&<article&> 文章标签

&<footer&> 脚标签

&<section&> 章节

如果浏览器不识别这些标签，全部当成p标签。

新增的三个属性

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&>123456

datalist数据列表

给为输入框input=&”text&”提供下拉列表选项。

datalist参考代码如下：

&<datalist id="列表ID"&>&<option&>选项1&</option&>&</datalist&>123

注意：将input 中设置 list取值为列表ID

插入音频、视频播放

音频播放

标签：&<audio&>&</audio&>

属性 ：

音频地址src 路径取值设置显示控制面板controls设置自动播放autoplay=&”autoplay&”如果不支持此音频格式，则将显示标签内容；在同一个设置多个音频满足如果不支持第一个音频则播放下一个，可以将在audio标签内容中增加source标签（其中src属性表明音频地址），一个音频设置一个source。

视频播放

标签：&<video&>&</video&>

属性 ：

视频地址src 路径取值设置显示控制面板controls设置自动播放autoplay=&”autoplay&”如果不支持此视频格式，则将显示标签内容；在同一个设置多个视频满足如果不支持第一个视频则播放下一个，可以将在video标签内容中增加source标签（其中src属性表明视频地址），一个视频设置一个source。

HTML5样式新增

在后面的笔记中整理出。