Web前端

2023-03-22

字数：1.8k字 | 预计阅读时长：8分钟

本文主要介绍web前端的基本知识，包括html，css，js等，具体参考CSS入门学习笔记

CSS

基础语法

<head> 
   <style> 	
      选择器{ 		
            属性名：属性值; 		
            属性名：属性值; 	
   } </style> 
</head>

选择器：要修饰的对象（东西）
属性名：修饰对象的哪一个属性（样式）
属性值：样式的取值

CSS应用方式

内部样式

页嵌式，在文件的head部通过style声明。

对当前页面的所有符合选择器的样式标签都起作用。

行内式

也称为嵌入样式，使用HTML标签的style属性定义

只对设置style属性的标签起作用

外部样式

使用单独的 .CSS 文件定义，然后在页面中使用 link标签或 @import指令引入

使用 link标签链接外部样式文件

1	<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

提示：type属性可以省略

@import 指令导入外部样式文件

<style>
    @import "CSS样式文件路径";
    @import url(CSS样式文件路径);
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 1.内部样式 */
        p{
            color:blue;
        }
    </style>
    <!-- link链接外部样式文件 -->
    <!-- <link rel="stylesheet" type="text/css" href="style/hello.css"> -->
    <!-- 3.import导入外部样式文件 -->
    <style>
        /* @import "style/hello.css" */
        @import url(style/hello.css);
    </style>
</head>
<body>
    <p>welcome to CSS!</p>
    <p>欢迎来到CSS课堂!</p>
    <hr>
    <h2 style="color:red;">WEB前段工程师</h2>
    <h2>JAVA开发工程师</h2>
    <hr>
    <div>嘿嘿</div>
    <div>哈哈</div>
</body>
</html>

选择器

基础选择器

也称为元素选择器，使用HTML标签作为选择器的名称

以标签名作为样式应用的依据

类选择器

使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用的依据

注意事项：

调用时不能添加 . 号
同时调用多个类选择器时，以 空格 分隔
类选择器名称不能以 数字 开头

ID选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配

以标签的id属性作为样式应用的依据，一对一的关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            color:red;
            font-size:20px;
        }
        h2{
            color:yellow;
        }
        .hello{
            background: #cccccc;
        }
        .world{
            font-weight:bold;
        }
        #haha{
            color:blue;
        }
    </style>
</head>
<body>
    <p>welcome to css!</p>
    <p>hello world!</p>
    <h2>WEB前端开发</h2>
    <h3>Java开发</h3>
    <hr>
    <p class="hello">welcome to css!</p>
    <p>hello world!</p>
    <h2>WEB前端开发</h2>
    <h3>Java开发</h3>
    <div class="hello">主讲：Hector</div>
    <div class="world">主讲：Hector</div>
    <hr>
    <h1 id="haha">哈哈</h1>
</body>
</html>

aHR0cHM6Ly9pbWcud3p1ZS5jbi8yMDIwLzAzLzI0LzlhNTI4ZjVmNmFlOWEucG5n (706×656) (csdnimg.cn)

复杂选择器

复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用

必须同时满足两个条件才能应用样式

组合选择器

也称为集体声明

将多个具有相同样式的选择器放在一起声明，使用逗号隔开

嵌套选择器

在某个选择器内部再设置选择器，通过空格隔开

只有满足层次关系最里层的选择器所对应的标签才会应用样式

注意：使用空格时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 1.标签选择器和类选择器合起来使用----复合选择器 */
        h1.aaa{
            color:red;
        }
        /* 1.标签选择器和ID选择器合起来使用----复合选择器 */
        p#bbb{
            color:blue;
        }
        /* 2.组合选择器 */
        h1,p,div,span,.ccc{
            font-size:30px;
        }
        div{
            background:violet;
        }
        .ccc{
            font-weight:bold;
        }
        /* 3.嵌套选择器 */
        /* div p{
            color:green;
            text-decoration:underline;
        } */
        div>p{
            color:green;
            text-decoration:underline;
        }
        div h3.ddd{
            color:red;
        }
    </style>
</head>
<body>
    <!-- 需求：只想修饰class属性为aaa的h1标签 -->
    <h1 class="aaa">welcome</h1>
    <h4 class="aaa">css</h4>
    <h1>hello</h1>
    <hr>
    <!-- 我要修饰ID属性为bbb的p标签 -->
    <p id="bbb">world</p >
    <p>html</p>
    <h1 id="bbb">主讲：叽叽</h1>
    <hr>
    <!-- 给h1、p、div、span标签中的内容设置字号为30px -->
    <h1>hello</h1>
    <p>CSS</p>
    <div>WEB开发</div>
    <span class="ccc">JAVA开发</span>
    <hr>
    <!-- 需求：修饰div内部的p标签 -->
    <div>
        <p>div内部的p标签</p>
        <h3>div内部的h3标签</h3>
    </div>
    <hr>
    <div>
        <h3>
            <p>div内部的h3内部的p标签</p>
        </h3>
    </div>
    <hr>
    <!-- 需求：修饰div内部的class为ddd的标签 -->
    <div>
        <p>div内部的p</p>
        <h3 class="ddd">div内部的h3</h3>
        <p class="ddd">PPPP</p>
    </div>
    <h3 class="ddd">h3h3h3</h3>
</body>
</html>

aHR0cHM6Ly9pbWcud3p1ZS5jbi8yMDIwLzAzLzI3L2U4NzJhNDA5OGVjMDYucG5n (855×787) (csdnimg.cn)

选择器优先级

优先级

行内样式>ID选择器>类选择器>标签选择器

原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式

后加载会覆盖先加载的同名样式

内外部加载顺序原则

就近原则

原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先

！importan

可以使用!important使某个样式有最高的优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style/world.css">
        <style>
        div{
            font-size:20px;
        }
        .hello{
            font-weight:bold;
            color:blue;
        }
        #world{
            text-decoration: underline;
            color:green;
        }
        p{
            color:red;
        }
    </style>

</head>
<body>
    <div class="hello" id="world" style="color:#ff7300">CSS从入门到精通</div>

<p>主讲：叽叽</p>

</body>
</html>

aHR0cHM6Ly9pbWcud3p1ZS5jbi8yMDIwLzAzLzI3LzgwM2FlMTkxYWQzMzUucG5n (423×98) (csdnimg.cn)