整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、CSS概述
CSS是Cascading Style Sheets的简称，中文称为层叠样式表，对html标签的渲染和布局
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
二、CSS的四种引入方式
1.行内式
行内式是在标记的style属性中设定CSS样式这种方式没有体现出CSS的优势，不推荐使用。
2.内嵌式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签中。
3.链接式
建一个index.css的文件存放样式，在主页面中把index.css引入。
4.导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>
标记也是写在<head>标记中。使用格式 @import "index.css"
注意：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会像导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。所以还是推荐用链接式。。。。。。。。。。。
三、注意嵌套规则
五、CSS选择器
1.基础选择器
“选择器”指明了{}中的“样式”的作用对象，也就是"样式"作用与网页中的哪些元素
1.通用元素选择器 *: 所有的标签都变色
2.标签选择器：匹配所有使用p标签的样式 p{color:red}
3.id选择器：匹配指定的标签 #p2{color:red}
4.class类选择器：谁指定class谁的变色，可选多个 .c1{color:red} 或者 div.c1{color:red}
可以对块级标签设置长宽
不可以对内联标签设长宽（它只会根据他的文字大小来变）
2.组合选择器
1.后代选择器 (不分层级，只让p标签变色) .c2 p{color:red}
2.子代选择器（只在儿子层找） .c2>p{color:red}
3.多元素选择器：同时匹配所有指定的元素 .div,p{color:red} 或者
.c2 .c3,.c2~.c3{
color: red;
background-color: green;
font-size: 15px;
}
3.属性选择器
1. E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。 ） 比如“[cheacked]”。以下同。） p[title] { color:#f00; }
2.E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
3.E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }
4.E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}
5.E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
6.E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
4.伪类
anchor伪类：专用于控制链接的显示效果
before after伪类
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
例：p:before{content:"hello";color:red;display: block;}
5.CSS优先级和继承
css的继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。
此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
、标签选择器
li{color: blue; font-size: 35px;}
选择标签名为li的元素
二、id选择器
#two{ color: red; }
#two选择的是id为two的元素
三、class选择器
.ls{color: green;}
.ls选择的是class为ls的元素
四、交叉选择器
p.ls{ color: purple;}
p.ls选择的是标签是p，并且class是ls的元素
注意：交叉选择器中间没有空格，即p和.ls之间没有空格
五、子代选择器
li span{color: orange;font-size: 50px; }
li span选择的是li标签里面的span标签
注意：子代选择器中间有空格，即li 和span 之间有空格
六、群选择器
.ls,span{ color: yellow; }
.ls,span选择的是class为ls的标签和标签为span的元素
七、通用选择器
*{ color: yellow; }
选择HTML文档body内的所有标签
例：1 div.box p,li 表示class为box的div标签中的p标签和li标签
<div class="box" >
<p></p>
<li></li>
</div>
对带有指定属性的 HTML 元素设置样式。
ps：这个属性你可以自定义，随便啦，想写什么写什么。
eg:
vue中的scoped作用域属性就是用它来实现的。
在template模板中给style标签加上scoped属性就可以实现不同template页面其样式互不干扰
当然，属性选择器远远不止这些：
我们可以给相同的属性不同的值定义不同的样式
还可以向正则表达式那样，给属性值开头不同，结尾不同，中间含义不同分别设置不同的样式！
input[attr^=a] ------ 属性值【开头】为【“a”】的元素
input[attr$=a] ------ 属性值【结尾】为【“a”】的元素
input[attr*=a] ------ 属性值中含有【“a”】的元素
ps: 我属性前面的input是标签选择器的意思，你也可以用类名，id, 标签什么的都可以!
就像这样：
还有就是我上面css中写属性选择器中，我把属性的中用引号包裹了，事实上，你带不带引号都对！看个人习惯!
选择第一个子元素：
父元素>子元素:first-child{}
ps：如果有很多父元素，要选择指定的用选择器就行 指定父元素>一堆子元素：first-child
选择最后一个子元素：
父元素>子元素:last-child{}
用法相同。
匹配属于父元素中唯一子元素的元素。
要匹配的子元素:only-child {}
当你使用这个选择器的时候，它会找一个自己是不是独生子女（父元素没有出了自已以外的其它子元素了），如果是独生子女，那就匹配成功，不是，不好意思，匹配失败！
匹配属于其父元素的特定类型的唯一子元素的每个元素。
要指定的子元素类型类型:only-of-type{}
这个真的不是很好理解，和only-child不同（only-child选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。），在伪类选择器前面是要指定的子元素类型, 然后当它匹配时候，会找自己在父元素里面是不是独一份（假设我们把标签比作男女的话，它的父亲有很多个孩子，但是其它的都是男孩，只有它是女孩），如果是，匹配成功，否则匹配失败
eg:
ps：大家看了这个选择器，现在可以把它忘掉了，因为讲道理来说，既然它是父元素里的唯一此标签子元素，我们完全可以通过: 父元素>此子元素标签 直接就把它定位了！完全不需要这么麻烦！
子元素列表 :nth-child(要选择的第几个)
需要注意一点就是，他不是从0开始选择，比如你要选择第一个子元素，那么
子元素列表 :nth-child(1)即可
子元素列表:nth-last-child((要选择的倒数第几个)
同 :nth-child类似，它也是从1开始的，nth-last-child(1)代表倒数第一个，也就是最后一个！
eg:
子元素列表：nth-child(odd) 匹配下标是奇数的子元素 子元素列表：nth-child(even) 匹配下标是偶数的子元素
嗯，可以用它来实现经典的隔行变色是在恰当不过的了！
除此之外，:nth-child里面还可以写一些计算。
:nth-child(数字n) 表示匹配该数字的倍数的意思，比如nth-child(3n)就表示匹配该元素下的所有3的倍数：
eg:
:nth-child(数字n) ,这个数字还可以进行简单的计算，比如，如果我写 :nth-child(3n-1)，则会匹配到下标分别为 2,5,8的子元素，因为3的一倍为3,3减1得到下标2的子元素, 3的2倍为6, 6减1得到下标5的子元素。
子元素集合:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
好吧，官方描述可能坑，我们用例子来理解：
不同于 :nth-child(n) (选取父元素的第 N 个子元素，不论元素的类型。n 可以是数字（从 1 开始），关键词（even/odd）,或者公式（3n + 1, 2n + 1...）)
:nth-of-type(n)与 :nth-child(n) 的区别就在于 :nth-child(n) 不论元素的类型，而nth-of-type(2)选取父元素的第 N 个类型为 你所知道 的子元素。
上图中，父元素有2个span标签，第一个span标签在父元素的子元素集合中下标为2的位置，第二个span在父元素的子元素集合中下标为3的位置
我们使用 span:nth-child(2) 会选中第一个sapn标签，因为下标为1的子元素是p标签，
但是使用 span:nth-of-type(2) 则会选中第二个span标签，因为在该父元素的子元素集合中，第二个span标签是依据该父元素的子元素集合中的span标签集合中的第二个！！！！！！！
子元素集合:nth-last-of-type(n) n 可以是数字、关键词或公式。
这个用法同 :nth-of-type(n) 保持一致，只不过它是从倒数开始。
比如 span:nth-last-of-type(2)意思就是说选择父元素的倒数第二个span标签。
eg:
:focus {}
表示该表单光标获得焦点时触发。
:
:enabled{} 选择启用状态的元素
凡是没有设置属性为disabled的表单都会匹配到，disabled为禁用该表单的意思
与:enabled{} 相对的，:disabled{}为选择 选择禁用状态的元素 例如：<input type="text" disabled />
:valid {} 验证输入合法时触发
与:valid {} 相对于，:invalid{}选择器在匹配不合法时触发,这里就不写例子了
:before
在【当前元素】之前插入【额外内容】 ，需要配合【content】一起
使用。【content】的值就是插入的内容，这个和:after是很常用的，因为可以把一个标签当三个标签来用，大网站经常用它来提示性能。
同:before{}对应，:after{}会在元素之后插入内容，同样，也需要配合content来使用
::selection 指鼠标选中“网页文本”状态的设定。
默认，我们的浏览器选中网页文本效果都是蓝色背景，白色文字：
我们可以通过::selection来更改默认样式:
ps: 记着是两个冒号！！！！！ ::selection
好了，差不多就是这些，要是后面还有比较重要的我在补充！
*请认真填写需求信息，我们会在24小时内与您取得联系。
