啊喽哈~好久不见，懒癌发作了，紧急抢救了两天，现在大病初愈就来跟大家唠嗑了@-@。
今天准备和大家讲讲前端界的美妆博主，CSS，但是其内容实在太多，很多知识点单独都可以写成一篇文章，由于文章目的仅仅是分享我的学习过程，所以内容上可能对理解力不高的新手有些抽象，但是如果有机会的话，我有空了，也会找机会把每个小点都写些代码展开讲讲。CSS系列文章我计划用三次讲完，今天就和大家讲讲CSS起源、CSS结构、选择器以及字体和文本样式，这些内容都是学习CSS最先应该掌握的内容，也希望大家能对CSS是做什么的有一定的了解。
CSS全称Cascading Style Sheet,中文译为串样式列表，层叠样式表或阶层式样式表，是为网页添加样式的代码，既为网页化妆，之前讲的HTML我就提到过光HTML他很丑的。CSS和HTML不同，他不是编程语言，也不是标记语言，是一种样式表语言。为了理解他是做什么，讲讲他的由来是最简单的，
就像之前讲HTML的发展一样，在最开始的时候是不存在CSS的，但是为了页面能够更加美观，就出现了各种具备特殊样式的元素，如i是斜体，strong是加粗等。但是很多人都发现仅仅用元素来实现页面的装饰，那么最后页面的HTML代码就会非常的臃肿，所以这时各个浏览器都有自己的样式语言但都不统一。1994年，哈肯·维姆·莱和伯特·波斯合作设计了CSS，1996年的时候发布了CSS1。1997年W3C成立了CSS工作组，1998年发布了CSS2，之后就如HTML讲过的2006-2009广泛使用DIV+CSS的布局方法。之后因为CSS内容太多，分成了不同模块，每一个模块都是css2中额外增加的功能，既已经没有严格意义上的CSS3，而是已经分为不同功能模块开始更新。最早的模块更新于2011年发布了CSS 3 Color Module。
和HTML一样，先讲讲CSS的基本结构吧，CSS是用选择器选中要装饰的元素然后写入一系列的属性以及对应的属性值，既选择器{属性：属性值}，如.home{color:red;}
css有三种编写规则，既它可以有不同的方式存在于一个网页的代码中。首先是内联样式，既在HTML的元素中在其style属性上直接添加CSS，如
<head>
<style>
div:{
color:red;
font-size:20px;
}
</style>
</head>第三种方式是外部样式表，这种方法是在head的link元素中添加外部已经写好的css文件，如
需要注意的是css文件中也可以引入其他的css文件，通过@import url(地址);引入，其中url可省为@import "地址"。
讲到这，讲讲HTML的link元素吧link是外部资源链接元素，规范了文档与外部资源的关系，通常在head元素中。也可以用于设置图标。其中rel属性指定链接类型，常见的链接类型可查看文档 其中icon站点图标，stylesheet css样式href 此属性指定被链接资源的URL。URL可以是绝对的，也可以是相对的。dns-prefetch 提示浏览器资源需要在用户点击链接之前进行dns查询和协议握手。
和HTML一样，在开始讲具体内容前，我们讲讲浏览器的渲染流程。首先加载相应的HTML文件，然后开始由上到下开始解析HTML，将body内的元素解析为dom树形结构，与此同时（注意是同时发生没有先后的等待）加载CSS，最后附加css到每个元素上形成渲染树，最后渲染出来的就是我们看到的页面了。
了解完这些我们可以开始讲CSS的具体内容啦！
我们先讲CSS的选择器，这个东西呢，是告诉电脑我们要装饰的是那个元素，就像化妆，眼睫毛怎么化，眉毛怎么化一样，在开始装饰之前我们要先告诉人家要化在哪里。注意，这个听起来简单，但是内容对于新手是有些难以消化的，但是不用担心，常用的还是很简单滴。选择器包括通用选择器，元素选择器，类选择器，id选择器，属性选择器，组合，伪类和伪元素。
其中通用选择器最简单了，就是*，使用这个选择器可以选中页面的所有元素，也就是底妆吧（我不会化妆感觉就是整个脸铺上去那种），一般网页上这么做是为了重置页面元素自带的样式，避免出现HTML自带样式导致的bug，body就只带了8px的边距。如
- {
margin：0；
padding：0；
}
元素选择器，类选择器，id选择器都统称为简单选择器，其中元素选择器就是使用元素进行定位，如span{color:red;},类选择器是在元素中使用class进行命名，在css中使用英文的.加上类名就能选中，如.home{color:red;}；id选择器这是给元素指定id名,注意id不能重复是常识，虽然重复不会出错，但是会显得很门外汉，写法是#加上id名，如#BengSang{color:red;}.
属性选择器就和名字一样是通过元素的属性特征来定位的，最常用的是[属性]：{colorLred;}的写法和[属性=属性值]：{color：red}的写法。后面将讲到的几种知道有这种写法需要用到的时候能想起来就行，具体可以查略mdn或w3c文档,还有
[属性*=属性值]属性包含某一个值
[属性^=属性值]属性以某开头
[属性$=属性值]属性以某值结尾
[属性|=属性值]属性值等于某值或者以某值开头后紧跟连接符—
[属性~=属性值]属性值包含某值，如果有其他值必须以空格和该值分开
这几种写法。
后代选择器就和名字一样，选中包含于某一元素（大的是父亲，被包含的是儿子）的元素，又有两种写法，第一种是选中某元素包含的所有满足条件的后代，写法是父亲了儿子通过空格隔开，如div .home{color:red;}既选中div元素中所有类名为home的子元素；第二种是紧选中直接子代，既不包括孙子，虫孙，既第一层包含，儿子包含的就算满足条件也不会选中，写法是用>连接，如div > .home{color:red;}。
兄弟选择器和后代选择器同理，选的是同级的，既谁也没包含谁，都是兄弟（注意是在自己下面的才算兄弟，上面的不算）。他也分为两种写法，一种是相邻兄弟，既选中自己下面（注意是下面，上面的不算直接兄弟奥）符合条件的最近兄弟，写法是用+连接。如div + .home{color:red;};第二种是所有兄弟选择器，写法是用~连接，如div ~ .home{color:red;}。
选择器组顾名思义就是分组进行选中，他也是两种写法，区交集，写法是筛选紧挨着，如div.home{};并集则是用逗号连接，如a,div,.home{color:red;}。
伪类选择器，之所以这么称呼是因为他的写法前面都有一个：和类选择器很像。伪类选择器是选中处于特定状态的元素。又可以分为动态伪类、目标伪类、语言伪类、元素状态伪类、结构伪类、否定伪类。
其中最主要的是动态伪类，其他的有机会再展开讲讲。动态伪类包括:link,:hover,:visited,:focus,:active。其中:link、:visited只用于a元素，:focus还可以用于输入框，:hover和:active可以用于其他元素。
:link指a元素还从来没有访问过时，既从来没有点击过时，写法.home:link{color:red;}.
:visited是元素已经被访问过了；:hover是用户鼠标悬浮在该元素上时，:active是用户点下去还没有松手时，:focus是该元素处于焦点时，如输入框处于焦点时经常边框加粗。
需要注意的是，当对一个元素设置多个动态伪类时，hover必须放在:link和:visited后面才能完全生效不然可能出bug，:active必须放在:hover后面才能完全生效，所以建议顺序为 :link :visited :focus :hover :active。还有一点直接给a设置样式默认所有状态都是设置的样式。
最后是伪元素，伪元素与伪类的区别是，伪元素选中的是元素的某一个位置。其写法可以有一个:也可以有两个，但为了和伪类区分通常都写为两个。常用的伪元素有::first-line,::first-letter,::before,::after.
其中::first-line是指元素的首行文本，如span::first-line{font-size:8px;}就是选中span元素中的第一行文字；::first-letter选中的是第一个字母，中文则是第一个字；::before选中的是元素的前面，既在元素的前面添加样式，这么做类似于在元素前加一个div，但是这么做至少有两个好处，一是当要在多个元素前添加一个div做样式时，使用该伪元素，只需要添加对应的类就行了，而div需要重复添加div;第二方面是直接添加div如果换行会出现空格，而使用伪元素这不会存在。::after是在元素之后添加样式。和before同理。需要注意的是::before和::after选中时有一个特殊属性content必须写,就算是空的也要写。
如
.home::before{
content:"";
width:20px;
height:20px;
color:red;
}。
讲完选择器，文章的最后我们讲三个比较轻松的吧。颜色coloe,文本text和字体font。
其中color既设置选中元素的前景色，上面举的例子我已经大量用到了，需要注意的是，color有三种写法，第一种就是我上面用到的直接写英文单词，具体有哪些单词可以查看mdn的文档，但是单词是有限的肯定不能表示很多精确的颜色。第二种是使用rgb函数，函数的概念后面会讲，这里就认为是设置一个rgb的值就好了，相信学过美术的应该都知道rgb既red,greeen and blue，每一种颜色包括0-255不同的取值，所以写法为div:{color:rgb(255,255,255);}其中255,255,255为白色，而0,0,0为黑色。第三种写法是#加上6为16进制的数字，每两位代表上述一个颜色，正好是0~255.进制的概念大部分人都是知道的，由于篇幅，这里就有机会再和大家讲了。写法为div:{color:#112233},需要注意的是用十六进制写时，如果某一颜色的数字两位是相同的则可以只写一位，既刚刚的例子又可以写为div:{color:#123;}。
接着我们讲讲CSS中文本常用的设置。
text-decoration就和名字一样，用于对文本进行装饰，常见取值有none 无修饰（可以去除a属性的默认下划线）underline 下划线，overline 上划线，line-through 中划线（删除线）。
如div:{text-decoration:line-through；}。
text-transform用于设置文字的大小写转换，其中capitalize设置首字母大写，uppercase设置大写，lovercase小写，none无影响既清空样式。
text-indent设置文本的缩进大小，就像作文空两个一样，如div:{text-indent:20px};这里缩进的单位其实有好几种，后面的文章会讲到，这里知道是缩进就够了。
text-align定义行内内容如何相对他的块父元素对齐，既一个元素相对于他的父元素如何对齐摆放，常见取值为left,right.center中间显示.justify两端对齐。当两个div嵌套时，无法居中，因为text-align只是设置行内元素，而div是块级元素，此时display：inline-block。这里看不懂没关系，后面文章会详细解释行内元素块级元素的概念。注意div默认text-align:left 且text-align:justify 默认最后一行不生效，可以用text-align-last:justify。
letter-spacing和word-spacing，前者设置字母后者设置单词之间的间距，默认为0可以为负数。
最后我们再讲CSS中字体的常用属性。
font-size设置字体的大小，单位和text-indent一样有很多，后面的文章会讲到。font-size可以设置百分比，其相对的是父元素字体的大小。
font-family设置字体,可继承,继承的概念下篇文章马上会讲到，也可以通过@font-face指定可以下载的字体，这里可能会疑惑程序员还需要设计字体吗？其实一般都是美工交给我们，我们直接用就好了。同时浏览器会查看操作系统是否支持，如果没有就用默认字体，所以设置时常配置多个字体。
font-weight设置字体粗细，默认为400也可以写为normal，bold为有700，共有100到900不同重量级，也可以设置小数，1,1000但浏览器不一定支持。
font-style设置字体风格，其中italic和oblique两个都是斜体，不同点是italic是字体本身支持斜体，系统直接调用已有的斜体字，而oblique用于字体本身不支持斜体。
font-variant设置英文小写字母的显示方式，small-caps小写变大写但只显示小写的大小。
line-height设置一行文本行高，之前说div是文本撑起来的，准确的说是行高。两行文本基线之间的距离，也就是font-size+行距离。其中基线是双行本中倒数第二条线。line-height可以设置居中但是仅限于文本，因为文本本身的特性。
字体的最后说一下，字体的属性配置其实是有缩写的，既可以用一个属性配置完上面的所有属性，如font:italic small-caps 700 30px/30px serif;编写顺序为font-style font-variant font-weight font-size/line-height font-family其中前三个可以调换顺序也可以不写，后三个顺序固定，line-height可以不写。
讲完这些，本篇文章的内容就讲完啦，其实CSS内容真的非常非常的多，比如伪类中就还有很多都还没讲到，虽然后面文章还会讲到这部分的内容，但是CSS所有属性和值是不可能和大家讲完的，说这些主要是提醒大家，CSS重在掌握常见的内容，以及一些细节上可能导致bug的细节，其他不太重要的了解了解知道有这个东西，以后用到是就查略文档。记住mdn和w3c，前端学习还是以多练为主，有什么不知道的多查看文档。
最后的最后，祝大家每天都能开开心心，早日暴富，我是笨桑，我们下期再加啦，拜拜~
评论0
暂时没有评论