CSS之基础知识开篇（一）

作者: 莫失丿莫忘 | 来源:发表于2017-05-15 16:33 被阅读40次

1. CSS的组成

css 样式由选择符和声明组成，而声明又由属性和值组成。

选择符{属性:值}:
p{color:red;}

1.1 选择符（选择器）
选择符：又称选择器，指明网页中要应用样式规则的元素。
1.2 声明(样式)
声明：在英文大括号“｛｝”中的的就是声明。
属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：

p{
font-size:12px;
color:black;
}

2. CSS的形式

从CSS 样式代码插入的形式来看基本可以分为内联式、嵌入式和外部式三种。

2.1 行内式css样式
把css代码直接写在现有的HTML标签中，如下面代码：

<p style="color:red">这里文字是红色。</p>

css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：

<p style="color:red;font-size:12px">这里文字是红色。</p>

2.2内嵌式css样式，
就是可以把css样式代码写在head标签里的<style type="text/css"></style>标签之间。如下面代码实现把<span>标签中的文字设置为红色：

<style type="text/css">
span{
color:red;
}
</style>

2.3 外链式css样式
写在单独的一个css文件中,外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

<link href="base.css" rel="stylesheet" type="text/css" />

注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
4、HTML跟CSS文件放在同一级才用 href="base.css" ，如果HTML文件放在另一个文件夹里，就要用href="../base.css" ,如果CSS文件也放在rec的文件夹里，就要用href="../rec/base.css"，其中 .../表示上一级的意思，就是CSS文件相对于HTML文件存放的位置。

3. CSS选择器

页面上的标签越多，效率越低

3.1 标签选择器

标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。
例如下面代码：

p{font-size:12px;line-height:1.6em;}
//为p标签设置12px字号，行间距设置1.6em的样式。

3.1.1 标签选择器的特点

1）所有的标签都可以是选择器：如ul、li、label、dt、dl、input
2）无论包裹多少层，都能选择上，并设置相应的属性
3 )具有共性，标签选择器选择上了。影响的就是所有。
3.2类选择器

“.”就是类的符号。类的英语叫做class。类选择器在css样式编码中是最常用到的。
所谓的类，就是class属性，class属性和id非常相似
语法：

.类选器名称{
css样式代码;
}

3.2.1 类选择器的特点

1） class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
2）同一个标签可以同时携带多个类。

3.3 ID选择器

3.3.1 ID选择器的特点

任何的HTML标签都可以有id属性。表示这个标签的名字。
这个标签的名字，可以任取，但是：
1）只能有字母、数字、下划线
2）必须以字母开头
3）不能和标签同名。比如id不能叫做body、img、a

3.3.2 类和ID选择器的区别

1、ID选择器为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
3、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
4、一般类名是供CSS设置样式时使用，ID是供JS设置界面交互时使用。类名可以是重复的，但是ID只有一个，唯一的，不能重复。
5、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
3.4 包含(后代)选择器

后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。
加入空格用于选择指定标签元素下的后辈元素，表示后代等级，是祖先结构：老----小，远-----亲：如爷爷-儿子-孙子
用法：

<style type="text/css">
    .div1 p{
             color:red;
              }
   </style>

3.4.1 后代选择器与子选择器的区别

1，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代
2，后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
3.5 子选择器（儿子选择器）

只能选择儿子辈的选择器
IE7开始兼容，IE6不兼容。
用法：

 div>p{
       color:red;
}

div的儿子p和div的后代p的截然不同。
div>p能够选择:

<div>
        <p>我是div的儿子</p>
  </div>

不能选择:


    1.        <div>
    2.               <ul>
    3.                      <li>
    4.                             <p>我是div的重孙子</p>
    5.                      </li>
    6.               </ul>
    7.        </div>

3.6 通用选择器

通用选择器是功能最强大的选择器，它使用一个通配符（*）指定，它的作用是匹配html中任意标签元素，一般网页会有默认的间距，这时就需要如下设置：

 * {
margin:0;
padding:0
}
//内边距外边距都设为0,为0的都不用加单位

3.7 伪类选择符

它允许给html不存在的标签设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
这行代码会使被<a></a>标签包裹的文字内容中的“胆小如鼠”字体颜色在鼠标滑过时变为红色。

3.8 序选择器（也是伪类选择器）

选择第一个或最后一个
IE8开始兼容；IE6、7都不兼容
用法：
选择第1个li： ul li:first-child
first-child:选择同级别的第一个标签；当前元素li的父元素的第一个孩子
例：如下h1:first-child可以使标题变红；但是p:first-child不能使标题1或段落1变红，因为要满足既是P的父元素的第一个孩子，还要满足这个孩子是P的p元素才能变红。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 60px;
        }
        div   h1:first-child{
            color: red;
        }
      /*div   p:first-child{*/
            /*color: red;*/
        /*}
        段落1不变红*/

    </style>
</head>
<body>
<div>
    <h1>标题</h1>
    <h1>标题2</h1>
    <p>段落1</p>
    <p>段落2</p>
</div>
</body>
</html>

选择最后一个1i：ul li:last-child

3.9 相邻选择器（下一个兄弟选择器）

+表示选择下一个兄弟

    1.        <style type="text/css">
    2.               h3+p{
    3.                      color:red;
    4.               }
    5.        </style>
//选择上的是h3元素后面紧挨着的第一个p兄弟。

3.10 并集选择器（分组选择器）

用逗号(,)就表示并集。当你想为html中多个标签元素设置同一个样式时，可以使用并集选择器。

    1. h3,li{
    2.        color:red;
    3. }
//选择H3和li的标签

3.11 交集选择器

用法：
p.special
选择的元素是同时满足两个条件：必须是h3标签，又必须是special为类名的h3标签。
交集选择器没有空格。

4.继承性

4.1 什么是继承性？

CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。也就是说有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。

4.2 哪些属性能继承？

color、 text-开头的、line-开头的、font-开头的。这些关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承。如border:1px solid red;

4.3 根据权值来判断使用哪个css样式

浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

下面是权值的规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /权值为1/

p span{color:green;} /权值为1+1=2/

.warning{color:white;} /权值为10/

p span.warning{color:purple;} /权值为1+1+10=12/

footer .note p{color:yellow;} /权值为100+10+1=111/

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低

5. 层叠性

5.1 什么是层叠性？

层叠性就是CSS处理冲突的能力.所有的权重计算，没有任何兼容问题
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
一个文本设置同样的样式，有的属性就需要被层叠掉哪些，我们要比较权重，分别数一下id选择器。类选择器，标签选择器的数量来确定。这三个越靠前的数目越大说明越优先，如果id选择器一样就比较类选择器的个数。

5.2 具体权重比较规则如下：

1.即统计权重id的数量（100）>类的数量（10）>标签的数量（1）。可以按稀有程度来记顺序。
2.如果权重也一样的话，那么写在最后面的就是网页的显示结果。
3.如果不是针对本身得来的样式，而是通过继承的，那么不用比直接PASS掉，为0。
4.如果属性都是继承来的都为0的话，那么看谁描述的后代选择器跟该文本比较亲，更能准确的找到，那么网页上的样式就显示谁的。
CSS层叠式的解题思路：先看选没选中，没选中PASS，然后看权重，权重一样谁后谁先。都没选中，谁近谁先。如果都没选中又一样近的话也要看权重，权重又一样，谁后谁先。在一样近又一样重的前提下，用！important是可以提升权重的（并集选择器的话，两组要分别拆开比较）
例子：
我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。

5.3 css样式优先级：

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

5.4 重要性

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
来给一个属性提高权重。这个属性的权重就是无穷大。
!important提升的是一个属性的权重，而不是一个选择器，其他属性不会优先

6. CSS的排版样式

6.1文字排版

用css样式为网页中的文字设置字体、字号、颜色等样式属性。

6.1.1文字排版--字体

font-family:"宋体";
//微软雅黑：Micrsoft Yahei
//宋体：SimSun

这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）

6.1.2文字排版--字号、颜色

body{font-size:12px;color:#666}
//12像素是网页上能显示的最小的字体

6.1.3文字排版--加粗

p span{font-weight:bold;}

6.1.4文字排版--斜体

p a{font-style:italic;}

6.1.5文字排版--下划线

p a{text-decoration:underline;}

6.1.6文字排版--删除线

p a{text-decoration:line-through;}

6.2段落排版

6.2.1段落排版--缩进

p{text-indent:2em;}
//段落开头空两个文字，em是相对长度单位。相对于当前对象内文本的字体尺寸。也就是说首行缩进的两个空格大小是当前字体默认的尺寸大小。

6.2.2段落排版--行间距

p{line-height:1.5em;}

6.2.3段落排版--字间距(中文）

h1{
letter-spacing:50px;
}
//注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。

6.2.3段落排版--字母间距（英文）

h1{
word-spacing:50px;
//英文单词之间的间距
}

CSS之基础知识开篇（一）

1. CSS的组成

2. CSS的形式

3. CSS选择器

3.1 标签选择器

3.1.1 标签选择器的特点

3.2类选择器

3.2.1 类选择器的特点

3.3 ID选择器

3.3.1 ID选择器的特点

3.3.2 类和ID选择器的区别

3.4 包含(后代)选择器

3.4.1 后代选择器与子选择器的区别

3.5 子选择器（ 儿子选择器）

3.6 通用选择器

3.7 伪类选择符

3.8 序选择器（也是伪类选择器）

3.9 相邻选择器（下一个兄弟选择器）

3.10 并集选择器（分组选择器）

3.11 交集选择器

4.继承性

4.1 什么是继承性？

4.2 哪些属性能继承？

4.3 根据权值来判断使用哪个css样式