前端课堂（二）

馒头@Mm

已于 2022-07-14 10:44:28 修改

阅读量900

点赞数

分类专栏：前端笔记文章标签：前端 html

于 2022-07-12 18:51:14 首次发布

本文链接：https://blog.csdn.net/yan626413/article/details/125747984

版权

前端笔记专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一 css和内行样式

css的使用方法：

1.内联样式：也叫行内式/行间样式，在开始标签内添加style属性并设置css样式

2.内嵌样式：也叫内部样式，在html中的head标签中添加并按照固定格式设置css样式

优点：可以重复使用代码

3.外联样式：也叫外部样式，在外部创建一个css文件，在html中的head标签中通过link引入css文件

优点：可以重复使用代码

4.优先级：

正常情况：行内样式--内部样式--外部样式

特殊情况：行内样式--内部样式/外部样式（按照头标签里面的先后顺序，以浏览器的执行顺序判断优先级）

在这儿给个小例子

代码详细（自由复制）

<!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>
        h6{
            font-size: 30px;
        }
        p{
            color: blue;
        }
    </style>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
     <p style="color: blueviolet;">浪漫至死不渝，温柔绝对臣服。</p>
     <h1 style="font-size: 60px;">一级标题</h1>

     <h4>四级标题</h4>

     <h6>六级标题</h6>
</body>
</html>

二 css基本选择器

1.通配符选择器：

选择页面中的所有的标签

2.标签名选择器：

选择页面中所有标签名为p的标签

3.id选择器：

选中页面中id值为first的元素

格式：#+id值

当需要为页面中的某一个元素设置样式时，使用id选择器

4.class选择器：

选中页面中包含line的元素

格式：.+class

5.子代选择器：

在嵌套中通过外层元素一层一层的找到某个后代元素

格式：父元素>子元素( 子元素<父元素)

>指向子元素

6.后代选择器/祖孙选择器：

在嵌套中通过外层元素直接找到/一层一层找到某个

格式：祖先元素后代元素

7.class和id的区别：

1.前缀不同：在css中class以“.”为前缀，id为“#”为前缀

2.class类可以添加多个类名，中间以空格隔开。id名只能有一个

3.id的优先级：给同一个元素同时使用class类名设置相同的css样式，优先执行id选择器的css样式

4：id唯一性：在js中一整个页面中一个id只能出现一次

8.css选择器的优先级（高到低）排行顺序为：

1.id选择器 #myid

2.类选择器 .myclassname

3.标签名选择器 div，p

4.子选择器 <

5.后代选择器 li a

6.伪类选择器 a：hover

最后，需要注意的是：

！important的优先级最高

优先级相同的时候，采用的就近原则，选择最后出现的样式；

继承得来的属性，其优先级最低

代码详细（自由复制）

<!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>
        *{
            font-size: 10px;
        }
        p{
            color: aqua;
        }
        #first{
            background-color: rgb(22, 0, 187);     
        }
        .first{
            background-color: black;
        }
        .line{
            font-size: 30px;
        }
        p#first.line{
            color: darkorange;
        }
        p,#box{
            background-color: beige
        }
        h4,span{
            background-color: #ccf;
        }
        #box>div>h4{
            color:blanchedalmond;
        }
        #box span{
            color: brown;
        }

    </style>
</head>
<body>
    <p id="first" class="line first">第一行</p>
    <p class="line">第二行</p>
    <p class="line">第三行</p>
    <h4 class="line">第四行</h4>
    <div id="box" class="box element">这是一个块
        <div>
            <h4>标题</h4>
            <span>普通文本</span>
        </div>
    </div>
    <p>段落</p>
</body>
</html>

三关系选择器

1.相邻兄弟：

格式：兄弟+相邻兄弟

选择所有页面中紧接着p元素之后的第一个div元素

2.兄弟选择器：

格式：兄弟~兄弟

设置同一个div元素下的p元素之后的每一个ul元素的背景颜色

代码详细（自由复制）

<!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 p+div{
         background-color: aquamarine;
       }
       div p~ul{
        background-color: cornflowerblue;
       }
    </style>
</head>
<body>
    <div>
        <p>div中的子元素
            <strong>p标签的子元素strong
                <em>strong的子元素em</em>
            </strong>
        </p>        
        <div>div的子元素div标签</div>  
        <ul>
            div中的子元素
            <li>列表项</li>
        </ul>
        <div>div的子元素div标签</div>  
        <ul>
            div中的子元素
            <li>列表项</li>
        </ul>
        <div>div的子元素div标签</div>  
        <ul>
            div中的子元素
            <li>列表项</li>
        </ul>
        <div>div的子元素div标签</div>  
        <ul>
            div中的子元素
            <li>列表项</li>
        </ul>
    </div>
</body>
</html>