CSS学习笔记(一)


阅读数: 次   

CSS简介

回顾网页分为3个部分：
结构(HTML) + 表现(CSS) + 行为(JavaScript)
CSS：层叠样式表，网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到的只是网页的最上面一层
总之，CSS用来设置网页中元素的样式

CSS修改元素样式

  • 第一种方式(内敛样式，行内样式)
    在标签内部通过style属性来设置样式
1
2
<p style="color:red; font-size:30px;">今天天气真好</p>
属性的值为CSS，CSS结构为名值对，名color加上：加上值red组成，以分号结尾

呈现结果为：今天天气真好
问题：
使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍，并且当样式发生变化时，我们必须要一个一个的修改，非常不方便
注意：开发时绝对不要使用内联样式

  • 第二种方式(内部样式表)
    将样式编写到head中的style标签里，然后通过CSS的选择器来选中元素并为其设置样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用，内部样式表更加方便对样式进行复用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
    <head>
        <style>
            p{
                color:red; 
                font-size:15px;
            }
        </style>
    </head>
    <body>
        <p>少小离家老大回，乡音无改鬓毛衰</p>
        <p>落霞与孤鹜齐飞，秋水共长天一色</p>
    </body>
</html>

问题：
我们的内部样式表只能对一个网页起作用，它里面的样式不能跨页面进行复用

  • 第三种方式(外部样式表)最佳实践
    可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件
1
2
3
<head>
    <link rel="stylesheet" href="./style.css">
</head>
1
2
3
4
5
<!-- 外部文件style.css如下： -->
p{
    color:blueviolet;
    font-size: 20px;
}

外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同页面直接进行复用，将样式编写到外部CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验

CSS语法

style标签中的部分是不属于html里面的，因此在style中写代码时应遵循CSS的语法

基本语法：选择器 声明块

  • 选择器：通过选择器可以选中页面中的指定元素
    比如：p的作用就是选中页面中所有的p元素
  • 声明块：通过声明块来指定要为元素设置的样式
    声明块由一个一个的声明组成，
    声明是一个名值对结构：一个样式名对应一个样式值，名和值之间以:连接，以;结尾

CSS选择器

常用选择器

  • 元素选择器：
        作用：根据标签名来选中指定元素
        语法：标签名{}
        例子：p{} h1{} div{}
  • id选择器：
        作用：根据元素的id属性值选中一个元素
        语法：#id属性值{}
        例子：#red{} #box{}
  • 类选择器(class)：主要
        作用：根据元素的class属性值选中一组元素
        语法：.class属性值
        例子：.blue{}
    1
    2
    <p class="blue">今天天气真好！</p>
    <p class="blue">可以出去玩了！</p>
    class是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性为元素分组，可以同时为一个元素指定多个class属性
    1
    <p class="blue abc">可以出去玩了！</p>
  • 通配选择器
        作用：选中页面中的所有元素
        语法：*{}

    复合选择器

  • 交集选择器
        作用：选中同时符合多个条件的元素
        语法：选择器1选择器2选择器3选择器n{}
        注意：交集选择器中如果有元素选择器，必须使用元素选择器开头，一般不太建议div#box{}，因为id已经可以唯一确认一个标签，这样写多此一举
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div class="red a b c">今天天气真好！</div>
    <p class="red">可以出去玩了</p>
    <p class="red1 a b c">真开心</p>
    CSS：
    <style>
        div.red{
            color:red;
            font_size:30px;
        }
        .a.b.c{
            color:blue;
        }
    </style>
    呈现在网页中的结果为：
  • 选择器分组(并集选择器)
        作用：同时选择多个选择器对应的元素
        语法：选择器1，选择器2，选择器3，选择器{}
    1
    2
    3
    4
    5
    6
    h1,span{
        color:green;
    }
    #b1,.p1,h1,span,div.red{
        color:red;
    }

    关系选择器

    父元素：直接包含子元素的元素叫做父元素
    子元素：直接被父元素包含的元素是子元素
    祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素
    后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素
    兄弟元素：拥有相同父元素的元素是兄弟元素
  • 子元素选择器
        作用：选中指定父元素的指定子元素
        语法：父元素 > 子元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    div.box > span{
        color:brown;
    }
</style>
<div color="box">
    我是第一个div
    <p>
        我是div中的p元素
        <span>我是p中的span元素</span>
    </p>
    <span>我是div中的span元素</span>
    <span>我是div中的span元素</span>
    <span>我是div中的span元素</span>
    <span>我是div中的span元素</span>
    <span>我是div中的span元素</span>
</div>
<div>
    <span>我是第二个div内的span</span>
</div>

在网页中的呈现结果为：

  • 后代元素选择器
        作用：选中指定元素内的指定后代元素
        语法：祖先 后代
    1
    2
    3
    div span{
        color:skyblue;
    }
    在网页中的呈现结果为：
  • 兄弟元素选择器

        作用：选择下一个兄弟，如果后面还连着几个元素，不管，只选择紧挨的下一个，如果下一个不是指定的，则无效
        语法：前一个 + 后一个

    1
    2
    3
    p + span{
        color:crimson;
    }
    在网页中的呈现结果为：

        作用：选择下边所有的兄弟
        语法：兄 ~ 弟

    1
    2
    3
    p ~ span{
         color:darksalmon;
    }
    在网页中的呈现结果为：
    微信截图_20220108215505.png

    属性选择器

    [属性名] 选择含有指定属性的元素
    [属性名=属性值] 选择含有指定属性和属性值的元素
    [属性名^=属性值] 选择属性值以指定值开头的元素
    [属性名$=属性值] 选择属性值以指定值结尾的元素
    [属性名*=属性值] 选择属性值中含有某指定元素的元素(位置不重要)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    p[title]{
        color:cadetblue
    }
    p[title=abc]{
        color:cadetblue
    }
    p[title^=abc]{
        color:cadetblue
    }
    p[title$=abc]{
        color:cadetblue
    }
    p[title*$*=a]{
        color:cadetblue
    }
</style>

伪类选择器

伪类：不存在的类，特殊的类
伪类可以用来描述一个元素的特殊状态，比如：第一个子元素，被点击的元素，鼠标移入的元素……
特点：伪类一般情况下都是使用：开头

  • :first-child 选中第一个子元素
  • :last-child 选中最后一个子元素
  • :nth-child() 选中第n个子元素
    特殊值：n 第n个 n的范围0到+∞
               2n或even 表示选中偶数位的元素
               2n+1或odd 表示选中奇数位的元素

    以上这些伪类都是根据所有的子元素进行排序(不是说li元素的第一个子元素，而是说所有元素中第一个子元素必须也是li元素)

  • :first-of-type
  • :last-of-type
  • :nth-of-type()

    以上几个伪类的功能和上述的类似，不同点在于它们是在同类型元素中进行排序(比如li元素中的第一个)

  • :not() 否定伪类，将符合条件的元素从选择器中去除
1
2
3
4
5
6
7
8
9
10
11
<style>
    ul > li:first-child{
        color:coral;
    }
    ul > li:last-child{
        color:coral;
    }
    ul > li:nth-child(4){
        color:coral;
    }
</style>
1
2
3
4
5
<style>
    ul > li:not(li:nth-of-type(3)){
            color:yellowgreen;
        }
</style>

在网页中的呈现结果为：

赏

这多不好意思呀

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Nancy<br/><br/>西北工业大学<br/>计算机科学与技术