web前端——css

2023-08-11 73

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： web前端——css

1、样式表

1、内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    h1{
        color: red;
    }
</style>
<h1>内部样式</h1>
</body>
</html>

2、外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    引入外部样式1-->
    <link rel="stylesheet" href="./index.css">
<!--    或者这么写-->
    <style>
        @import "index.css";
    </style>
</head>
<body>
<h1>外部样式</h1>
</body>
</html>

扩展（面试）：link和import之间的区别？

差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。

差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

差别4：使用dom(document o bject model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

3、行内样式（内联样式、嵌入式样式）

<h1 style="color: red">行内样式</h1>

4、样式的优先级

行内样式 > 内部样式 > 外部样式（就近原则）

如果三种写法都有相同的属性，属性后面加上!important则该样式优先。也就是!important针对的是相同的标签的相同属性。

2、选择器

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器

1、类/class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .top{
        color: red;
    }
    .foot{
       background-color: blanchedalmond;
    }
</style>
    <h1 class="top">class选择器</h1>
    <h2 class="top foot">一个标签可以起两个或者多个类名</h2>
</body>
</html>

如果标签中存在多个类的时候，是按照style中的选择器的顺序进行覆盖的，不是按照class内的顺序覆盖渲染的。

2、id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    #top{
        color: red; 
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
</style>
    <div id="top">id选择器</div>
</body>
</html>

id选择器具有唯一性。一个标签只能有一个id.

3、通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
</style>
    <div>通配符选择器</div>
</body>
</html>

4、群组和后代/包含选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    div, p ,h2{
        color: red;
    }
</style>
    <div>群组选择器</div>
    <p>群组选择器</p>
    <h2>群组选择器</h2>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    div p{
        color: red;
    }
</style>
    <div>
        <p>div中的p标签</p>
    </div>
       <p>div外面的p标签</p>
</body>
</html>

后代选择器的选择实际上是从右到左的选择，也就是先选择p标签再选择div标签。

5、伪类选择器

伪类选择器一般使用在a标签上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*初始状态(未访问之前)*/
    a:link{
        color: black;
    }
    /*访问之后的*/
    a:visited{
        color: yellow;
    }
    /*鼠标悬停*/
    a:hover{
        background-color: red;
    }
    /*点击激活后*/
    a:active{
        color: aqua;
    }
</style>
<body>
<a href="####">a标签</a>
</body>
</html>

必须按照link---visited---hover---active的顺序书写。否则存在覆盖的问题。

伪类选择器小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
   div{
       width: 300px;
       background-color: darkblue;
   }
  a{
      background-color: darkblue;
      color: white;
  }
   a:hover{
       background-color: red;
   }
</style>
<body>
<div>
    <a href="###">军事</a>
    <a href="###">财经</a>
    <a href="###">科技</a>
    <a href="###">医疗</a>
</div>
</body>
</html>

6、选择器的权重

当多个代码段选择的是相同的元素的，并且都为他们定义了样式。如果属性发生了冲突的话，会选择权重高的来执行。对于相同权重的选择器则会按照就近原则。对于包含选择器，其权重为选择器之和。

id选择器 > class选择器 > 元素选择器