CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS定义
CSS定义是由三个部分构成:
基本格式
标记:<style type=”text/css”></style>
基本格式如下:
选择器{属性:值;}
按选择器分类
类选择器(class)
语法规则:
ID选择器
语法规则:
标记选择器
直接选择HTML标记。
关联选择器
用空格表示其后代;
用>表示其子级;
例子:
组合选择器
作用:多个样式使用相同的属性
使用:用,分隔
伪类选择器
伪类:类可以被多个元素访问,有一个状态,超链接a有4个状态。
:link:表示正常链接时候的状态。
:visited:表示已经点击过的状态。
:hover:表示当鼠标移上去时的状态。
:active:表示当鼠标点下去时的状态。
使用:伪类有四个状态,可以省略其中的某个状态;如果省略,就使用默认样式;如果要写这些状态,就必须按照l(link)v(visited)h(hover)a(active)的顺序。
按位置分类
内嵌样式
内嵌样式:在HTML页面中以<style>开头,</style>结束,这里面的样式只能供本页面使用。
行内样式
行内样式:通过元素的style属性直接写的样式。
外部样式
外部样式:写一个CSS文件,在需要使用CSS的页面中链接或导入的方法来引用外部CSS。
引用方法:链接和导入。
链接外部样式
语法:<link rel=”stylesheet” type=”text/css” href=”CSS的地址”>
导入外部样式
语法:@import tul(‘CSS的地址’);
使用:如下
链接样式和导入样式的区别
链接样式只能在HTML页面中引入外部样式;
导入样式既可以在HTML中导入外部样式也可以在样式文件中导入外部样式。
样式的优先级
强制优先级
书写:!important
样式的继承
子元素覆盖和继承父元素的样式。
如果父元素有,子元素没有,子元素继承父亲的样式;
如果父元素有,子元素也有,子元素覆盖父元素的样式。
权重叠加
标签样式 < 类样式 < id样式 < 行内样式 < important
1 < 10 < 100 < 1000 < 10000
根据权重的叠加,选择权重最大的样式进行显示。
例子:多个类样式的应用
以程序执行先后为优先级,后执行的将前面的覆盖。
HTML注释
语法: <!–HTML注释–>
CSS注释
语法:/*CSS注释*/
概念
HTML5发展时间表
目前支持HTML5的浏览器
HTML5的特点
HTML5声明变化
HTML5的文档声明:<!document html>
HTML5的字符集声明:<meta charset=”utf-8″>
标准的改变:语法松散
新增的结构标记
HTML5最大的变化就是有了予以,以前的<p>、<sapn>仅仅表示盒子,没有具体的语义。
<header> 头标签
<nav> 导航
<aside> 侧边栏
<article> 文章标签
<footer> 脚标签
<section> 章节
新增的三个属性
例子如下:
新增的表单元素
HTML5的表单元素可以不放在表单域中,可以通过id关联起来,即给form定义id值,将表单元素的属性form=”对应表单的id”
例子如下:
新增的input元素
即 input 的type取值。
select标签
在选择靠前项后,还需选择下一项。
参考代码如下:
<select><optgroup lable="靠前个选项的内容1"><option>第二个选项的内容1</option><option>第二个选项的内容2</option></optgroup></select>123456
datalist数据列表
给为输入框input=”text”提供下拉列表选项。
datalist参考代码如下:
<datalist ><option>选项1</option></datalist>123
注意:将input 中设置 list取值为列表ID
插入音频、视频播放
音频播放
标签:<audio></audio>
属性 :
视频播放
标签:<video></video>
属性 :
在后面的笔记中整理出。
来源:互联网 / 发布时间:2025-11-17 22:13:20