CSS样式和基本选择器-Ⅰ

最新推荐文章于 2024-09-14 22:18:26 发布

Acndy233

最新推荐文章于 2024-09-14 22:18:26 发布

阅读量103

点赞数

文章标签：前端 css3 html5 idea

本文链接：https://blog.csdn.net/zhangsann_6/article/details/119610277

版权

CSS层叠样式表

CSS (Cascading Style Sheet )

1、css优点

1.1 css介绍

1、内容和表现分离

2、网页结构表现统一，可以实现复用

3、样式十分丰富

4、建议使用独立于html的css文件(如下图)

5、利用SEO，容易被搜索引擎收录

在这里插入图片描述

2、css导入方式

2.1、行内样式

<h1 style="color: chartreuse">一级标题</h1>

2.2、内部样式

    <!--  内部样式  -->
  <style>
    h1{
      color: red;
    }
  </style>

2.3、外部样式

/*外部样式*/
h1{
    color: yellow;
}

/*在HTML的head中引入*/

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

拓展：

A.链接式 : 例如上面这一行就是在html中链接

B.导入式 :

<style>
    @import url("scc/style.css");
  </style>

导入式是css2.0特有的

2.4、优先级：就近原则

3、选择器

3.1、作用和分类

选择页面上的某一个或者某一类元素

3.1、标签选择器:选择所有标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*
        标签选择器：会选中所有的相应的标签
         */
        h1{
            color: #0ae0e0;
        }
        p{
            background: yellow;
            border-radius: 40px;
            font-size: 50px;
        }
    </style>


</head>
<body>

<h1>学习java</h1>
<p>听故事</p>

</body>
</html>

3.2、类选择器 class：选择类相同标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /*
    类选择器格式：
                .class的名称{}
     */
    .zhang1{
      color: #FF2233;
    }
    .zhang2{
      color: #fa760f;
    }
    .zhang3{
      color: #57ef15;
    }

  </style>

</head>
<body>

<h1 class="zhang1">你好1</h1>
<h1 class="zhang2">你好2</h1>
<h1 class="zhang3">你好3</h1>

<p class="zhang1">hello</p>

</body>
</html>

3.3、Id选择器：全局唯一 #id{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /* id选择器 */
    .id_style{
      color: antiquewhite;
    }
    #id1{
      color: #0ae0e0;
    }
    #id2{
      color: #FF2233;
    }
    #id3{
      color: chartreuse;
    }

  </style>

</head>
<body>

<h1 id="id1">id选择器1</h1>
<h1 id="id2" class="id_style">id选择器2</h1>
<h1 class="id_style" id="id3">id选择器3</h1>

</body>
</html>