======CSS

CSS: 层叠样式表，用于润饰、渲染网页的一门技术

-----在HTML中引入CSS

形式1：通过style属性引入css（不举荐）
1.通过标签上的style属性给div设置款式边框:2px solid red字体大小:26px背景色彩为:pink--><div style="border:2px solid red;font-size:26px; background:pink;">这是一个div...</div>

因为下面这种形式是将css款式代码，间接写在标签上的style属性外部，如果属性太多，容易造成页面构造的凌乱，不利于前期的保护。
将款式代码写在标签上，款式代码只对以后标签失效，代码无奈复用！ 并且应用这种形式无奈将html标签和css款式进行拆散! 因而不举荐应用这种形式！（这种通过style属性增加的款式，叫做行内款式/内 联款式）

形式2：通过style标签引入css

在head标签外部能够增加一个style标签，在style标签外部能够间接书写css款式 这种形式是将所有的css款式代码集中在一个style标签外部对立治理，这种形式 不会造成页面构造的凌乱，并且能够实现代码的复用！ 初步的实现了将html标签代码和css款式代码进行了拆散!

<!-- 2.通过style标签给span设置款式如下：边框: 2px solid green字体大小: 30px字体加粗--><head><meta charset="utf-8"><style type="text/css">    /* ****** CSS款式 ****** */span{ /* 为以后html中的所有span标签设置款式 */border:2px solid green;font-size:30px;font-weight:bolder; /* bold/bolder */}</style></head>
形式3：通过link链接引入内部的css文件

在head标签外部，通过一个link标签能够引入内部的CSS文件 这种形式是将所有的css代码集中在一个独自的css文件中对立治理，真正的实现 了将css代码和html代码的拆散，实现了代码的复用。 代码示例：html中引入demo.css文件

<!-- 3.通过link标签引入内部的css文件，为p元素设置款式如下：边框: 2px solid blue;字体色彩:red字体设置为华文琥珀设置首行文本缩进50px--><!-- 引入demo.css文件(中的款式) --><link rel="stylesheet" href="demo.css" />@charset "UTF-8";p{border: 2px solid blue;color: red;font-family: "华文琥珀";text-indent: 50px;}

-----CSS选择器
css选择器就是可能在html中帮忙咱们选中元素进行润饰的一门技术

标签名选择器

通过元素名称(或标签名称)选中指定名称的所有标签 格局: 元素名/标签名{ css款式... }

将所有span标签的背景色彩设置为#efbdef, 设置字体大小为22px，字体加粗；*/span{ /* 选中所有的span元素 */background-color:#efbdef;font-size: 22px;font-weight: bolder;}
class选择器

能够为元素增加一个通用的属性 -- class，通过class属性为元素设置所属的组， class值雷同的元素则为一组。通过class值能够选中这一组的元素，为元素增加样 式。 格局：.class值{ css款式... }

1)将所有的span（然而不包含div和p标签下的span）的背景色彩设置为#faf77b，边框改为2px solid cyan；(2)将div下的span和内容为"span111"的span，背景色彩设置为#5eff1e、字体色彩设置#ec0e7e；*/.s1{ /* 选中所有class值为s1的元素 */background: #faf77b;border: 2px solid cyan;}.s2{ /* 选中所有class值为s2的元素 */background: #5eff1e;color: #ec0e7e;}一个元素也能够设置多个class值，多个class值两头用空格分隔，`<span class="s1 s2" >span111</span>`示意以后元素同时属于多个分组，多个分组上设置的款式也会同时作用在以后元 素上。 如果多个分组设置了雷同的款式（然而值不一样），款式会发生冲突，写在前面 的款式会笼罩后面的款式！
id选择器

通过标签上通用的属性id，能够为标签设置一个举世无双的编号（id值应该是唯 一的），通过id值能够惟一的选中一个元素。 格局：#id值{ css款式 }

20px。*/#p1{ /* 选中id值为p1的元素 */font-size:24px;color: #a06649;text-indent: 20px;}<p id="p1">这是一个p元素!!!</p>
后辈选择器

选中指定元素外部的指定后辈元素 格局: 先人 后辈{ css款式... }

pink;*/p span{ /* 匹配所有p元素外部的所有span元素 */font-size:18px;color: red;background: pink;}/* p,span{} 匹配所有的p元素和所有的span元素 */<p id="p1">这是一个p元素!!!<span>这是一个span元素!!!</span></p>
属性选择器
为所有的文本输入框，设置背景色彩为#FF7CCC、字体大小22px，首行文本缩进15px；*/input[type='text']{ /* 匹配所有的input并且type值为text的元素 */background: #FF7CCC;font-size: 22px;text-indent: 15px;}input[type='text'][name='email']{/* 选中所有的input并且type值为text、并且name为email的元素 */background : yellow;}