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介绍/音频标签/视频标签/字体样式(四)
发布评论