CSS快速入门

最新推荐文章于 2024-06-01 14:57:49 发布

我不想头秃阿

最新推荐文章于 2024-06-01 14:57:49 发布

阅读量62

点赞数

分类专栏： JavaWeb 文章标签： css css3 html

本文链接：https://blog.csdn.net/cacique111/article/details/126573861

版权

JavaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS快速入门

一、导入方式

内联样式：在标签内部使用style属性，属性只是css属性键值对

<div style="color: red">
    Hello CSS
</div>

内部样式：定义<style>标签，在标签内部定义css样式

<style type="text/css">
    div{
        color: red;
    }
</style>

外部样式：定义link标签，引入外部的css文件

<link rel="stylesheet" href="demo.css">

demo.css

div{
    color: red;
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        span{
            color: blue;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="../css/demo.css">
</head>
<body>
    <!--内联样式-->
    <div style="color: red">Hello CSS</div>

    <span>Hello CSS</span>

    <p>Hello CSS</p>
</body>
</html>

demo.css文件

p{
    color: green;
}

效果：

在这里插入图片描述

二、CSS选择器

概念：选择器是选取需要设置样式的元素（标签）

div{
    color: red;
}

分类

元素选择器

元素名称{color: red;}
// example
div{color: red;}

id选择器

#id属性值{color: red;}
// example
#name{color: red;}
<div id="name">hello css</div>

类选择器

.class属性值{color: red;}
// example
.cls{color: red;}
<div class="cls">hello css</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div{
        color: red;
      }
      #name{
        color: blue;
      }
      .cls{
        color: green;
      }
    </style>
</head>
<body>

  <div>div1</div>
  <div id="name">div2</div>
  <div class="cls">div3</div>
  <span class="cls">span</span>

</body>
</html>