表单补充：

//简单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控件：搜索框。-->

上述代码在网页显示结果如下：

//css 层叠样式表（Cascading Style Sheets）相关推荐

CSS层叠样式表Cascading Style Sheets(2021.10.05)
一.CSS简介 1.优缺点优点:丰富的样式描述: 样式和结构的分离,便于维护和管理: 减少代码量,加快页面加载: 样式代码复用性强: 多个页面可以使用同一个CSS代码: 缺点:浏览器对CSS支持程度 ...
CSS 指层叠样式表 (Cascading Style Sheets) 和选择器
CSS 指层叠样式表 (Cascading Style Sheets) 内联样式(行内样式) 在开始标记中通过style属性(attribute)来设置元素的样式.注意,这里的 property 指的 ...
样式表（CSS：Cascading Style Sheets）简要教程[上]
首先提供两个手册的下载 CSS2&JavaScript.rar 一．样式表基础 1．样式表中每一个条目由选择符(selector)和对应的规则组成,选择符通常是HTML元素名称,也可以是类( ...
CSS ： Cascading Style Sheets
作者:知乎用户链接:https://www.zhihu.com/question/20077745/answer/137434995 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业 ...
CSS(层叠样式表cascading style sheet)——CSS样式、基础选择器
一.CSS作用对页面的外观进行美化统一网站页面的风格实现内容和样式的分离,适合团队开发二.CSS语法规范三.CSS引入方式 CSS的3种样式表书写位置的不同分为:行内样式表(行内式) ...
CSS（Cascading Style Sheets）层叠样式表
为网页添加样式术语解释 '''css h1{ color:red; background-color:lightblue; text-align: center; } ''' CSS规则 = 选择器 ...
CSS (Cascading Style Sheets)
CSS 是什么层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制 , 实现美化页面的效果 . 能够做到页面的样式和结构分离. 基本语 ...
CSS层叠样式表（Cascading Style Sheets）
CSS简介 CSS全称为:层叠样式表(Cascading Style Sheets),主要用于定义HTML内容在浏览器内的显示样式,如文字大小,颜色,字体加粗等. 使用CSS样式通过定义某个样式,可以 ...
CSS（Cascading Style Sheet）
文章目录 CSS(Cascading Style Sheet) 使用方式基本语法颜色写法选择器*** 标签选择器 id选择器类选择器选择器分组层次选择器伪类 pseudo-classes ...
CSS(Cascading Style Sheets) 层叠样式表
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTM ...

//css 层叠样式表（Cascading Style Sheets）