带你熟练掌握 css 基础

Css 基础

文章目录

• Css 基础
• • 一、Css是什么
  • 二、基本语法规则
  • • 2.1 css的注释
    • 2.2 格式规范
  • 三、选择器的种类
  • 四、基础选择器
  • • 4.1 标签选择器
    • 4.2类选择器 （常用选择器）
    • 4.3 id 选择器
    • 4.4 通配符选择器
  • 五、复合选择器
  • • 5.1 后代选择器
    • 5.2 子选择器
    • 5.3 并集选择器
    • 5.4 伪类选择器
  • 六、字体属性
  • 七、文本属性
  • 八、背景属性
  • 九、圆角矩形
  • 十、元素的显示模式
  • 十一、盒模型
  • 十二、弹性布局

一、Css是什么

层叠样式表：同一个元素上可以应用多种样式。这些样式之间会产生叠加，从而实现页面变得更好看效果。

CSS 就是 “东方四大邪术” 之化妆术 .

东方四大邪术 :中国的ps，日本的化妆，泰国人妖，韩国整容

二、基本语法规则

选择器{
    N条声明
}

1、style标签本身放在页面的哪里都可以，一般放在head标签中

2、选择器是针对那个标签元素设置样式—（找谁）

3、{ }里面的值进行躯体设定。

2.1 css的注释

/*这是注释*/

快捷键：ctrl+/

2.2 格式规范

1、css不区分大小写，一般都是小写

2、如果属性由多个单词构成，使用 - 来作为分割—— font-size（脊柱命名法）

3、冒号后面带空格

4、选择器和‘{’ 之间带空格

三、选择器的种类

1、基础选择器：单个选择器构成

标签选择器，类选择器，id选择器，通配符选择器

2、符合选择器：把多种基础选择器综合运用起来

后带选择器，子选择器，并集选择器，伪类选择器

四、基础选择器

4.1 标签选择器

能够吧一类标签全都给选出来

<style>
        /*选出所有p标签，进行设置*/
        p {
            color: blue;
            font-size: 30px;
        }
</style>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <span>这是另一段文字</span> <br>
    <span>这是另一段文字</span>

优点：能快速为同一类型的标签都选择出来

缺点：不能差异化选择

4.2类选择器 （常用选择器）

可以选中一类元素，也可以进行差异设置

<style>
        /*选出所有p标签，进行设置*/
        p {
            color: blue;
            font-size: 30px;
        }
        /* css 中的类需要前面价格 . 后面是类名，这样就创造了一个类 */
        .green {
            color: green;
        }
    </style>
    <p>这是一段文字</p>
    <!-- 在标签中通过class属性引入类名 -->
    <p class="green">这是一段文字</p>
    <span>这是另一段文字</span> <br>
    <span>这是另一段文字</span>

1、优点：

• 差异化表示不同标签
• 一个类名可以被多个标签引入
• 一个标签也可以引入多个类名（同时也引用了多种样式）

<style>
        .red {
            background-color: red;
        }

        .box {
            /*设置范围，高度和宽度*/
            width: 200px;
            height: 150px;
        }

        .blue {
            background-color: blue;
        }
</style>
    <!--  一个类名可以被多个标签引入-->
    <!-- 一个标签也可以引入多个类名（同时也引用了多种样式） -->
    <div class="box red"></div>
    <div class="bo