2-CSS基础

诗人不写诗

已于 2023-03-23 23:01:43 修改

阅读量255

点赞数

分类专栏： # HTML&CSS&JS 文章标签： css elementui vue.js

于 2022-04-30 21:51:38 首次发布

本文链接：https://blog.csdn.net/tales522/article/details/124512905

版权

HTML&CSS&JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS：cascading style sheet，层叠样式表

一、内联样式：

内联样式只对当前标签生效，无法复用，不推荐使用

<p style="color: red;font-size: 40px;">锄禾日当午，汗滴禾下土</p>

二、style标签中样式

只能在当前页面使用，无法在多页面复用，

<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
           // 给所有p标签设置样式
        p {
            color: red;
            font-size: 40px;
        }
    </style>
</head>

三、文件分离，link标签引入

结构和表现分离，最佳实现方式。link标签的stylesheet和type都写固定值。

<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

四、CSS语法

1、CSS中注释使用/**/
2、格式，选择器:声明块

标签选择器

<style>  
  div{color:Red;}
</style>

id选择器

  <style type="text/css">
      #p1{
          color:blue;
          font-size:18px;
      }
  </style>

类选择器

  <style type="text/css">
      .pclass{
          color:blue;
          font-size:18px;
      }
  </style>

五、样式的继承和优先级

每个样式都有一个是否能被继承的属性，很多样式可以被继承，背景和边框等样式不会被继承。
内联样式>id选择器样式>类和伪类选择器样式>元素选择器样式>*通配选择样式>继承的样式。
可以在样式最后添加!import，优先级将变得最高，不推荐使用。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
</head>
<style>
    .p1 {
        background-color: yellowgreen;
    }

    #p2 {
        background-color: yellow;
    }

    p {
        background-color: red !important;
    }
</style>

<body>
    <p class="p1">我是p标签中的文字1</p>
    <p id="p2">我是p标签中的文字</p>
</body>

</html>