用这篇文章还总结一下自己在青训营开营以来通过直播课和自学学到的一些比较重要的css语法和技巧，可以供大家参考（学的不好请多多包涵~）

本人在之前自己摸索学习css时，浅尝辄止地观看了一些讲解css的视频后，就拿着别人的代码开始研究，一会改改这个属性、一会改改那个，最后确实可以一点点将别人的网页外观改成自己想要的样子。但这种做法效率十分低下，还是需要系统地学习css知识点后，并且自己一个字一个字地记录笔记，才能加深印象，做到心中有数运筹帷幄~

本文涵盖的知识点有：css选择器的类型和使用、一些常用的设置属性、元素的显示属性（块级、行内和行内块）、css三大特性。

小伙伴们学习的时候也要记得勤记笔记哦~

一、css选择器：

css选择器分为基础选择器复合选择器

1.基础选择器

（1）标签选择器

标签名{

}

会选中页面中所有此标签

<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
<div>女生</div>
<div>女生</div>
<style>
    p {
        color: green;
    }
</style>

（2）类选择器（开发最常用）

.类名{

}

  <ul>
        <li class="red">1</li>
        <li class="red">2</li>
        <li class="red">3</li>
        <li class="green">4</li>

    </ul>
    <style>
        .red {
            color: red;
        }

        .green {
            color: green;
        }
    </style>

案例:使用类选择器画盒子*

 <!-- div是盒子 -->
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
    <style>
        .red {
            width: 100px;
            height: 100px;
            /* 颜色用背景颜色 */
            background-color: red;
        }

        .green {
            width: 100px;
            height: 100px;
            background-color: green;

        }
    </style>

多类名

在class里用空格隔开多个类名

<p class="font35 red">刘德华</p>
    <style>
        .font35 {
            font-size: 35px;
        }

        .red {
            color: red;
        }
    </style>
</body>

（3) id选择器

只能调用一次，别人切勿使用

一般和js搭配使用

#id名{

}

(4) 通配符选择器

一般放在css代码的最前面，用于清除所有元素的内外边距，保持网页布局的适配性

margin:0;

padding:0;

}

2.复合选择器

（1）后代选择器（重要）

父子{

}

可多重复合
可以是任意基础选择器的复合

  <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>
    <ol class="two">
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>

    <style>
        ol li {
            color: pink;
        }

        ol li a {
            color: chartreuse;
            text-decoration: none;
        }

        .two li {
            color: aquamarine;
        }
    </style>

（2）子选择器

只能选亲儿子

父>儿子{

}

<div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
    <style>
        .nav>a {
            text-decoration: none;
        }
    </style>

（3）并集选择器（重要）

同时选择多组

元素1，元素2.......{

note:元素可以是任何形式的选择器

链接

熊二

熊三

.nav1>a, .nav2, .nav3, ul li { color: pink; text-decoration: none; }

（4）伪类选择器

@ 链接伪类

工作中链接的样式都需要单独指定

书写顺序：lvha

a:link//未访问的链接
a:visited//访问过的链接
a:hover//鼠标悬停
a:active//鼠标按下未松开

@:focus伪类选择器

选择获得光标的元素

一般针对input类的表单元素

<input type="text" value="输入">
    <hr>
    <input type="text" value="输入">
    <style>
        input {
            color: #c7bbbb;
        }

        input:focus {
            background-color: #a26363;
        }
    </style>

@:checked伪类选择器

 input:checked {
      width: 20px;
      height: 20px;
    }

二、css字体属性

1.字体系列font-family

带空格的要用引号包含

 font-family: 'Courier New', Courier, monospace;
 //整体设置常见的字体：
  body{
  font-family:'Microsoft YaHei',tahoma,arial,"Hiragino Sans GB;
  font-size:16px
  }

2.字体大小font-size

谷歌浏览器默认16px,但最好设置明确大小

标题标签比较特殊，字号需单独指定

3.字体粗细font-weight

属性：normal,bold,bolder,lighter,number

但是在实际开发最常用的是指定数字，例如：

normal=400
bold=700

font-weight:700;//加粗，不要加px

4.文字样式font-style

属性：

倾斜:italic
不斜：normal(使em,i标签变得不斜)

5.字体复合属性font

注意顺序

font-size 和 font-family不能省

body {
font:font-style font-weight font-size/1ine-height font-family;
｝
//line-height可省略

#三、 css文本属性

1.文本颜色color

属性：英文单词，#十六进制，RGB代码

十六进制是最常用的

color: #785be0;
font-size: 16px;

2.水平对齐方式text-align

属性：center,left,right

让盒子中的文字处于盒子的左、中、右

3.装饰文本text-decoration

属性：none,underline,overline,line-through

例：去掉超链接默认的下划线

a{
text-decoration:none;
color:black
}

4.文本缩进text-indent

通常用于段落的首行缩进

例：

 p {
            text-indent: 2em;
        }

5.行间距line-height

行间距=上间距+文字高度+下间距=第一行的最下沿+第二行的最下沿

 p {
            line-height: 36px;
        }

四、css样式表

根据css的三种书写位置的不同可以分为三种样式表：

1.行内样式表

权重较高

2.内部样式表

style标签

3.外部样式表

link标签，写在title下面

 <link rel="stylesheet" href="../css/music.css">

css的一些特性

在学习css时，必须要了解以下这些CSS的特点，才能让我们更好地利用他的这些特性写代码，而不是面对一些不符合预期的情况时一头雾水。

一.元素的显示模式

1.行内元素

一行可以显示好几个

span,strong,em，a等
宽度，高度设置无效
默认宽度为本身内容的宽度
只能容纳文本或其他行内元素
链接里面不能再放链接

但特殊情况下a里可以放块级元素，但需将a转换为块级元素

@ 元素显示模式转换

display:block;

display:inline;

display:inline-block;

 <a href="#">链接</a>

    <style>
        a {
            display: block;
            width: 100px;
            height: 100px;
            background-color: #c4a5a5;
            text-align: center;
            line-height: 100px;
        }
    </style>

2.块级元素

一个占一行

h,p,div,ul,ol,li等
高度，宽度，外边距，内边距都可以控制
宽度默认和父级元素一样宽
除**文字类标签（p,h)**外，其他的是一个盒子，里面可以放快寄或行内元素

3.行内块元素

img,input,td等
一行可以显示多个行内块元素，他们之间会有空白缝隙
可以设置宽度和高度
默认宽度为本身内容宽度

二.css三大特性

1.层叠性

同类型选择器造成样式冲突时后来者居上

2.继承性

子标签会继承父标签中的某些样式，如文本颜色和字号

text_,font_-,line-,color等样式

（1）行高的继承


    <div>
        我是儿子
    </div>

    <style>
        body {
            font: 17px/1.5 'Microsoft YaHei';
        }

        div {
            font-size: 20px;
        }
    </style>

一般这样写，可以根据文字大小自动调节行高

3.优先级

（1）

当一个元素被设置两次，且选择器类型不同时

根据下面这张权重表来比较得出优先级

 <div class="father">
        <p>我是儿子</p>
    </div>

    <style>
        body {
            font: 17px/1.5 'Microsoft YaHei';
            color: green;
        }

        .father {
            color: red;
        }

        p {
            color: pink;
        }
    </style>

最后颜色为粉色，因为

被直接选出来的优先级最高：如a已被浏览器单独指定样式，所以需程序员再手动指定

（2）复合选择器：权重叠加（注意是不进位加法，和二进制加法不一样）

学过数电的小伙伴会觉得有些类似于数电中比较器的思路~由高到低开始比

  <div class="father">
        <p class="son">我是儿子</p>
    </div>

    <style>
        body {
            font: 17px/1.5 'Microsoft YaHei';
            color: green;
        }

        .father {
            color: red;
        }

        .father p {
            color: pink;
        }

        .son {
            color: purple;
            font-size: 20px;
        }
    </style>

.father p的权重为11，.son的权重为10，所以最终为粉色

CSS知识点总结|青训营