- 下拉列表也可以进行多选操作,在<select>标签中设置
multiple="multiple"
属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ctrl
键同时进行单击
(在 Mac下使用Command +单击), -
语法:
<input type="submit" value="提交">
type
:只有当type值设置为submit时,按钮才有提交作用
value
:
按钮上显示的文字
-
语法:
<input type="reset" value="重置">
type
:只有当type值设置为reset时,按钮才有重置作用
value
:
按钮上显示的文字
-
语法:
<label for="控件id名称">
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
-
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“
.css
”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:<link href="base.css" rel="stylesheet" type="text/css" />
注意:
1、css样式文件名称以有意义的英文字母命名,如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。 -
<!DOCTYPE HTML>
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
<title>嵌入式css样式</title>
-
<link href="style.css" rel="stylesheet" type="text/css" />
-
</head>
-
<body>
-
<p>慕课网,<span>超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手!
-
</p>
-
</body>
-
</html>
-
每一条css样式声明(定义)由两部分组成,形式如下:
选择器{ 样式; }
在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。 -
在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:
1、为标签设置id="ID名称",而不是class="类名称"。
2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。
右侧代码编辑器中就是一个ID选择符的完整实例。
任务
我也来试试,为第二段文字中的“公开课”三个文字使用ID选择器的方式设置为绿色
1.在右边编辑器的第16行,输入:
<span id="setGreen">公开课</span>
2.在右边编辑器的第10-12行,输入:
#setGreen{
color:green;
} - # 是id .是class
-
还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。 -
通用选择器
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:
* {color:red;}
伪类选择符
更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:
a:hover{color:red;}
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。
关于伪选择符:
关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中,但是因为不能兼容所有浏览器,本教程只是讲了这一种最常用的)。其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。
分组选择符
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:
h1,span{color:red;}
它相当于下面两行代码:
h1{color:red;} span{color:red;}