编程技术文章分享与教程

网站首页 > 技术文章 正文

CSS小白学习过程中的踩坑心得分享

hmc789 2024-11-25 12:50:17 技术文章 2 ℃

今天学习了CSS引入方式以及选择器的使用,个人感觉引入方式很好理解,CSS选择器中的标签选择器、class选择器、id选择器也很容易掌握,就是伪类选择器稍微有点难度,并且这个地方也还是重难点,所以我把今天所学的知识梳理一下,重点记录一下伪类选择器这个知识点,再重点理解一下。

一、CSS引入HTML文档的三种方式

1.通过<style>标签引入HTML文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础语法</title>
    <style>
        h1 {
            color: violet;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <h1>php.cn</h1>
</body>
</html>
  • 效果图:

2.通过外部样式表引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS引入方式:外部样式表(公共样式表、共享样式表)</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>php.cn</h1>
</body>
</html>
  • 效果图

3.通过style属性设置元素样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS引入方式:style属性设置样式</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>toutiao.com</h1>
    <h1 style="color: yellow;">Hello World</h1>
</body>
</html>
  • 效果图:

通过以上学习可以做出如下总结:

  1. 内部样式:仅对当前元素有效,使用<style>标签;
  2. 外部样式:适用于所有引入了CSS样式表的HTML文档,使用<link>标签引入;
  3. 行内样式:仅仅适用当前页面的指定的元素,使用<style>属性。

二、样式表的模块化

通常一个网站有页头,主体部分,页脚,页头和页脚一般都是公用的部分,如果在每个页面都写一遍页头和页脚的样式,这样的话也太复杂了,可以使用模块化的样式表,在每个页面再进行引入就可以了,这样既方便又利于管理。

CSS模块化使用方法:

  1. 将公共样式部分进行分离,并创建一些独立的样式表来保存;
  2. 使用@import指令引用公用样式表到指定的CSS文档或标签中。
<style>
  /* 导入公共页眉 */
  @import url(css/header.css);
  main {
    min-height: 50px;
    background-color: lightblue;
  }
  /* 导入公共页脚 */
  /* 该方法等同于上面的 @import url() 方法 */
  @import 'css/footer.css';
</style>

三、选择器

1.标签选择器:返回一组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器1:简单选择器</title>
    <style>
        li {
            background-color: violet;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</body>
</html>
  • 效果图:

2.class选择器:返回一组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器1:简单选择器</title>
    <style>
        /* li[class="on"] {
            background-color: #ffffff;
        } */
        /* class选择器可以简化为 */
        li.on {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li id="foo">item1</li>
        <li class="on">item2</li>
        <li id="foo">item3</li>
        <li class="on">item4</li>
        <li class="on">item5</li>
    </ul>
</body>
</html>
  • 效果图:

3.id选择器:返回一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器1:简单选择器</title>
    <style>
        /* ---------------------------------------------- */
        /* id选择器:返回一个 */
        /* li[id="foo"] {
            background-color: violet;
        } */
        /* id选择器可以简化为 */
        #foo {
            background-color: violet;
        }
        /* 浏览器并不检查id选择器的唯一性,由开发者自行保证它的唯一性。 */
    </style>
</head>
<body>
    <ul>
        <li id="foo">item1</li>
        <li class="on">item2</li>
        <li id="foo">item3</li>
        <li class="on">item4</li>
        <li class="on">item5</li>
    </ul>
</body>
</html>
  • 效果图:

需要注意的是,这里面有一个坑,我通过学习发现id选择器,在页面中不能重复使用,跟class选择器是不一样的,它需要在页面中保证它的唯一性,这个浏览器并不会检查id的唯一性,需要开发者自行保证。

4.上下文选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器1:上下午选择器</title>
    <style>
        /* 1.后代选择器:所有层级 */
        ul li {
            background-color: lightblue;
        }

        /* 2.子元素选择器 */
        body > ul > li {
            background-color: teal;
        }

        /* 3.同级相邻选择器:仅选中与之相邻的第一个元素 */
        .start+li {
            background-color: #000;
            color: #ffffff;
        }

        /* 4.同级所有选择器:选中与之相邻的后面所有兄弟元素 */
        .start~li {
            background-color: tomato;
        }
    </style>
</head>
<body>
    <ul>
        <li id="foo">item1</li>
        <li class="start">item2</li>
        <li id="foo">item3</li>
        <li class="on">item4
            <ul>
                <li>item4-1</li>
                <li>item4-2</li>
                <li>item4-3</li>
            </ul>
        </li>
        <li class="on">item5</li>
    </ul>
</body>
</html>
  • 效果图:

总结,上下文选择器用到的符号:

  1. 空格:所有层级;
  2. >:父子级;
  3. +:仅选中与之相邻的第一个元素
  4. ~:选中与之相邻的后面所有兄弟元素

5.伪类选择器

匹配任意位置的元素:nth-of-type(an + b),其中an表示起点,b是偏移量,n为从0开始的正整数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器:结构伪类(重难点)</title>
    <style>
        /* 1.匹配任意位置的元素:`:nth-of-type(an+b)` */

        /* 0乘以任何数都等于0,通常直接写偏移量就可以 */
        /* 匹配第3个li */
        /* ul li:nth-of-type(3) {
            background-color: tomato;
        } */

        /* 选择li的所有元素 */
        /* ul li:nth-of-type(1n) {
            background-color: yellow;
        } */

        /* 如果只是为了全选,这样做没意义,还不如标签选择器来的直接,但是一旦带上偏移量就完全不同了。 */
        /* 1乘以任何数都等于自己,所以省去1 */
        /* ul li:nth-of-type(1n + 3) {
            background-color: yellowgreen;
        } */

        /* ul li:nth-of-type(n + 8) {
            background-color: springgreen;
        } */

        /* ----------------------------------------------------------------- */

        /* 2. 反向获取任意位置的元素:`nth-last-of-type(an + b)` */
        /* ul li:nth-last-of-type(-n + 3) {
            background-color: wheat;
        } */
        /* 只选择倒数第3个,直接命中 */
        /* ul li:nth-last-of-type(-0n + 3) {
            background: wheat;
        } */

        /* 3.选择所有索引为偶数的子元素:2,4,6,8 */
        /* ul li:nth-of-type(2n) {
            background-color: yellow;
        } */
        /* 选择所有奇数行的子元素:1,3,5,7,9 */
        /* ul li:nth-of-type(2n - 1) {
            background-color: yellow;
        } */

        /* 这里2n - 1 也是对的,为什么呢? */
        /* 偶数行:even */
        /* ul li:nth-of-type(even) {
            background-color: violet;
        } */
        /* 奇数行:odd */
        /* ul li:nth-of-type(odd) {
            background-color: yellowgreen;
        } */

        /* ----------------------------------------------------------------- */
        /* 3.选择第一个子元素: */
        /* :nth-of-type(1) 的语法糖:first-of-type */
        /* ul li:first-of-type {
            background-color: turquoise;
        } */
        /* 选中最后一个:last-of-type */
        ul li:last-of-type {
            background-color: #000;
        }

        /* :nth-of-type(an + b) 这是最核心的一个选择器,其他的相关选择器都是它的语法糖 */
        /* :nth-last-of-type(), :first-of-type, :last-of-type这些都是快捷方式 */


        /* ul:last-of-type li {
            background-color: turquoise;
        } */
        /* 如果只想匹配父元素中唯一子元素,使用:only-of-type就可以快速实现 */
        ul li:only-of-type {
            background-color: violet;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
    </ul>
    <ul>
        <li>Hello  ssssWorld!</li>
        <li>Hello  ssssWorld!</li>
    </ul>
    <ul>
        <li>Hello World!</li>
    </ul>
</body>
</html>
  • 效果图:

通过学习CSS基础语法和伪类选择器的使用,了解了页面引入样式的三种方法,还有如何修饰页面中元素的样式。

Tags:

标签列表
最新留言