前端知识大全之CSS（上）

2022-12-09 58

版权

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

简介： CSS是前端的一个重要的组成部分，可以给HTML这个进行化妆起到美化的作用。

一、概念讲解

学习CSS之前必学的HTML （超链接）

1.CSS（Cascading Style Sheets）

CSS是前端的一个重要的组成部分，可以给HTML这个进行化妆起到美化的作用。

二、正文代码

1.行内样式

说明：这样定义也叫内联样式，这种方式不推荐

  <h1 style="color:red; text-align:center;">我是标签</h1>

2.内部样式（选择器）

弊端：只能作用与一个页面，页面多了还要不断的上下滚动代码进行修改

说明：这样设计是为了html标签结构和css样式相分离，容易整体操控

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
<!-- -------------分割线，上面是自动生成的----------------------------------------- -->
  <!-- 样式表整体就在这head头部标签这里设计就好了 -->
  <style>
    body{background-color:darkturquoise;}
    h1{color: khaki;}
  </style>
</head>
<body>
  <h1>王者荣耀</h1>
  <p>今天是个好日子</p>
</body>
</html>

3.外部样式

说明：外部样式把css放在一个独立的文件中，使html和css样式独立开来

优点：可以把这个css样式给多个html页面使用

CSS

/* 该文件名为QQ.css */
body {
    background-color:darkturquoise;
    }
    h1 {
        color:khaki;
    }

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
<!-- -------------分割线，上面是自动生成的----------------------------------------- -->
<link rel="stylesheet" href="D:\前端\练习包\标签练习\QQ.css">  
<!-- 快捷键link生成css的导航代码就好了，然后在href里面设置css的文件路径 -->
</head>
<body>
  <h1>王者荣耀</h1>
  <p>今天是个好日子</p>
</body>
</html>

4.样式的优先级

就近原则，哪个距离最近就使用哪个的样式

5.简单选择器之定义单个标签（id）

ID选择器给每个标签都自定义样式

说明：先在要被修饰的伸腿标签里面定义一个唯一的id，然后在头部标签的style中#id设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
<!-- 头部-->
<style>
  #para1{
  text-align:center;
}
#para2{
  color:red;
}
</style>  
</head>
<!-- 身体 -->
<body>
  <h1 id="para1">王者荣耀</h1>
  <p id="para2">今天是个好日子</p>
</body>
</html>

6.简单选择器之定义多个标签（class）

说明：在身体body里面的多个标签里面批量添加class=自定义名字，然后在头部head里面.自定义名字进行设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
<!-- 头部-->
<style>
.cpdd{
  color: red;
}
</style>  
</head>
<!-- 身体 -->
<body>
  <h1 class="cpdd">王者荣耀</h1>
  <p class="cpdd">今天是个好日子</p>
</body>
</html>

7.简单选择器之全部选择(*)

说明：这个应用在头部标签的最开头，一个*号就好了，然后在括号里面定义全部标签的语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
<!-- 头部-->
<style>
  *{
    text-align: center;
  }
</style>  
</head>
<!-- 身体 -->
<body>
  <h1 class="cpdd">王者荣耀</h1>
  <p class="cpdd">今天是个好日子</p>
</body>
</html>

8.组合选择器（div 标签）

说明，在css样式里面选择div盒子里面要定义的标签，进行定义就好了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
<!-- 头部-->
<style>
div h1 {
  color: blueviolet;
}
</style>
</head>
<!-- 身体 -->
<body>
  <div>
    <h1 class="cpdd">王者荣耀</h1>
    <p class="cpdd">今天是个好日子</p>
  </div>
</body>
</html>

9.选择器之鼠标行为（link、visited、hover、active）

说明：别称叫伪类选择器。主要应用在超链接上，偶尔也会用在其他标签上。冒号和鼠标后面的行为，没有空格，必须连接在一起

ps：其他标签只能用hover、active

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
<!-- 头部-->
<style>
/* 鼠标点击前 */
a:link{
  color: red;
}
/* 鼠标点击后，再移除鼠标 */
a:visited{
  color: green;
}
/* 鼠标放上去时候 */
a:hover{
  color: yellow;
}
/* 鼠标点击瞬间 */
a:active{
  color: skyblue;
}
</style>
</head>
<!-- 身体 -->
<body>
<a href="#">这是超链接</a>
</body>
</html>

10.伪元素选择器

说明：可以设置元素的指定部分的样式，主要用来设置元素内文本的首行、首字母、在元素之前或者之后插入其他内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS伪元素选择器</title>
<!-- 头部-->
<style>
h1::first-letter{
  /*1. 这是定义标签的首字母的样式 */
  color: red;
}
h2::first-line{
  /*2. 定义文本的首行样式 */
  color: blue;
}
h3::before{
  /*3. 向文本前插入内容样式，必须配合content使用 */
  content: "我是向前添加的！！";
}
h3::after{
  /*4. 向文本后插入内容样式，必须配合content使用 */
  content: "我是向后添加的！！";
}
</style>
</head>
<!-- 身体 -->
<body>
<h1>用来实现元素内的第一个字符添加样式声明</h1>
<h2>这是用来实现文本第一行的样式声明的</h2>
<h3>王者荣耀</h3>
</body>
</html>

11.属性选择器（精确查找）

说明：可以精确定义要设置的属性进行定义。在头部的标签中定义该属性的定位就可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <!-- 头部标签 -->
    <!-- 精确定位要定义的单个或者多个标签，用[]包住进行定义 -->
    <style>
        [class="s"]{
            color: blueviolet;
        }
    </style>
</head>
<!-- 身体标签 -->
<body>
    <h1 class="s">我是h1</h1>
    <h2>我是h2</h2>
    <p class="s">我是p标签</p>
</body>
</html>