表单补充:
//简单css样式表(Cascading Style Sheets)//样式使用方式//内联样式//内部样式//外链样式//元素选择器//标签选择器//id选择器//类选择器//表单补充//简单css样式表(Cascading Style Sheets)
CSS全称为层叠样式表(Cascading Style Sheets),通常又称为风格样式表 (Style Sheet),他是用来进行网页风格设计的。CSS拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
在网页中,CSS通过设立样式表,可以统一控制HTML中各个标签的显示属性,如设置字体的颜色、大小、样式等,使用CSS还可以设置文本居中显示、文本与图片的对齐方式、超链接的不同效果等,这样层叠样式表就可以更有效地控制网页外观。CSS同样也是一种标识性语言。
CSS的出现给Web网页开发带来了很多优势,总结如下:
内容与表现相分离。表现统一性。样式的丰富性。减少网页代码量,增加网页浏览速度,节省网络带宽,极大的提高工作效率。
//样式使用方式
//内联样式
内联样式(行内样式)是混合在HTML标记里使用的,用这种方法可以很简单的对某个标签元素单独定义样式。内联样式就是在HTML标签中直接使用style属性设置CSS样式。
应用方式如下:
<标记名 style=“样式属性:样式属性值;样式属性:样式属性值;……”></标记名>
例如:
<div style="background:red;width:100px;height:100px;">这是一个盒子</div>
他在网页的显示结果如下:
background:red;背景红色
width:100px;宽度100像素
height:100px;高度一百像素
//内部样式
在HTML中通过使用style标签引入CSS样式,style标签永固为HTML文档定义样式信息。style标签位于head标签中,它规定浏览器中如何呈现HTML文档。在style标签中,type属性是必须的,它用来定义style元素的内容,唯一值是“text/css”。
当单个文件需要特别样式时,就可以使用内部样式,内部样式只对其所在的网页有效,是一种比较常用的方法。基本使用语法如下:
<style type="text/css">选择符1{样式属性:样式属性值;样式属性:样式属性值;...}选择符2{样式属性:样式属性值;样式属性:样式属性值;...}选择符3{样式属性:样式属性值;样式属性:样式属性值;...}选择符4...
例如:
<style type="text/css"><!--type="text/css"代表style内样式类型-->div{width: 100px;height: 100px;background-color: gold;}#header{width: 100px;height: 100px;background-color: yellow;}.footer{width: 100px;height: 100px;background-color: green;}</style>
//外链样式
外链样式就是把CSS代码保存为一个单独的样式表文件,文件扩展名为“.css”,在页面中引入外部样式即可。而链接外部样式有两种方法:
1、在HTML页面中使用<link/>
标签链接外部样式,这个link标签必须放到页面的<head>
标签内,语法格式如下所示:
<head>...<link href="style.css" rel="stylesheet" type="text/css"/>...</head>
上述语法格式中,rel="stylesheet"是用来定义链接的文件与HTML之间的关系。stylesheet值表示指定一个固定或首选的样式。type上文已经讲到,href是指文件所在的位置,可以是相对路径也可以是绝对路径。
2、导入外部样式,用法与链接外部样式基本相同,都是使用外部样式文件。只是在语法和运行方式上有所区别。链接外部样式表示HTML文件直接链接到CSS文件中,而导入外部样式实在HTML文件初始化时才被导入HTML文件内,作为文件的一部分,类似内嵌。它的基本语法如下:
<style>@ import url("样式表路径")</style>
导入外部样式使用import,有多种写法,常见的如下:
@ import url("样式表路径");@ import url(样式表路径);@ import "样式表路径";@ import '样式表路径';
//元素选择器
选择器(selector)是CSS中非常重要的概念。所有HTML语言中的标签样式,都是通过不同的CSS选择器进行控制的。用户只需要通过选择器,就可以对HTML中的标签进行选择,并赋予各种声明,即可实现各种效果。
选择器指大括号内的这组样式代码针对的现象,即针对那些页面元素中进行设置,可以是HTML元素,如body、p、a等,也可以是元素的属性,如id值或class值。
属性和属性值是CSS的核心,每个HTML元素的CSS样式中都有丰富的样式属性。如字体颜色、大小、定位、浮动等。
CSS的使用方式就是首先指定对什么选择器进行设置,然后指定对该对象上的哪些方面的属性进行设置,最后给出该设置的属性值。
//标签选择器
对某一种标签进行选择,例如:
div{width: 100px;height: 100px;background-color: gold;}
div选择器,用于声明页面中所有div标签的样式风格。类似的还有p标签,h1等等等等。
样式重叠时,下面的样式会覆盖上面的样式
内联样式权重>内部样式权重>外链样式权重
默认标签上是有样式的。
//id选择器
id选择器为带有指定id的元素设置样式,允许以一种独立于文档元素的方式来指定样式。所有主流浏览器都支持id选择器。id选择器使用"#"前缀标识符进行标识,后面紧跟指定的元素的id名称。在HTML的标签中,只要在HTML中设置了id属性,就可以直接调用CSS中的id选择器。元素的id名称是唯一的,只能对应于文档中一个具体的元素。
例如:
<style>#header{width: 100px;height: 100px;background-color: yellow;}</style></head><body><div id="header">123</div><div class="footer">123</div>
上面两个div盒子中只有第一个div盒子被添加了样式。
注意:这里的id名可以是任何合法的字符(第一个字符不能是数字),由开发者自行定义。
//类选择器
类选择器于id选择器类似,不同的是定义时使用“.”而不是使用“#”,引用时使用的class属性而不是id属性。
<style>#footer{width: 100px;height: 100px;background-color: yellow;}</style></head><body><div id="header">123</div><div class="footer">123</div>
上面两个div盒子中只有第二个div盒子被添加了样式。
//表单补充
HTML5中新增的表单控件:
<input type="number"/><br/><!--number控件:只能输入数字。--><input type="date"/><br/><!--date控件:只能输入日期。--><input type="time"/><br/><!--time控件:只能输入时间。--><input type="week"/><br/><!--week控件:只能输入周。--><input type="range"/><br/><!--range控件:显示范围。--><input type="emall"/><br/><!--email控件:只能输入邮箱。--><input type="color"/><br/><!--color控件:拾色器。--><input type="url"/><br/><!--url控件:只能输入URL。--><input type="search"/><br/><!--search控件:搜索框。-->
上述代码在网页显示结果如下: