CSS基础知识及常用属性

最新推荐文章于 2023-07-25 15:31:21 发布

黐黎

最新推荐文章于 2023-07-25 15:31:21 发布

阅读量372

点赞数 2

分类专栏： JAVA学习

本文链接：https://blog.csdn.net/qq_45126509/article/details/99632518

版权

JAVA学习专栏收录该内容

35 篇文章 0 订阅

订阅专栏

CSS概念

CSS:Cascding Style Sheet 层叠样式表

 1.作用:用来控制我们HTML标签的展示样式,使得标签的样式展示的更加丰富,就是用来解耦的
 我们学习了CSS以后 尽量不使用 HTML标签自带的属性 全部用CSS 去设置
 层叠性:多个多个样式控制一个标签,这几个样式对一个标签同时生效
2.CSS 跟HTML 配合使用的方式
方式1:内联样式: 将CSS 代码写在标签上  所有的标签都会有一个 style属性
我们的CSS代码 就可以写在 style 属性里面
每个CSS样式 写法  属性名:属性值;属性名2:属性值2;属性3:属性值3
举例:  <font style="color:#ff66ff;font-size:20px">这段文字的样式</font>
内联样式的写法:只能控制单个标签,且书写凌乱,不推荐使用.
2.内部方式:将style属性写在<head>标签内部 常用
3.外联样式:CSS样式写在一个单独文件中 这种方式常用

CSS基本语法

基本语法
<style type="text/css">
选择器{
       属性1:属性值；
       属性2：属性值
       。。。。。。
     }
</style>

选择器

1.类选择器
<html>
<head>
 <title> New Document </title>
<style>
.p1{ color:red }
</style>
</head>
<body>
<p>查看文字内容</p>
<p>查看文字内容</p>
<p class="p1">查看文字内容</p>
<p>查看文字内容</p>
 <p>查看文字内容</p>
</body>
</html>
2.id选择器
 <html>
<head>
<title> New Document </title>
<style>
#p2{ font-size:100px;}
</style>
</head>
<body>
<p   id="p2">查看文字内容</p>
<p>查看文字内容</p>
<p   class="p1">查看文字内容</p>
<p>查看文字内容</p>
<p>查看文字内容</p>
</body>
</html>
3.标签选择器
<html>
<head>
<title> New Document </title>
<style>
p{color:red;}
</style>
</head>
<body>
<p>查看css的效果</p>
<p>查看css的效果</p>
<p>查看css的效果</p>
</body>
</html>
4.包含选择器
<html>
<head>
<title> New Document </title>
<style>
ol  ul  li{font-size:50px; color:red}
</style>
</head>
<body>
<ol>
<li>zhangsan
<li>23
<ul>
<li>lisi
</ul> 
</ol>
</body>
</html>
5.伪类
1.未连接     a:link
2.已经访问链接  a:visited
3.进入链接  a:hover
4.激活（按下）状态  a:active
其中的hover 和active 可以用于其他控价
<html>
<head>
<title> New Document </title>
<style>
a:hover{font-size:50px;}
</style>
</head>
<body>
<a  href="#">我的链接</a>
</body>
</html>

选择器的优先级

在页面中同一个html元素有不同的选择器定义样式的。
1、id选择器最高
2、类选择器
3、标记选择器

子选择器

div >p div >p{
 意思是 div 里面所有的子标签p 都被会选中 注意对孙子标签是不起作用的
}

相邻选择器

 +div +p{
意思是选择跟我 div 同级的下一个挨着的p元素(单个的p 后面在跟p是选不中的) 如果在div 和p 
之间隔着一个元素 那是选不中的
}

相邻所有选择器 div ~p

div ~p{
意思是 选中 div 后面所有同级的p元素 即使多个p 元素 之间有隔着的其他元素 也是能选中p元  素
}

属性选择器

input[type=“password”]
a[title] {
意思是选中 a标签 里面只要有 title 这个属性的 都会选中
}
a[title=num1] 意思是选中 属性title=num1 的a 标签
a[title^=num] 选中title的属性值以num 开头的a标签
a[title$=num]选中title的属性值以num 结尾的a标签a[title|=num] 选中title的属性值以num-连接  的a标签 如<a title=“num-ai”>
a[title~=num] 选中title的多个属性值以 空格隔开的 有其中一个属性值都能选中 例如<a tilte=“num num2 num3”> 三个属性值你任意选一个都能选中
比如a[title~=num2] 和 a[title~=num3] 选中的其实是同一个标签
a[title*=num] 选中title属性值 包含num的都能选中 例如<a  title=“mynumaaaa”>
a[title=num][name=lisi] 多个属性选择 意思 是选中 title=num 并且 name=lisi 的这个a标签  <a title=“num” name=“lisi”>

过滤选择器(伪类选择器)

:first-letter   div:first-letter  选中div中的第一行的第一个字母或者汉字
:first-line     div:first-line 选中 div 中子元素第一行
:first-child    p:first-child      选中父元素中的第一子元素p  注意要有父级 嵌套关系 才能选中 只有一层子父级关系
:last-child     p:last-child 选择属于其父元素最后一个子元素 <p> 元素。
:not(selector)    li:not(#my) 选择id不是my的所有li元素。
:selection    当鼠标左键选中文本时  这里注意是两个冒号 前面不加任何标签
:root          选择文档的根元素。  跟* 这个选择器很相似
:empty         p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。
例如<p></p> 这里面没有任何子标签和文本 就会被选中
:enabled   input:enabled   选择每个启用的 <input> 元素
:disabled  input:disabled  选择每个禁用的 <input> 元素
:checked   input:checked   选择每个被选中的 <input> 元素。
:focus     input:focus     选择获得焦点的 input 元素。
:first-of-type   p:first-of-type   选择的这个p元素是父元素中的第一个注意要有子父级关系 注意可以包含多层子父级关系
:last-of-type    p:last-of-type    选择的这个p元素是父元素中的最后一个注意要有子父级关系系 注意可以包含多层子父级关系
:only-of-type    p:only-of-type    选择的这个p元素在父元素中只有一个,换句话说这个父元素中只有一个元素p 也可能有其他元素,但是p元素只有一个.系 注意可以包含多层				   子父级关系
:only-child      p:only-child      选择属于其父元素的唯一子元素的每个 <p> 元素。这个父元素只有一个p 再没有其他元素只有一层子父级关系
:nth-child(n)    p:nth-child(2)    选择属于其父元素中的第二个p元素
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数
:nth-of-type(n)  p:nth-of-type(2)  选择属于其父元素第二个 <p> 元素的每个 <p> 元素。意思就是 父元素 div 里面的第二个子元素里面嵌套的第二个p元素会被选中
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
:before          p:before      在每个 <p> 元素的内容之前插入内容
:after           p:after       在每个 <p> 元素的内容之后插入内容。

CSS属性详解

常用属性

div中css的部分属性（部分属性必须使用支持HTML5的浏览器）
position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。
position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。
top:80px;//距顶部距离
left:35px;//距左距离
width:20px//宽度
height:20px//高度
font-family:楷体;
font-size:14pt;
color:blue; //层里面的字体颜色
overflow:scroll/visible/hidden/auto  //超出内容是否包裹
float: right; //浮动到哪个位置设置left或right层为左右排列默认是上下排列
clear:both/left/right/none; //属性规定元素的哪一侧不允许其他浮动元素。一般用于使用float后无法换行，给两个控件中间夹一个空层设置style="clear:both;"
background: #99FFcc;//层的背景颜色
background-image:url('top.jpg');为层设置背景图片
display:block/none/inline //显示为块  隐藏  显示为行
visibility:visible//显示元素
visibility:hidden//隐藏元素
border:2px solid #f98510;//边框的宽度和样式以及颜色
z-index:2;// 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 仅能在定位元素上奏效（例如 position:absolute;）
position:absolute(绝对)/relative(相对);//属性规定元素的定位类型。
transform:rotate(30deg);//旋转 scale(2,2);//缩放 translate(30px,20px);//位移
border-radius:20px;//边框圆角
border-image:url(border.png) 30 30 round;//边框图片 大小模式
box-shadow: 10px 10px 5px #888888;//添加阴影
//轮廓
outline:#00ff00 dotted thick;
//鼠标显示相关
cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
cursor:url(''),default;
//不同浏览器不同写法
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */

其他一些属性详细解释

html文件头部使用css
<html>
 <head>
 <title> New Document </title>
 <!--style  说明所要使用的标记 -->
 <!-- type="text/css"  说明这是一段css代码-->
 <style  type="text/css">
 h3{color:black;font-size:35px;font-family:黑体 }
 p{background:yellow;color:red;font-family:宋体}
</style>
</head>
 <body>
<h3>在html文件的头部使用css</h3>
<hr>
<p>在html文件头部应用css(层叠样式表)</p>
</body>
</html>
在html的标记的内部使用css
 基本语法：
<html标记  style="样式的属性1:样式的属性1;样式的属性2:样式的属性2;......">
<html>
 <head>
 <title> New Document </title>
 </head>
 <body>
  <h1  style="color:red;font-size:50px;font-family:黑体">标签内部使用css</h1>
  <hr>
  <p style="background:cyan;color:red;font-family:宋体">在html标记的内部使用css</p>
 </body>
</html>
使用外部css文件
基本语法：
 <head>
 <link rel="stylesheet"  type="text/css"  href="css样式表文件的存放位置">
  rel="stylesheet"   是指在html文件中使用的是外部样式表文件
  type="text/css"  指明该文件的类型是样式表文件
  href="css样式表文件的存放位置"    样式表文件的地址（绝对路径或相对路径）
  </head>
第一  编写外部css文件（后缀名【.css】）
h3{color:red; font-size:35px;font-family:黑体}
p{ background:yellow; color:red;font-family:宋体}
第二  <link rel="stylesheet"  type="text/css"  href="css样式表文件的存放位置">
<html>
<head>
<title> New Document </title>
  <link   rel="stylesheet"   type="text/css"  href="mycss.css">
 </head>
 <body>
<h3>使用外部css</h3>
<hr>
<p>在html文件使用外部css(层叠样式表)</p>
 </body>
 </html>
字体的设置
1.font-family------设置字体
 <html>
<head>
<title> New Document </title>
<style  type="text/css">
h2{ font-family:黑体 }
p{ font-family:隶书,楷书,"Conrier New" }
</style>
</head>
<body>
 <h2>设置字体</h2>
  <hr>
  <p>使用css来设置字体</p>
 </body>
</html>
font-size  设置字体的大小
font-size:绝对尺寸/关键字/相对尺寸/百分比
关键字:xx-small(极小),x-small（较小）,smaller,small（小）,medium（标准）,large（大）
<html>
<head>
<title> New Document </title>
<style>
#p1{ font-size:30px}
#p2{ font-size:0.1cm}
#p3{ font-size:0.5mm}
.p1{ font-size:large}
.p2{font-size:small}
.p3{font-size:xx-small}
 </style>
 </head>
font-style  设置字体的样式（设置字体是否为斜体字）
normal----正常显示字体
italic---斜体字
oblique--歪斜体（倾斜角度大一点)
font-weight  设置字体的加粗
取值：
normal  ---- 正常显示
bold ----粗体（数字700粗细值）
bolder ---加粗
lighter ---细体（比正常字体稍微细一点）
number  ----数字型（一般整百设置，有9个级别（100----900）数字取值越大越粗）
text-shadow设置字体的阴影
规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
text-shadow: 5px 5px 5px #FF0000;
font-variant 设置字体的变体
设置字体是否显示为小型的大写字母
主要用于设置英文字体
normal  --正常字体
small-caps  表示英文字母显示为小型的大写字母
颜色的设置
	1、color  
    关键字  英文单词来设置颜色“red”  红色
    RGB值  颜色码
	2、设置背景颜色   background-color
	3、background-image  	   设置背景图片
	背景的设置和边框的设置
	背景附件的设置
	background-attachment
	是指设置背景图片是否随着滚动条的移动而移动
	scroll  ---表示背景图片随着滚动条的移动而移动
fixed---表示背景图片固定在页面上不动，不随滚动条移动而移动
设置背景图片的重复
 background-repeat 设置背景图片总是在水平和垂直方向重复显示铺平整个网页。
 repeat   背景图片在水平和垂直方向平铺
  repeat-x  背景图片在水平方向平铺
 repeat-y  背景图片在垂直方向平铺
no-repeat  背景图片不平铺
背景图片的位置设置
background-position
关键字            百分比              位置说明
top left          0%  0%              左上位置
top center        50%  0%             靠上居中
top right         100%  0%            右上位置
left  center      0%  50%             靠左居中
center center     50%  50%            正中位置
right center      100%  50%           靠右居中
bottom  left      0%  100%            左下位置
bottom  center    50%  100%            靠下居中
bottom  right     100%  100%           右下位置
边框的设置
边框的样式
border-style
基本语法
border-style
border-top-style
border-bottom-style
border-left-style
border-right-style
取值：
none  没有边框
dotted  点线
dashed  虚线
solid   实线
double  双实线
groove  凹型线
ridge   凸型线
inset   嵌入式
outset  嵌出式
取同一个值：四条边框线是同一个线型
取两个值：上下边框使用第一个取值，左右边框使用第二个取值
取三个值： 上边框取第一个值，左右取第二个值，下边框取第三个值
取4个值：上第一个值，右取第二个值，下取第三个值，左取第四个值
边框的属性设置和边距/填充
边框的宽度
 border-width
 基本语句：
border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
取值；
thin  ----细边框
medium  ---中等边框
thick--粗边框
长度---数字
边框的颜色
border-color
基本设置语法：
border-color
border-top-color
border-bottom-color
border-left-color
border-right-color
取值
英文单词  “red”代表红色
RGB  颜色码
边框的综合设置和边距
border
边距指的是设置网页中某个元素的四边和网页中其他元素之间的空白距离
上边距  margin-top
下边距  margin-bottom
左边距  margin-left
右边距  margin-right
复合设置 margin
取值：
数字----长度
百分比---是相对于上一级元素的百分比，允许是负数
auto ---自动提取边框的值，默认值
边框的圆角
border-radius设置边框圆角
border-radius:50px;
先把边框设置后再设置圆角
div { border:2px solid; border-radius:25px;  }
边框的阴影
box-shadow: 10px 10px 5px #888888;//添加阴影
X方向的偏移像素
Y方向的偏移像素
模糊的像素值
阴影颜色
填充
用来设置边框和其内部的元素之间的空白距离
上边距  padding-top
下边距  padding-bottom
左边距  padding-left
右边距  padding-right
复合设置 padding
取值：
数字---长度
百分比
css对文字的排版
调整字符间距
 letter-spacing
用来控制字符之间的间距，这个间距实际上就是在浏览器中所显示的字符间的空格距离。
取值：
normal ---表示正常显示（默认）
长度--可以使用负数，带上单位
 单位px(像素)
添加文字的修饰
为文字添加如下划线，删除线等修饰
text-decoration
 属性的取值：
underline----添加下划线
 overline---添加上划线
line-through--添加删除线
 blink---添加闪烁效果（只能在Netscape的浏览器中正常显示）
none--没有任何的修饰
文本的对齐方式
text-align
用来控制文本的排列和对齐方式
属性的取值：
left--左对齐
right--右对齐
center--居中对齐
justify--两端对齐
段落的缩进设置
text-indent
用来控制每个段落的首行缩进的距离。
属性取值：
长度（数字）带上单位
百分比相对于上一级元素的宽度
行高的设置
line-height
用来控制文本内容之间行间距
属性取值
normal---浏览器默认的行高
数字--设置行高带上单位
百分比----表示行高是该元素字体大小的百分比
放大缩小位移
Transform
transform:rotate(30deg);//旋转30度
transform:translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素
transform:scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
transform:skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
动画
Animation
格式：animation:myfirst 5s;（myfirst动画名，5s动画时间）
@keyframes myfirst 
{ 0% {background: red;} 
25% {background: yellow;} 
50% {background: blue;} 
100% {background: green;} }
@keyframes myfirst 
{ from {background: red;} 
to {background: yellow;}}
过渡动画
transition
格式：transition: width 2s; （应用于宽度，时间2秒）
div{transition:width 5s;
width:100px;height:100px;
background:red;}
div:hover { width:300px; } 先定义一个层的hover  鼠标进入后把宽度改为300px  则就会看到过渡动画

其余一些补充属性

transparent 透明
<!-- list的值就是要关联列表的id名 -->
<input type="text" list="mydata" placeholder="请输入邮箱"/>
 <datalist id="mydata">
<option label="第一个">xxx@qq.com
<option label="第二个">xxx@163.com
<option label="第三个">xxx@gmail.com
<option label="第四个">xxx@139.com
 </datalist>
垂直对齐属性
vertical-align:text-top/middle
可设置的值有以下
baseline 默认。元素放置在父元素的基线上。 
sub 垂直对齐文本的下标。 
super 垂直对齐文本的上标 
top 把元素的顶端与行中最高元素的顶端对齐 
text-top 把元素的顶端与父元素字体的顶端对齐 
middle 把此元素放置在父元素的中部。 
bottom 把元素的顶端与行中最低的元素的顶端对齐。 
text-bottom 把元素的底端与父元素字体的底端对齐。 
opacity:0.0; 透明度
display:block/none/inline //显示为块  隐藏  显示为行
visibility:visible//显示元素
visibility:hidden//隐藏元素 但会占位置
//轮廓
outline:#00ff00 dotted thick;
//轮廓外边距
outline: 2px solid red;
outline-offset: 10px;
//鼠标显示相关
cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
cursor:url(''),default;//自定义一个鼠标图片
z-index:2;// 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 仅能在定位元素上奏效（例如 position:absolute;）

CSS中的一些框架标签

一、frameset
注意 frameset 标签不能和body标签共存
1. 属性
①border
设置框架的边框粗细。
②bordercolor
设置框架的边框颜色。
③frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
④cols
纵向分割页面。其数值表示方法有三种：“30%、30（或者30px）、*”；数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%；“30”表示该区域横向宽度为30像素；“*”表示该区域占用余下页面空间。例如：cols="25%,200,*" 表示将页面分为三部分，左面部分占页面30%，中间横向宽度为200像素，页面余下的作为右面部分。
⑤rows
横向分割页面。数值表示方法与意义与cols相同。
⑥framespacing
设置框架与框架间的保留的空白距离。
2. 用例
<frameset cols="213,*" frameborder="no" border="0" framespacing="0">
注意1：
cols与rows两属性尽量不要同在一个<frameset>标签中使用。若要实现下图架构，代码正确写法为：
Frameset使用教程
<frameset rows="59,*" cols="*" frameborder="no" border="0" framespacing="0">
 <frame src="???" name="topFrame" scrolling="No" noresize="noresize" id="topFrame"/>
 <frameset cols="213,*" frameborder="no" border="0" framespacing="0">
<frame src="???" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"/>
<frame src="???" name="mainFrame" id="mainFrame"/>
【即，若想即使用cols又使用rows，可利用frameset嵌套实现】
注意2：
<frameset cols="40%,*,*">
意思是：第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。
<frameset cols="*,*,*,*">
 意思是：浏览器窗口等分为四部分。
二、frame
1. 属性
①name
设置框架名称。此为必须设置的属性。
②src
设置此框架要显示的网页名称或路径。此为必须设置的属性。
③scrolling
设置是否要显示滚动条。设定值为auto, yes, no。
④bordercolor
设置框架的边框颜色。
⑤frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
⑥noresize
设置框架大小是否能手动调节。
⑦marginwidth
设置框架边界和其中内容之间的宽度。
⑧marginhight
设置框架边界和其中内容之间的高度。
⑨width
设置框架宽度。
⑩height
设置框架高度。
2. 用例
<frame src="???" name="topFrame" scrolling="No" noresize="noresize" marginwidth="10" marginhight="10" width="400" height="800" />
三、iframe
是浮动的框架（frame），其常用属性与frame类似，其他的主要有以下（相同的就不列举了）
1. 属性
①align
设置垂直或水平对齐方式
②allowTransparency
设置或获取对象是否可为透明。
2. 用例
<iframe name="123" align="middle" marginwidth="0" marginheight=0 src="???" frameborder="0" scrolling="no" width="776" height="2500"></iframe>
注意：
iframe标签与frameset、frame标签的验证方法不同，是XHTML 1.0 Transitional。且iframe是放在body标签之内，而frameset、frame是放在body标签之外。

embed 标签

一、基本语法
代码如下:
embed src=url
说明：embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等，Netscape及新版的IE 都支持。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
示例:
代码如下:
<embed src="your.mid">
二、属性设置
1、自动播放：
语法：autostart=true、false
说明：该属性规定音频或视频文件是否在下载完之后就自动播放。
true：音乐文件在下载完之后自动播放；
false：音乐文件在下载完之后不自动播放。
示例：
代码如下:
<embed src="your.mid" autostart=true>
<embed src="your.mid" autostart=false>
2、循环播放：
语法：loop=正整数、true、false
说明：该属性规定音频或视频文件是否循环及循环次数。
属性值为正整数值时，音频或视频文件的循环次数与正整数值相同；
属性值为true时，音频或视频文件循环；
属性值为false时，音频或视频文件不循环。
示例：
代码如下:
<embed src="your.mid" autostart=true loop=2>
<embed src="your.mid" autostart=true loop=true>
<embed src="your.mid" autostart=true loop=false>
3、面板显示：
语法：hidden=ture、no
说明：该属性规定控制面板是否显示，默认值为no。
ture：隐藏面板；
no：显示面板。
示例：
代码如下:
<embed src="your.mid" hidden=ture>
<embed src="your.mid" hidden=no>
4、开始时间：
语法：starttime=mm:ss（分：秒）
说明：该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。
示例：
代码如下:
<embed src="your.mid" starttime="00:10">
5、音量大小：
语法：volume=0-100之间的整数
说明：该属性规定音频或视频文件的音量大小。未定义则使用系统本身的设定。
示例：
代码如下:
<embed src="your.mid" volume="10">
6、容器属性：
语法：height=# width=#
说明：取值为正整数或百分数，单位为像素。该属性规定控制面板的高度和宽度。
height：控制面板的高度；
width：控制面板的宽度。
示例：
代码如下:
<embed src="your.mid" height=200 width=200>
7、容器单位：
语法：units=pixels、en
说明：该属性指定高和宽的单位为pixels或en。
示例：
代码如下:
<embed src="your.mid" units="pixels" height=200 width=200>
<embed src="your.mid" units="en" height=200 width=200>
8、外观设置：
语法：controls=console、smallconsole、playbutton、pausebutton、stopbutton、volumelever 说明：该属性规定控制面板的外观。默认值是console。
console：一般正常面板；
smallconsole：较小的面板；
playbutton：只显示播放按钮；
pausebutton：只显示暂停按钮；
stopbutton：只显示停止按钮；
volumelever：只显示音量调节按钮。
示例：
代码如下:
<embed src="your.mid" controls=smallconsole>
<embed src="your.mid" controls=volumelever>
9、对象名称：
语法：name=#
说明：#为对象的名称。该属性给对象取名，以便其他对象利用。
示例：
代码如下:
<embed src="your.mid" name="video">
10、说明文字：
语法：title=#
说明：#为说明的文字。该属性规定音频或视频文件的说明文字。
示例：
代码如下:
<embed src="your.mid" title="第一首歌">
11、前景色和背景色：
语法：palette=color|color
说明：该属性表示嵌入的音频或视频文件的前景色和背景色，第一个值为前景色，第二个值为背景色，中间用 | 隔开。color可以是RGB色（RRGGBB）也可以是颜色名，还可以是transparent （透明）。
示例：
代码如下:
<embed src="your.mid" palette="red|black">
12、对齐方式：
语法：align=top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom
说明：该属性规定控制面板和当前行中的对象的对齐方式。
center：控制面板居中；
left：控制面板居左；
right：控制面板居右；
top：控制面板的顶部与当前行中的最高对象的顶部对齐；
bottom：控制面板的底部与当前行中的对象的基线对齐；
baseline：控制面板的底部与文本的基线对齐；
texttop：控制面板的顶部与当前行中的最高的文字顶部对齐；
middle：控制面板的中间与当前行的基线对齐；
absmiddle：控制面板的中间与当前文本或对象的中间对齐；
absbottom：控制面板的底部与文字的底部对齐。
示例：
代码如下:
<embed src="your.mid" align=top>
<embed src="your.mid" align=center>