选择器的权重

基本选择器的权重

id选择器 > 类名选择器 > 标签选择器>继承(最低)

复合选择器的权重

使用的简单选择器之和

2.CSS存放位置(引入方式)

内嵌式:style标签中

外链式:样式存入外部css文件

单独将css内容写入css文件中--只写选择器和样式内容

通过link标签引入css文件--href="css文件路径"

行内式:写在目标标签的style属性中--style="样式内容"

三种引入方式的选择

内嵌式 -- 结构和样式(HTML和CSS)混在同一文件

不需要加载外部css文件,加载速度快--电商首页

外链式 -- 代码分离--结构和样式分离--管理修改方法

除了电商网站的首页的其他情况

行内式 -- 一定不要用

引入方式的权重问题

内嵌式 = 外链式

行内式最高

3.盒子模型

组成: 内容--内边距--边框--外边距

边框(内容的边框)--border(-top-bottom-left-right)

粗细 线样式 颜色

内边距(内容和边框之间的距离)--padding(-top-bottom-left-right)

一个值: 所有

两个值: 上下-左右

三个值: 上-中(左右)-下

四个值: 上-右-下-左

外边距(两个盒子边框之间的距离)-margin(-top-bottom-left-right)

一个值: 所有

两个值: 上下-左右

三个值: 上-中(左右)-下

四个值: 上-右-下-左

二.HTML5和CSS31.结构标签(HTML5新增)

header--头部

footer--底部

nav--导航栏

aside--侧边栏

article--文章块

2.表单扩展(HTML5新增--标签--属性--类型)输入框数据列表

数据列表

  <datalist id="dl">
        <option>1</option>
    <option>2</option>
    <option>3</option>
</datalist>

关联数据列表和文本框
<input type="text" list="dl"/>

输入框非空验证

<input type="text" required="required"/>

输入框自动聚焦(光标自动定位输入框)

<input type="text" autofocus="autofocus"/>

输入框自动填充功能

<input type="text" autocomplete="on" name="test"/>

3.音频视频标签(HTML5新增)音频标签

-- 单个音频
<audio src="yinyue.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>


-- 多个音频
<audio controls="controls" autoplay="autoplay" loop="loop">
        <source src="yinyue.mp3"></source>
        <source src="yinyue.ogg"></source>
</audio>

src--文件路径

controls--播放控制栏

autoplay--自动播放

loop--重复循环播放

source标签--加载音乐文件

视频标签

<video width="800" controls="controls" loop="loop" autoplay="autoplay">
        <source src="movie.mp4" type="video/mp4"></source>
        <source src="movie.ogg" type="video/ogg"></source>
        <source src="movie.webm" type="video/webm"></source>
        当前浏览器不支持 video直接播放，点击这里下载视频： <a href="movie.mp4">下载视频</a>
</video>

controls--播放控制栏

autoplay--自动播放

loop--重复循环播放

<a href="myvideo.webm">下载视频</a>--当视频无法加载时才会显示

4.样式圆角属性(CSS3新增)

样式名 -- border-radius--单位像素

一个值: 四个角

四个值:左上 右上 右下 左下 -- 顺时针

两个值:左上和右下 右上和左下

选择器的权重

基本选择器的权重

id选择器 > 类名选择器 > 标签选择器>继承(最低)

复合选择器的权重

使用的简单选择器之和

2.CSS存放位置(引入方式)

内嵌式:style标签中

外链式:样式存入外部css文件

单独将css内容写入css文件中--只写选择器和样式内容

通过link标签引入css文件--href="css文件路径"

行内式:写在目标标签的style属性中--style="样式内容"

三种引入方式的选择

内嵌式 -- 结构和样式(HTML和CSS)混在同一文件

不需要加载外部css文件,加载速度快--电商首页

外链式 -- 代码分离--结构和样式分离--管理修改方法

除了电商网站的首页的其他情况

行内式 -- 一定不要用

引入方式的权重问题

内嵌式 = 外链式

行内式最高

3.盒子模型

组成: 内容--内边距--边框--外边距

边框(内容的边框)--border(-top-bottom-left-right)

粗细 线样式 颜色

内边距(内容和边框之间的距离)--padding(-top-bottom-left-right)

一个值: 所有

两个值: 上下-左右

三个值: 上-中(左右)-下

四个值: 上-右-下-左

外边距(两个盒子边框之间的距离)-margin(-top-bottom-left-right)

一个值: 所有

两个值: 上下-左右

三个值: 上-中(左右)-下

四个值: 上-右-下-左

二.HTML5和CSS31.结构标签(HTML5新增)

header--头部

footer--底部

nav--导航栏

aside--侧边栏

article--文章块

2.表单扩展(HTML5新增--标签--属性--类型)输入框数据列表

数据列表

  <datalist id="dl">
        <option>1</option>
    <option>2</option>
    <option>3</option>
</datalist>

关联数据列表和文本框
<input type="text" list="dl"/>

输入框非空验证

<input type="text" required="required"/>

输入框自动聚焦(光标自动定位输入框)

<input type="text" autofocus="autofocus"/>

输入框自动填充功能

<input type="text" autocomplete="on" name="test"/>

3.音频视频标签(HTML5新增)音频标签

-- 单个音频
<audio src="yinyue.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>


-- 多个音频
<audio controls="controls" autoplay="autoplay" loop="loop">
        <source src="yinyue.mp3"></source>
        <source src="yinyue.ogg"></source>
</audio>

src--文件路径

controls--播放控制栏

autoplay--自动播放

loop--重复循环播放

source标签--加载音乐文件

视频标签

<video width="800" controls="controls" loop="loop" autoplay="autoplay">
        <source src="movie.mp4" type="video/mp4"></source>
        <source src="movie.ogg" type="video/ogg"></source>
        <source src="movie.webm" type="video/webm"></source>
        当前浏览器不支持 video直接播放，点击这里下载视频： <a href="movie.mp4">下载视频</a>
</video>

controls--播放控制栏

autoplay--自动播放

loop--重复循环播放

<a href="myvideo.webm">下载视频</a>--当视频无法加载时才会显示

4.样式圆角属性(CSS3新增)

样式名 -- border-radius--单位像素

一个值: 四个角

四个值:左上 右上 右下 左下 -- 顺时针

两个值:左上和右下 右上和左下