CSS基础

1.CSS选择器

选择器分为基础选择器和复合选择器两个大类。

• 基础选择器是由单个选择器组成的
• 包括：标签选择器、类选择器、id选择器和通配符选择器

标签选择器：

        就是选中整个标签，改变其样式

p{
 color:red;
}

div{
 color:red;
}

类选择器（Class选择器） ：

<!-- 给标签一个Class名字，用.名字的方式来选中标签 --!>
<p class="pStyle">

.pStyle{
    color:red;
}

<!-- 多类名，一个标签里的class里有多个样式名字，应用多个样式。多个类名直接用空格分开 --!>

<p class="pStyle box">

.box{
    width:10px;
}

 ID选择器：

/*
    给标签一个id名字，用#名字的方式来选中样式 
*/
#pStyle{
  color:red;
}

<p id="pStyle">

通配符选择器：

* {
 color:red;
}

/*这样写所有的标签会自动应用此样式*/

 ID选择器和Class选择器的区别：id是一对一的，样式不能被其他标签引用。Class可以引用多个。

所以日常开发中，样式都是class选择器，id选择器通常用来搭配JS使用。

CSS字体属性

1、使用 font-family 声明字体系列，可以写中文，可以设置多个字体，用逗号隔开。浏览器加载时会依次判断该用户有没有这个字体，没有就使用默认字体。

<style>
    h1{
        font-family: "Microsoft YaHei UI";
    }

    h2{
        font-family: "微软雅黑",serif;
    }
</style>

2、font-size 设置字体的大小，单位是px。

3、font-weight 设置字体是否加粗

4、font-style 设置文字的风格（斜体）

5、字体的复合属性写法，简写提高效率

 h1{
        /*font-style: italic;*/
        /*font-weight: 700;*/
        /*font-size: 18px;*/
        /*font-family: "Microsoft YaHei UI";*/
        /*
            等价于下面简写
            font: font-style font-weight font-size/line/height font-family
            简写时必须按照这个顺序写，如果有不需要设置的属性可以不写，但font-size和font-family 是必填
        */
        font: italic 700 16px "Microsoft YaHei";
    }

CSS文本属性

 CSS引入方式

• 内联样式 —— 在标签里写样式
• 内部样式 —— 写在style标签里，控制单个页面的样式
• 外部样式 —— 将CSS抽取出来，单独成一个文件，通过link的引入，可以复用控制多个页面