新人学习笔记之（CSS选择艺术）

最新推荐文章于 2024-08-08 23:04:40 发布

清袖*

最新推荐文章于 2024-08-08 23:04:40 发布

阅读量1.5k

点赞数 47

分类专栏： CSS 文章标签：学习笔记 css 前端

本文链接：https://blog.csdn.net/2401_83311390/article/details/136845218

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、css基础语法

1.css样式规则

1）css规则由选择器:{属性:属性值}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        h1{
            color: blue;
        }
    </style>
</head>
<body>
      <h1>莫愁、莫愁、凡事都莫愁
</body>
</html>

2.css基础引用

2）写在页面头<style type="text/css"></style>

<style type="text/css">
        h1{
            color: blue;
        }
</style>

3.css引用的四种方式

1)行内样式(内联),内部样式(style标签)，外部样式表,导入式

(1)行内样式，在标签内添加style属性

<h1 style="color: blue;">莫愁</h1>

(2)内部样式,放在<header>标签中 <style>标签中

<style type="text/css">
        h1{
            color: blue;
        }
</style>

(3)外部样式表，将css样式放在独立的一个css文件中，通过导入式<@import url=">需要放在header标签中导入式页面加载完再加载，属于css提供的兼容性差 dom不可控

<style>
        <@import url(../css/子琪美甲登陆页面.css);
    </style>

(4)链入式，link href=" rel=styleheet type='text/css'链入式同时加载css文件 link属于XHTML标签建议使用链入式

<link rel="stylesheet" href="../css/子琪美甲登陆页面.css">

4.css引用优先级

1) 行内样式>内部样式>外部引用 链入和导入取决于所处位置的先后，后者优先级高可以使用!import覆盖框架css

二、css选择器

1.标签选择器，类选择器，id选择器，全局选择器，群组选择器，后代选择器

1)标签选择器：以htmI标签作为选择器，例如h1{}

<style type="text/css">
        h1{
            color: blue;
        }
</style>

2) 类选择器：通过class属性来设置样式<divclass ='abc'></div> .abc{} 可以设置多次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
</body>
</html>

3）id选择器：通过唯一id设置 <div id='abc'>#abc{} id只能设置一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="box1">1</div>
</body>
</html>

4)全局选择器：为所有标签设置属性,通常用来重置样式通常为*{ magin:0,padding:0 }

*{
    padding: 0;
    margin: 0;
}

5)群组选择器,：a,b,c{}

.a, .b, .c {
    background-color: red;
}

6) 后代选择器：a b {} a中包含的所有b

.a .b {
    color: red;
}

2.伪类选择器

1)伪类选择器定义特殊状态下的样式无法使用其他属性实现

(1)链接伪类：a:link 未访问时链接状态 a:visited 访问过后链接状态 a:hoverd 鼠标悬停的状态 a:active 鼠标点击时的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 没有访问过的网页 */
        a:link{
            color: aqua ;
        }
        /* 访问过的网页 */
        a:visited{
            color: chartreuse;
        }
        /* 鼠标经过 */
        a:hover{
            color: blue;
        }
        /* 鼠标按下并没有抬起 */
        a:active{
            color: brown;
        }
    </style>
</head>
<body>
    <a href="../html作业/招聘需求申请表作业.html">申请一下</a>
</body>
</html>

（2）书写顺序：link>visited>hoverd>active 点击过后没用了是因为书写顺序错误