[前端 02] CSS层叠样式表 2021.11.16

CSS

1. 简介：

学习：

Cascading Style Sheet 层叠样式表，级联样式表

CSS是什么， css快速入门

CSS选择器

美化网页（文字，阴影，超链接，列表）

盒子模型

浮动、定位、网页特效

2. CSS语法

语法：

选择器{

​ 声明1；

​ 声明2；

}

优先级就近原则：行内样式>（内部样式表和外部样式表哪个最近优先级最高）

  1. 和html不分离：在head里面写style标签申明内部样式表

    <style>
        h1 {
            
        }
    </style>

  2. 分开做CSS文件：在html里面只做link元素的连接外部样式表

    CSS文件
h1 {
    color : red;
}

    html中写：

    <html>
    <head>
        <link rel="stylesheet" href=".css文件路径">
    </head>
</html>

  3. 行内样式

    <h1 style = "color :red"></h1>

3. 选择器

1. 基本选择器

选择器的定义方式不同：

标签：直接写标签；类选择：.类名；id选择器： #id

优先级：id选择器>class选择器>标签选择器

  • 标签选择器：会选择到页面上所有的这个标签的元素（上面的h1）

  • 类选择器：在标签中写一个class属性，用选择器选择类

好处：可以多个标签归类，跨标签实现

    <style>
        .类名1{
            样式声明;
        }
    </style>
</head>
<body>
<h1 class="类名1">First</h1>
<h1 class="类名2">Second</h1>
<h1 class="类名3">Third</h1>
</body>
  • id选择器:
    <style>
        #123{
            样式声明;
        }
    </style>
<h1 id="123">First</h1>

看到P5，下次看p6层次选择器没看

posted @ 2021-11-16 10:12  Roy2048  阅读(55)  评论(0)    收藏  举报