智能表单样式扩展
max-width： 表示最大宽度
text-align： 字体居中
某些属性样式直接写到 form 里面不行
需要写在 style=“ ” 里面
一、 CSS概述
CSS 指的是 Cascading Style Sheets，即 层叠样式表，是一种设计网页样式及布局的技术。所谓“层叠”，实际上指的是将显示样式与显示内容分离。
在Web标准中，表现是赋予页面内容显示的样式，包括版式、颜色和大小等等。也就是说，页面中显示的内容放在结构里，而修饰、美化放在表现里，做到结构（内容）与表现分开，这样，当页面使用不同的表现时，呈现的样式是不一样的，就像人穿了不同的衣服，表现就是结构的外衣，W3C推荐使用CSS来完成表现。
二、 CSS的基本语法
• CSS 语法由三部分构成：选择符（selector）、属性（property）、属性的取值（value）。
语法：
selector{
Property1:value1;
Property2:value2;
…….
}
• 选择器（selector）是指给页面的哪个或哪些元素定义样式，通常是希望定义样式的元素标签。
• 属性（property）是定义的具体样式（如颜色、字体等），每个属性都有一个值，属性和值用冒号隔开，并用大括号括起来。
• 属性和值组成样式声明（declaration），可以定义多个声明，多个声明之间用分号隔开。
• 当有多个声明时，建议在每行只描述一个声明，这样可以增强样式的可读性。
如：
p {text-align: center;color: black;font-family: arial;}
p {
text-align: center;
color: black;
font-family: arial;
}
• CSS对大小写不敏感，是否包含空格不会影响CSS在浏览器的效果。
三、 CSS的3种使用方式
1、内嵌式
（1）指的是将CSS规则混合在HTML标签中使用的方式。CSS规则作为HTML标签的style属性值。
（2）内嵌样式 只对其所在的标签起作用，其它的同类标签不受影响。
如：
<a style=“font-family:黑体;font-style:italic;font-size:16pt;color:red”>
这是使用样式的超级链接
</a>
实例：
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS使用示例-内嵌样式表</title>
</head>
<body>
<a style="font-family:黑体;font-style:italic;font-size:16pt;color:red">使用内嵌样式的超级链接</a>
<br/>
<br/>
<a>普通的超级链接</a>
</body>
</html>
效果如下：
2、内部式
内部样式表指的是在 HTML 文档的 < head> 标记内嵌入样式表。
格式如下：
<style type=“text/css”>
selector{
property1:value;
property2:value;
…
}
…
</style>
3、使用标记链接外部样式表
外部样式表是使用一个单独的文件保存样式规则，扩展名为“.css”，需要使用样式表的HTML文件链接样式表文件。
链接样式表使用标签，此标签作为的子标签使用，指明当前HTML页面和链接的样式表之间的关系。
其格式为：
<link href=“…” rel=“stylesheet” type=“text/css”/>
其中：
href 是外部样式表的路径，一般使用相对路径；
rel 指的是被链接的文件的类型，stylesheet表示被链接的是CSS文件；
type指的是被链接的文件的内容类型；
四、 CSS常用选择器
1、元素选择器
• 元素选择器就是元素自身，定义时直接使用元素标签名称。
• 如定义段落样式，可以选择 p 元素的名称，即把 p 作为选择器。
例如：
p、h1、form、table、html、able{color:green;}
html{ /*或者写成 body 也可以*/
background-color: yellow; /*背景颜色*/
}
h1{
background-color: lawngreen;
color:red; /*字体颜色*/
font-size: 50px; /*字体大小*/
font-family: 宋体; /*字体类型*/
}
table{
border:1px solid red;/*线宽 实心线 线的颜色*/
background-color: lawngreen;
color: dodgerblue;
}
2、通用选择器
• 通用选择器是一种特殊的选择器，用“ * ”表示，CSS 中的通用选择器与 Windows 通配符“ * ”具有相似的功能，可以定义所有元素的样式。
如：
*{font-size:12px; /*定义文档中所有字体大小为12像素*/}
*{font-family: 微软雅黑; /*改变字体类型*/}
代码解释：CSS属性作用域遵循的原则：就近原则（即：如果在小范围中作了修改也是可变的）
• 上面的样式将会影响文档中所有元素，即文档中所有字体大小都被定义为12像素。使用通用选择器时要慎重，一般常用于定义文档中各种元素的共同属性，如字号、字体等。
3、分组选择器
• 可以对选择器进行分组，被分组的选择器就可以共享相同的声明。用逗号将需要分组的选择器隔开。
如：
h1,h2,h3,h4,h5,h6{color:green;}
代码解释：对所有的标题元素进行了分组，所有的标题元素都是绿色的。
4、包含选择器
包含选择器是根据元素在其位置的上下文关系来定义样式，也称后代选择器。
如在下面代码中，希望列表中的 strong 元素变为斜体字，而不是默认的粗体字。
<p><strong>粗体字</strong></p>
<ol>
<li><strong>斜体字</strong></li>
<li>正常字体</li>
</ol>
可以定义如下派生选择器，这样只有 li 元素中的 strong 元素样式为斜体字。
li strong{font-style:italic;font-weight:normal;}
5、 id选择器（精确定位）
• id 选择器使用元素的 id 属性值为元素指定样式，id 选择器必须在元素的 id 属性值前加 “ # ”。
#red{color:blue}
#green{color:yellow}
代码解释：#id名字{xx:xx......}
• 在下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
• id选择器常用于建立包含选择器。
例如：
#sidebar p{font-style:italic;text-align:right;}
代码解释：在名为 sidebar 的 id 选择器里包含 p 标签。
6、类选择器
• 类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
• 和id选择器一样，类选择器也常常被用作派生选择器。
例如：
.one td{color:#f60;background:#666;}
代码解释： .类名(即class的命名){......}
类名为 one 的元素内部的表格单元格都会以灰色背景显示橙色文字
7、子元素选择器
• 子元素选择器只能选择作为某元素的子元素声明样式，子选择器使用 “>” 号。
•如希望选择只作为h1元素的子元素strong，可以这样写：
h1>strong{color:red;}
代码解释：这个规则会把下面代码中第一个h1下面的strong元素变为红色，但是第二个strong不受影响。
实例：
<h1>这是<strong>非常</strong>重要的</h1>
<h1>这个<em>已经<strong>非常</strong></em>重要了</h1>
小总结：
1.元素选择器 ：html{}
2.统配符 选择器 ： *{}
3. 分组选择器 ：h1，h2{}
4. 包含选择器 ：li strong {}
5. id 选择器 ：#id_name{}
6. 类选择器 ：.class{}
7.子元素选择器 ：h1 > strong{}
注意： 4，和 7 的区别 ： 子元素选择器 只对 子元素起作用 而 包含选择器 对包含在里面的子元素 和 子孙元素都起作用
总结之前学过的相关样式属性：
text-align:对齐方式 其值有：center、right、left
boder:边框线
width:宽度
height:宽度
rowspan、colspan: table里面的跨行和跨列
练习：
（1）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>诗词</title>
<style>
h3{
color: red;
font-family: 宋体;
text-align:center;
}
h4{
color: mediumblue;
font-family:华文楷体;
text-align:center;
}
</style>
</head>
<body>
<h3>黄鹤楼送孟浩然之广陵</h3>
<h4><i>故人西辞黄鹤楼，</i></h4>
<h4><i>烟花三月下扬州。</i></h4>
<h4><i>孤帆远影碧空尽，</i></h4>
<h4><i>惟见长江天际流。</i></h4>
</body>
</html>
效果如下：
（2）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20191015</title>
<style>
h2{
color: #508047;
font-family: 隶书;
}
a{
color: darkorange;
font-family: 隶书;
}
</style>
</head>
<body>
<h2>这是正文中的字体</h2>
<h2>这是段落中的文字，会<br>继承正文字体的样式</h2>
<a href="https://v.qq.com/">这是腾讯视频</a>
<br>
<a href="https://www.sina.com.cn/">这是微博</a>
</body>
</html>
效果如下：
30万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
