02-24 04:21 阅读 240

关注

html好看的字体样式代码（css字体样式代码大全）

• 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）

基本格式

标记：

• 样式一般写在标记之间

基本格式如下：

选择器{属性:值;}

• 一个选择器中可以有多个属性，每个属性都有对应的值，属性和值之间用:隔开，属性和属性之间用分号隔开。

CSS分类

按选择器分类

类选择器（class）

语法规则：

1. 必须以.开头
2. 通过class属性来调用
3. 类样式可以被多次调用

ID选择器

语法规则：

1. 必须以#开头
2. 通过元素的id属性来调用
3. 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属性直接写的样式。

外部样式

外部样式：写一个CSS文件，在需要使用CSS的页面中链接或导入的方法来引用外部CSS。

• 可以将页面公用的CSS写道外部CSS中。

引用方法：链接和导入。

链接外部样式

语法：

• rel表示链接的脸型，这个属性不能省略，rel=”stylesheet”表示链接的类型是样式表。
• type=”style/css”表示这个文件是css文本。

导入外部样式

语法：@import tul(‘CSS的地址’);

使用：如下

链接样式和导入样式的区别

链接样式只能在HTML页面中引入外部样式；

导入样式既可以在HTML中导入外部样式也可以在样式文件中导入外部样式。

• 在HTML中导入CSS样式的两种方法：如下

• 在CSS页面中引入外部样式：如下

多个样式的应用

样式的优先级

1. ID样式 > class样式 > 标记样式
2. 行内样式 > 内嵌样式 > 外部样式

强制优先级

书写：!important

• 注意：尽量避免使用。

样式的继承

子元素覆盖和继承父元素的样式。

如果父元素有，子元素没有，子元素继承父亲的样式；

如果父元素有，子元素也有，子元素覆盖父元素的样式。

权重叠加

标签样式 < 类样式 < id样式 < 行内样式 < important

1 < 10 < 100 < 1000 < 10000

根据权重的叠加，选择权重最大的样式进行显示。

例子：多个类样式的应用

以程序执行先后为优先级，后执行的将前面的覆盖。

注释

HTML注释

语法：

CSS注释

语法：/*CSS注释*/

HTML5 介绍

概念

1. 官方概念： HTML5草案的前身名为Web Application1.0，是作为下一代互联网标准，用于取代HTML4与XHTML1的新一代标准版本，所以叫HTML5。它增加了网页的标准、语义化与web表现性能，同时还增加了本地数据库等web应用的功能。
2. 广义概念：HTML5代表浏览器端技术的一个发展阶段，在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5、CSS3、Javascript、API在内的一套技术组合。

HTML5发展时间表

目前支持HTML5的浏览器

HTML5的特点

1. 更简单
2. 标签语义化
3. 语法更轻松
4. 多设备跨平台
5. 自适应网页

HTML5的变化

HTML5声明变化

HTML5的文档声明：

HTML5的字符集声明：

• 简化了字符集的声明

标准的改变：语法松散

1. 不允许写结束符的标签
2. area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
3. 可以省略结束符的标签
4. li、dt、dd、p、rpoptgroup、option、colgroup、thread、tbody、tfoot、tr、td、th
5. 可以完全省略的标签
6. html、head、body、colgroup、tbody

• HTML5支持松散的语法极大地兼容了编程人员的不规范代码，同时保证页面效果不会改变。
• HTML5是向下兼容的。

新增的结构标记

HTML5最大的变化就是有了予以，以前的