CSS基础

CSS基础

Administrator 643 2023-10-27

CSS基础

一、什么是CSS

层叠样式表,作用是给HTML元素设置样式

二、CSS语法规则

p {
  color: red;
}
  • p: 元素选择器

  • color: css属性

  • red: color的属性值

css写在style标签内,style标签放在head标签中,同时一般在title标签后

三、CSS初体验

常见属性

  1. color: 文本颜色

  2. font-size: 文本大小

  3. background-color: 背景颜色

  4. width: 宽度

  5. height: 高度

注意:CSS的标点符号都是半角符号(英文符号),一个样式写完之后都要加分号

四、CSS的引入方式

  1. 内嵌式:css属性写在head标签下的style标签内

  2. 外联式:使用head标签下的link标签引入外部css样式表文件

  3. 行内式:直接在元素上加上style属性,为当前元素添加样式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌样式 -->
    <style>
        p {
            color: #fff;
            font-size: 36px;
            background-color: green;
        }
    </style>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="./styles/18. css基础.css">
</head>
<body>
    <p>Hello, World! 你好,世界!</p>
    <h1>测试外部样式表</h1>
    <!-- 行内样式 -->
    <h2 style="color: #f0f; background-color: red;"></h2>
</body>
</html>
/*css文件*/
h1 {
    color: yellow;
    background-color: pink;
    font-size: 48px;
}

五、CSS的基础选择器

基础选择器的种类

  • 标签选择器

  • 类选择器

  • id选择器

  • 通配符选择器

选择器的作用:选中页面内对应的标签,然后对符合条件被选中的标签设置样式

  1. 标签选择器

    • 结构:标签名 {CSS属性名: CSS属性值; ....}

    • 作用:通过标签名在页面内找到对应的所有标签,再对这些相同的标签设置样式

    • 注意:

      • 标签选择器是选择页面内所有的相同标签,而不是单独的某一个

      • 在html文件中无论标签的嵌套关系有多深,选择器都能起作用

  2. 类选择器

    • 结构:.类名{CSS属性名: CSS属性值; ...}

    • 作用:通过类名在页面内找到对应的标签,再对这些标签设置样式

    • 注意:

      • 所有的标签都有class属性,class属性用于声明标签的类

      • 类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头

        • 类名合法

          • one

          • one-1

          • one_2

          • _one-1

        • 类名不合法

          • 1one

          • -one

      • 同一个标签可以有多个类名,类名与类名之间使用空格隔开

      • 类名可以重复,一个类名可以同时作用于多个相同或不同的标签上

      • 当一个标签拥有多个类名时,CSS效果是叠加的

  3. id选择器

    • 结构:#id {CSS属性名: CSS属性值; ...}

    • 作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式

    • 注意:

      • 所有的标签都有id属性,id不可以重复

      • 一个标签只能有一个id

      • 一个id只能选择一个标签

      • id和class的名字可以一样,但是id全局只能有一个

  4. 类和id的区别

    • 类相当于人名,可以重复,id相当于身份证号,不可以重复

    • 一个标签只能有一个id,但是可以有多个类

    • 类选择器以.开头,id选择器以#开头

    • 类选择器用的多,id选择器用的少

    • id一般配合js做交互,除非特殊情况,否则不要使用id设置样式

  5. 通配符选择器

    • 结构:*{CSS属性名: CSS属性值; ...}

    • 作用:选择页面内的所有标签,对标签进行样式的设置

    • 注意:

      • 开发中极少使用

      • 如果使用了通配符选择器,极有可能会发生样式错乱

六、字体样式

  1. 字体大小

    p {
      font-size: 20px;
    }
    • 属性名:font-size

    • 值:数字+px

    • 注意:

      • 谷歌浏览器默认字体大小为16px

      • 属性值设置的时候必须给定单位,不能省略,否则无效

  2. 字体粗细

    p {
      font-weight: 100;
    }
    • 属性名:font-weight

    • 取值:数字或关键字

      • 数字:100~900

      • 关键字:normal(普通大小,400),bold(文本加粗,700)

    • 注意:

      • 不是所有字体都有9种粗细,因此我们在实际开发的过程种一般使用关键字进行字体粗细的定义

  3. 字体样式(是否倾斜)

    p {
      font-style: italic;
    }
    • 属性名:font-style

    • 取值:italic(倾斜)或normal(正常)

  4. 字体类型(系列)

    p {
      font-family: 宋体, 楷体, 黑体, 微软雅黑;
    }
    • 属性名:font-family

    • 取值:常用字体名

    • 渲染规则

      • 从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体

      • 如果都不支持,此时会根据操作系统,显示最后字体系列的默认字体

    • 注意:

      • 如果字体名称中存在多个单词,推荐使用引号包裹

      • 最后一项字体系列不需要引号包裹

      • 网页开发时,尽量使用系统常见自带字体,保证不同用户浏览网页都可以正确显示

  5. 样式层叠问题

    p {
      font-size: 16px;
      font-size: 22px;
    }

    以上代码字体大小为22px,因为同时设置了两个font-size属性,只有最后一个属性才会生效,上面设置的属性被下面相同是属性给覆盖了。

七、文本样式

  1. 文本缩进

    p {
      text-indent: 2em;
    }
    • 属性名:text-indent

    • 取值:数字+px或数字+em

      • px:绝对单位,像素值大小

      • em:相对单位,当前选择器的fontsize的背书,如果当前字体大小为16像素,那么1em=16px

  2. 文本对齐方式

    p {
      text-align: center;
    }
    • 属性名:text-align

    • 取值:left 左对齐, center 居中对齐, right 右对齐

  3. 文本修饰

    p {
      text-decoration: underline;
    }
    • 属性名:text-decoration

    • 取值:underline 下划线, overline 上划线, line-through 删除线,none 无

    • 注意:

      • 这个属性可以给定两个值,一个是修饰的类型,另一个是样式的类型

      • 修饰的类型:underline, overline, line-throught, none

      • 样式的类型:dashed 虚线, dotted 点划线, solid 实线, double 双划线

        p {
          text-decoration: underline double; /*双划线样式的删除线*/
        }
  4. 行高

    p {
      line-height: 20px;
    }
    • 属性名:line-height

    • 取值:数字+px或倍数(当前文本大小的倍数)

  5. 文本颜色

    p {
      color: red;
    }
    • 属性名:color

    • 取值:颜色名,十六进制颜色值,rgb颜色函数,rgba颜色函数

      • 颜色名:red, blue, green, yellow等

      • 十六进制颜色值:#f00, #fff, #ff0000, #f0f0f0

      • rgb函数:rgb(153,153,153)

      • rgba函数:rgba(153,153,153,0.5)

        • rgba和rgb函数相比多了一个透明度的设置

八、进阶选择器

  1. 复合选择器

    • 后代选择器

      根据 HTML 标签的嵌套关系,选择父元素 后代中 满足条件的元素

      语法:选择器1 选择器2 {css}

      在选择器1所找到标签的后代(儿子、孙子、重孙子…)中,找到满足选择器2的标签,设置样式

      注意:后代包括了子、孙、重孙等后代,选择器与选择器之间用空格隔开

    • 子代选择器(直接子元素选择器)

      根据 HTML 标签的嵌套关系,选择父元素子代中满足条件的元素

      语法:选择器1 > 选择2 {css}

      在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式

      注意:子代只包括儿子(直接子元素),子代选择器中,选择器与选择器之前通过 > 隔开

  2. 并集选择器

    同时选择多组标签,设置相同的样式

    语法:选择器1, 选择器2 {css}

    找到 选择器1 和 选择器2 选中的标签,设置样式

    注意:选择器与选择器之间使用半角逗号分割,并集选择器中的每一组选择器可以是基础选择器或者是复合选择器,并集选择器在书写的时候通常一行写一个以逗号结尾,提高代码可读性

  3. 交集选择器

    选中页面中 同时满足 多个选择器的标签

    语法:选择器1选择器2 {css}

    在页面中找到同时既能被选择器1选中又能被选择器2选中的标签

    注意:交集选择器中间是紧挨着的,没有其他符号分割,如果交集选择器中具有标签选择器,那么标签选择器应放在最前面

  4. hover伪类选择器

    选中鼠标悬停在元素上的状态,设置样式

    语法:选择器:hover {css}

    在页面中选中选择器设置鼠标经过标签的样式

    注意:伪元素选择器选中的是元素的某种状态

九、背景相关属性

  1. 背景颜色

    • 属性名:background-color

    • 属性值:颜色名、十六进制颜色值、rgb, rgba

    • 注意:背景颜色的默认值是透明(rgba(0,0,0,0), transparent),背景颜色不会影响到容器的大小

  2. 背景图片

    • 属性名:background-image

    • 属性值:url('图片路径')

    • 注意:

      • 属性值中的图片路径可以省略引号

      • 背景图默认是在水平和垂直方向进行平铺(重复)

      • 背景图片仅能给容器起到装饰效果,不能改变容器的大小,类似于背景颜色

  3. 背景平铺

    • 属性名:background-repeat

    • 属性值:no-repeat, repeat-x, repeat-y, repeat

      • no-repeat: 不平铺

      • repeat-x: 水平方向平铺

      • repeat-y: 垂直方向平铺

      • repeat: 默认,水平和垂直方向平铺

  4. 背景位置

    • 属性名:background-position

    • 属性值

      • 方位名词

        • 第一个参数水平位置:left, center, right

        • 第二个参数垂直位置:top, center, bottom

      • 数字+px

        • 第一个参数水平位置:以容器的左上角为原点,距离原点的水平像素值

        • 第二个参数垂直位置:以容器的左上角为原点,距离原点的垂直像素值

    • 注意:方位名词和数字+px可以混用

十、元素显示模式

  1. 块状元素

    • 可以设置宽高

    • 独占一行

    • 宽度默认是父元素的宽度,高度默认自动(由容器内的内容所决定)

  2. 行内元素

    • 不可以设置宽高

    • 一行显示多个

    • 宽度和高度默认都是由内容决定

  3. 行内-块状元素

    • 具有行内元素和块状元素的特点

    • 可以设置宽高

    • 一行显示多个

  • 元素显示模式的转换

    通过设置元素的display属性来改变元素的现实模式

    display: block 设置元素的显示模式为块状元素

    display: inline 设置元素的显示模式为行内元素

    display: inline-block 设置元素的显示模式为行内块状元素

十一、选择器优先级

不同的选择器具有不同的优先级,优先级高的选择器的样式会覆盖优先级低的选择器的样式

优先级:集成 < 通配符 < 标签 < 类 < ID < 行内样式 < !important

!important是什么?

当某个样式不生效的时候,我们可以使用important关键字对样式进行声明,有important修饰的样式会在当前页面内强制生效。

实际开发过程中不会使用该关键字

十二、盒模型

盒子的概念

  • 页面中的每一个元素,都可以看成是一个盒子,通过盒子的视角可以更方便的进行布局

  • 浏览器在渲染页面的时候,会将网页中的每一个元素都看做是一个个的矩形区域,我们也形象的称之为盒子

盒子模型

  • 盒子的区域是由内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)组成。

盒模型内容的宽高

  • width:内容的宽度

  • height:内容的高度

    这里的宽高在默认情况下声明的是内容区域的宽高

边框

  • border: 给盒子设置四个边框的粗细、样式和颜色。

    • border-width: 设置边框的宽度(粗细)

    • border-style: 设置边框的样式

      • solid: 实线

      • dashed: 虚线

      • dotted: 点虚线

      • double: 双实线

    • border-color: 设置边框的颜色

      • 颜色名:red, yellow等

      • 十六进制颜色值:#ff0000

      • rgb函数

      • rgba函数

    • 以上三个样式可以简写:

      • border: [width] [style] [color];

        • border: 1px solid red;

  • 给盒子设置单个边框的样式

    • border-left: 设置左边边框

    • border-right: 设置右边边框

    • border-top: 设置上边边框

    • border-bottom: 设置下边边框

内边距

  • padding: 给盒子设置内容到边框的距离

    • padding可以有1~4个参数

    • padding: 10px; 给盒子四周都设置内边距为10px

    • padding: 10px 20px; 给盒子上下设置内边距为10px,左右设置内边距为20px

    • padding: 10px 20px 30px; 给盒子上边设置内边距为10px,左右设置内边距为20px,下边内边距为30px

    • padding: 10px 20px 30px 40px; 给盒子上边设置内边距10px,右边内边距20px,下边内边距30px,左边内边距40px

    • padding的四个参数分别为上、右、下、左,如果没有设置对应的边,则该边默认的值为其对边的值。

  • 单独设置某个方向的内边距

    • padding-left: 设置左内边距(padding: 0 0 0 10px)

    • padding-right: 设置右内边距(padding: 0 10px 0 0)

    • padding-top: 设置上内边距(padding: 10px 0 0 0)

    • padding-bottom: 设置下内边距(padding: 0 0 10px 0)

盒子的width和height属性设置的是盒子内容的宽高,而不是盒子整体的宽高,因此,当我们对盒子设置内边距和边框之后,盒子会被撑大,因为盒子的大小是由边框、内边距和内容组成,所以盒子宽高的计算公式如下:

宽=左边框宽度+左内边距大小+内容宽度+右内边距大小+右边框宽度

高=上边框宽度+上内边距大小+内容高度+下内边距大小+下边框宽度

当我们在使用如上公式计算的时候,非常麻烦,我们希望可以更简单的对宽高进行计算,因此,我们在实际开发当中,一般宽高直接设置盒子的宽高,之后在盒子上加上属性

box-sizing:border-box; 这时候,内容的宽高就由浏览器去计算,而我们设置的宽高不再是内容的宽高,而是盒子的宽高。

外边距

  • margin: 设置盒子与盒子之间的距离

    • 参数与padding一样,都可以有1~4个参数,分别对应上、右、下、左。

  • 单独设置某个方向的外边距

    • margin-方位名词(left, right, top, bottom)

标签的初始化

浏览器在默认情况下会给部分标签添加默认的margin和padding,因此我们在正式开发之前,需要对默认的margin和padding进行清楚

* {
  margin: 0;
  padding: 0;
}
/* 清楚浏览器的默认设置 */

外边距正常的情况:水平布局的盒子,左右外边距正常,互不影响

外边距折叠现象:垂直布局的块级元素,上下外边距会合并,最终上下的外边距会以大的为准

外边距的塌陷现象:当父子元素嵌套的时候,给子元素设置上边距,父元素会跟着一起往下移动,解决方法如下:

  1. 给父元素设置border-top 或者 padding-top(分隔父子元素的margin-top)

  2. 给父元素设置overflow:hidden

  3. 转换成行内块元素

  4. 设置子元素浮动

十三、结构伪类选择器

  • 作用和优势

    • 作用:根据元素在HTML中的结构关系查找元素

    • 优势:减少对于HTML中类的依赖,有利于保持代码整洁

    • 场景:常用于查找某父级选择器中的子元素

  • 选择器

    • E:first-child{}

      • 匹配父元素中第一个子元素,并且是E元素

    • E:last-child {}

      • 匹配父元素中最后一个子元素,并且是E元素

    • E:nth-child(n) {}

      • 匹配父元素中第n个子元素,并且是E元素

    • E:nth-last-child(n) {}

      • 匹配父元素中倒数第n个子元素,并且是E元素

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #list li:nth-child(3) a {
            color: red;
        }
        #list li:nth-child(n+5) a {
            color: green;
        }
        #list li:nth-child(even) {
            background-color: #f0f0f0;
        }
        #list li:nth-child(odd) {
            background-color: #ffffff;
        }
        #list li:first-child a,
        #list li:last-child a {
            color: black;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <!-- 
        对第3个元素设置字体颜色为红色
        对第5~第8个元素设置字体颜色为绿色
        对列表设置斑马纹效果(奇数行背景色为#f0f0f0,偶数行背景色为#ffffff)
        对第1和最后一个元素设置字体颜色为黑色
        对所有的文字都去掉下划线
     -->
    <ul id="list">
        <li><a href="#">第1个a元素</a></li>
        <li><a href="#">第2个a元素</a></li>
        <li><a href="#">第3个a元素</a></li>
        <li><a href="#">第4个a元素</a></li>
        <li><a href="#">第5个a元素</a></li>
        <li><a href="#">第6个a元素</a></li>
        <li><a href="#">第7个a元素</a></li>
        <li><a href="#">第8个a元素</a></li>
    </ul>
</body>
</html>