CSS文件存放位置
CSS 代码习惯的三种写法：内嵌CSS、外链CSS、行内CSS。
-
内嵌CSS：指将CSS代码写在HRML网页中；
-
外链CSS：指将CSS代码写在外部的独立CSS文件中；
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 如果想要采用外链CSS写法，就需要在当前的HTML中引入具体的想要使用的CSS文件
在HTML当中定义一个Link的单标签来引入要引入的CSS文件-->
<link rel="stylesheet" type="text/css" href="CSS.css"/>
</head>
<body>
<div id="zh_01">这是一个大文件
</div>
</body>
</html>
CSS部分：
div{
width: 100px;
height: 50px;
background-color: seagreen;
}
外链CSS写法
- 行内CSS：指将CSS代码写在具体的HTML标签身上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 为了快速的修改某个元素的CSS样式，可以直接将想要设置的样式直接写在标签身上
只需要将style 当作div标签身上的一个属性来使用
添加的style不能使用手动换行，需要自动换行-->
<div style="width: 100px; height: 100px; background-color: greenyellow; color: #000" > 我是一个div标签，双标签</div>
</div>
</body>
</html>
注意：
- 根据浏览器渲染页面原理选择将CSS代码写在HTML 文件靠前的位置；
- 使用外链CSS写法的时候，外部独立的CSS文件不需要写style标签，同时需要使用link 标签将某个CSS文件引入具体的HTML文件中；
<link rel="stylesheet" type="text/css" href="目录 CSS文件路径"/> - 对于上述三种CSS文件存放位置来说，行内CSS权重最高，外链和内嵌的权重不易定谁大于谁，它的控制能力完全取决于使用选择器的权重。
- 如果想要直接将某一个样式的权重提到最高，只需要在该语句CSS代码的最后设置！important，例如：
div{color: pink!important; }
音频标签
H5指的是HTML5新的语言标准，在HTML5中引入了一个audio的 标签，可以直接引入一段声音资源。
语法格式：<audio src="路径" autoplay controls loop>
1.默认引入的声音不会自动播放；
2.HTML5中定义了一个autoplay属性来设置自动播放【现在浏览器不支持】
3.目前没有哪一种音频格式可以兼容所有的浏览器，因此在引入声音资源的时候，就需要尽可能多的引入不能格式，从而兼顾所有的浏览器，为了解决这个问题，HTML5中定义了一个source标签；
代码格式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>H5新增音频标签</title>
</head>
<body>
<audio src="music/无羁肖战+王一博.mp3" autoplay controls loop>
当前浏览器不支持audio
</audio>
<!-- <audio >
当前浏览器不支持audio
<source src="music/意难平-银临.mp3" autoplay oncontrols loop />
<source src="music/意难平-银临.ogg" autoplay oncontrols loop />
</audio> -->
</body>
</html>
注意：
1.audio 是一个双标签；
2.autoplay用来设置自动播放；
3.controls 调出当前设备的播放控件；
4.loop 设置当前音频循环播放；
5.autoplay controls loop是简写模式，同autoplay=“autoplay”–>
6.默认audio里边的文字不显示，只有当前浏览器不支持标签的时候才会显示文字；
视频标签/video
代码示例：(视频标签用法同音频标签类似,这里就不详细介绍了，如果想深入了解可以查看菜鸟教程-Html5)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- video -->
<video width="800" height="" autoplay controls loop>
<source src="video/smile.mp4" type="video/mp4"></source>
<source src="video/smile.ogg" type="video/ogg"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>
</body>
</html>
常见文字样式
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常见的文字样式</title>
<style type="text/css">
div{
/* 行高：line-height: X px
设置div里边的文字在div中垂直方向居中显示，div高度200*/
height: 200px;
line-height: 200px;
background-color: #FF69B4;
text-align: center;
color: #FFD700;
font-size: 15px;
font-weight: normal;
font-family: "微软雅黑";
}
body{
background-color: #008000;
}
</style>
</head>
<body>
<div id="">
离离原上草，一岁一枯荣。
野火烧不尽，春风吹又生。
</div>
</body>
</html>
1.line-height：行高，将行高的大小设置成当前元素的高度时，可以实现单行文本在当前元素中垂直方向居中显示的效果；
2.text-align：水平对齐，left、center、right，分别设置文字当前盒子当中水平对齐。
3.font-size：字体大小，单位时px，一般情况下浏览器会有一个最小的字体，在小不生效；
4.font-weight：字体粗细，可设置字体关键字（normal正常/bold加粗）或者数字（100-900之间）；
5.font-family：字体名称，一般常用的是“微软雅黑”或“黑体”；
6.color：字体颜色，可以设置颜色单词，还可以是十六进制的数字。
web前端总结
更多推荐
软件测试基础-Web前端/CSS介绍/音频标签/视频标签/字体样式（四）
发布评论