7、css介绍

1、什么是css？

Cascading Style Sheets

通常称为css样式表、层叠样式表和级联样式表 , 给页面设置样式。

2、css引入方式--行间样式

概述：

通过HTML元素的style属性设置样式的行为，称为行间样式
放在开始标签内部
适用场景：
- 单个html标签需要设置样式时
- 优缺点:比较直观;相同样式需要重复定义,造成代码冗余;作用范围小,不利于后期代码维护;代码不能复用,结构样式不分离。

音视频标签

audio

音频标签

语法<audio src="音频文件地址"></audio>

属性

src="" 提供文件的地址

controls 提供文件的播放控件

loop 提供文件循环播放

muted 输入默认静音

<audio src="file/hanmai.mp3"  controls loop muted></audio>

video

视频标签

语法<video src="视频文件地址" controls loop muted ></video>

属性

src="" 提供文件的地址

controls 提供文件的播放控件

loop 提供文件循环播放

muted 输入默认静音

autoplay 打开浏览器可以自动播放

poster 提供文件的初始预览的图片

注意事项

在视频标签video autoplay属性存在时必须需要加上muted属性的

<video src="视频文件地址" controls loop muted autoplay></video>

字体

font-fomily：值；字体的样式

取值：中文”双引号“英文

如果是多个字体样式的话需要用逗号隔开

回退机制：一个不行换一个从左到右执行

font-size：值；字体的大小

取值：像素px，一般浏览器默认大小是16px/像素

font-style：值；设置字体的倾斜

取值：默认值normal 斜体显示italic

font-weight：值；设置字体的粗细

取值：默认值normal 粗体显示bold 或 100-900九级字重、400相当于normal、700相当于bold

设置文本

line-height

可以实现单行文本的居中显示

text-decoration

可以设置文本的装饰线

取值：none 默认的，没有装饰线

underline 下划线，定义文本下方的一条线

line-through 删除线，定义穿过文本的一条线

overline 上划线，定义文本上方的一条线

text-indent

可以设置文本的首行缩进

取值：0 默认

px 像素长度

允许负值出现的

文本字体标签

b标签和strong给文字增加加粗属性，strong是更容易被浏览器识别的

i标签和em标签给文字增加倾斜属性，em是更容易被浏览器识别的

del标签给文字增加删除线，现在基本不用

sup标签和sub标签，p是上标，b是下标

选择器

伪类选择器

hover

语法:选择器名:hover{}

用法:当鼠标悬停之后产生的一些效果

第一种用法如下

选择器名:hover{属性1:属性名1;属性2:属性名2;......
}

第二种用法如下

选择器名1:hover 选择器名2{属性1:属性名1;属性2:属性名2;......
}

复合选择器

是由两个或多个基础选择器，通过不同的方式组合而成的选择器

1.后代选择器

后代选择器--包含选择器，可以选择某个元素后代的元素

2.群组选择器

如果在html里具备相同的样式可以使用群组选择器，语法是：名字,名字,名字,名字.......{样式}

CSS介绍/音视频标签/字体/文本/选择器相关推荐

HTML5学习笔记之音视频标签
HTML5学习笔记之音视频标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习 ...
Web前端开发笔记——第二章 HTML语言第十节画布标签、音视频标签
目录一.画布标签二.音视频标签 (一)音频标签 (二)视频标签 (三)资源标签结语一.画布标签 <canvas> </canvas> 画布标签用于图形.字符等的绘制,它 ...
【HTML】音视频标签（audio、video、embed）
音视频标签(audio.video.embed) 音频 audio标签属性 controls autoplay loop 使用方式提示用户升级浏览器浏览器不支持MP3格式兼容低版本浏览器(em ...
H5新特性（一）——音视频标签
H5新特性--音视频标签大家都有在网页中浏览音频和视频的经历,在HTML5之前,对视频和音频没有一个标准,因此在网页中看到的视频,都是通过第三插件的方式嵌入的,可能是QuickTime,也可能是 R ...
HTML之图片标签、音视频标签
图片标签图片标签<img>的作用是向网页引入一个外部图片,使用img标签来引入一个外部图片,img标签是一个自结束标签. 相关属性: src:该属性用于指定外部图片的路径,可以是互联网上 ...
HTML5之内联框架和音视频标签
1.内联框架使用iframe标签向当前页面中引入其他页面属性: -src 指定要引入的网页的路径 -framborder 指定内联框架的边框(只有0和1,0表示没有边框,1表示有边框) 2.音频标 ...
HTML音视频标签以及图片格式的讲解
今天来讲一下两个新标签,音频标签以及视频标签也就是audio标签和video标签 audio标签音频标签支持三种格式:MP3.Wav.Ogg,一般而言我们都是用MP3格式的. <audio s ...
用css给video视频标签上添加渐变效果
最近自学前端,在仿写某站首页时发现一些视频封面有遮罩效果,像调暗了些似的能够使上面的白色字体更加显眼,如图: 某站的: ...
CSS介绍及视频分享
视频教程:http://pan.baidu.com/s/1BvXpM CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言.相对于传统HTML的表现而言,CSS能够对网页中 ...

CSS介绍/音视频标签/字体/文本/选择器