======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;
}
发表回复