css的应用详解

最新推荐文章于 2024-04-28 17:46:18 发布

javascript_good

最新推荐文章于 2024-04-28 17:46:18 发布

阅读量220

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/javascript_good/article/details/131766118

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、css的应用

1、在标签上的应用

<img style="height: 500px; width:500px" src="/static/1.jpg" />
<div style="color:red;">祖国</div>

将样式直接写在标签上

2、在head标签中应用style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
          .c1{
              color:red;
          }
    </style>
</head>
<body>
<h1 class='c1'>用户注册</h1>
<form method="post" action="/post/regist">
    <div>
        用户名: <input type="text" name="user">
    </div>
    <div>
        密码: <input type="password" name="pwd">
    </div>
    <div>
        <input type="submit" value="submit提交">
    </div>

</form>
</body>
</html>

将样式写在head中，通过style标签写样式

3、样式写到文件中

样式文件名称为：common.css

.c1{
    height:100px;
}

.c2{

    color:red;
}

在其他的html页面引用，通过在head中写link标签引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="common.css"/>
</head>
<body>
<h1 class='c1'>今日头条</h1>
<h2 class='c2'>时事新闻</h2>
<h3 class='c1'>社会百态</h3>
</body>
</html>

二、选择器

1、ID选择器

在head中通过style标签写样式，并且是以#开头的，在body中使用的时候通过id属性来标识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        #c1{
        color:red;
    }
    </style>

</head>
<body>
<h1 id='c1'>今日头条</h1>
</body>
</html>

效果：
在这里插入图片描述

2、类选择器

样式也写在head中的style标签里，以点开头，在引用的时候通过class属性来标识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
    .c1{
        color:red;    
    }
  </style>
</head>
<body>
<h1 class='c1'>今日头条</h1>
</body>
</html>

3、标签选择器

在head中通过style标签，里面定义某个标签的样式，这样所有的这类标签都会加上相同的样式，如下面定义了li的样式，在body中两个li的标签都会变成红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            color:red;
        }
    </style>
</head>
<body>
  <div>
      <ul>
          <li>华南</li>
          <li>中南</li>
          <li>湖南</li>
      </ul>
  </div>
   <div >
      <ul>
          <li>今日头条</li>
          <li>时事新闻</li>
          <li>社会百态</li>
      </ul>
  </div>

</body>
</html>

效果：
在这里插入图片描述

4、属性选择器

比如input标签有多重类型，在定义样式的时候input[type=‘text’] 通过类型指定哪个属性的标签会应用该样式。如下例子只有用户名 text这个属性的框框变红了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        input[type='text']{
            border: 1px solid red;        
        }
    </style>
</head>
<body>
        用户名: <input type="text" name="user">
        密码: <input type="password" name="pwd">
        <input type="submit" value="submit提交">
</body>
</html>

效果：
在这里插入图片描述

5、后代选择器

当有嵌套的标签，比如下面案例，只有带YY class属性的li标签变红了。当有两个a标签，有层级关系，这时候使用>号就只适用到父标签，不涉及到子标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .YY li{
            color:red;
        }
        .YY > a{
            color:dodgerblue;
        }
    </style>
</head>
<body>
  <div>
      <ul>
          <li>华南</li>
          <li>中南</li>
          <li>湖南</li>
      </ul>
  </div>
   <div class="YY">
       <a>百度</a>
       <div>
           <a>谷歌</a>
       </div>
      <ul>
          <li>今日头条</li>
          <li>时事新闻</li>
          <li>社会百态</li>
      </ul>
  </div>

</body>
</html>

效果：
在这里插入图片描述

6、总结

类选择器是使用最多的，类属性是可以有多个的，很方便复用， id选择器他的id是不能重复的，只能有一个标签可以使用。标签选择器所有这个标签都会加上这个样式，太绝对了，使用场景相对较少。

三、多个样式和覆盖

同一个标签使用多个样式，同时使用c1和c2 ,不同的属性会叠加，相同的属性会覆盖，覆盖的原则是后定义的会覆盖先定义的，比如下面都有color的样式，会使用c2的样式.而跟在

安娜卡列尼娜

这里面c1和c2的前后位置无关。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color:dodgerblue;
        }
    </style>
</head>
<body>
  <div class="c1 c2">安娜卡列尼娜</div>

</body>
</html>

效果:
在这里插入图片描述
如果需要后面的不要覆盖前面的需要加上 ! important

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red ! important;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color:dodgerblue;
        }
    </style>
</head>
<body>
  <div class="c1 c2">安娜卡列尼娜</div>

</body>
</html>