清纯女高秃头进度—css的开始

37 阅读3分钟

清纯女高秃头进度—css的开始

一.css的引入方式

  • 行内式 通过给标签设置 style属性来设置行内样式

  • 没有实现结构和样式分离,行内样式只能作用在一个标签上,不推荐

<p style="color: green;">我是段落</p>
<p style="color: blueviolet;">我是段落</p>
  • 内嵌式 通过在head标签内使用style标签设置内嵌样式

  • 样式和结构的部分分离,内嵌式作用在当前页面中,其他页面如果需要设置相同的样式需要复制,练习时使用

<head>
<style>
        span {
            background-color: aqua;
        }
 </style>
 </head>
  • 外链式 通过在head标签内使用link标签引入准备好的css文件

  • 结构和表现分离。耦合性低 一个css文件的样式可以作用在多个页面,修改方便,推荐

 <link rel="stylesheet" href="myStyle.css">
(新建一个css文件设置样式),如:
div {
    background-color: red;
}

二.css选择器

  • 选择器-----------css样式属性

    ​ 属性名1:属性值;

    ​ 属性名2:属性值;

    • 作用:将页面中的指定的标签选择出来给其添加样式
  • 基础选择器

    • 标签选择器:标签名 将页面中所有的同类型的标签选择出来 设置相同的样式
    • id选择器:格式:#id名{...} 将页面中具有指定id名的那一个标签选择出来
    • 类选择器:.类名{...} 将页面中具有指定类名的标签都选择出来
      1. 类选择可以给具有相同类名的标签设置共同的样式,给某一些标签添加独有的样式

      2. 类名的设置:推荐使用英文(拼音),不要使用中文,纯数字以英文字母开头

      3. 如果由多个单词组成,多个单词之间使用中划线链接

    • 通配符选择器:*{...} 将所有的标签都选择出来

三.复合选择器

  • 标签的关系

    • 嵌套
    • 并列
  • 标签的分类

    • 父元素(标签)———直接嵌套子元素的元素就是父元素
    • 子元素(标签)——— 直接被父元素嵌套的元素就是子元素
    • 祖先元素(标签)——— 直接或间接嵌套后代元素的元素就是祖先元素(爸爸和爷爷在代码中都是祖先)
    • 后代元素(标签)———直接或间接被祖先元素嵌套的元素就是后代元素
  • 组合(复合)选择器 :由多个基础选择器组合的选择器就是复合选择器

    • 后代选择器

      格式: 元素1 元素2{....}

      将元素1 后代中的元素2选择出来添加样式

    • 子选择器

      格式: 元素1>元素2{。。。。}

      将元素1的亲儿子元素2选择出来添加样式

    • 交集选择器

      格式:选择器1选择器2选择器3...{}

      将同时符合所有条件的标签选择出来

      当交集选择器中有标签选择器的时候,标签选择器要写在开头

      1.CSS代码:(class值不使用任何东西隔开,表示“且”) 筛选 class 值 同时具有 red 和 fontsize50 的标签,将字号设置为50px,文本颜色设置成红色: 在这里插入图片描述 2.筛选 class 值 为 blue 的 p 标签,将颜色调为蓝色: 在这里插入图片描述 3.显示效果: 在这里插入图片描述

    • 并列选择器

      格式:选择器1,选择器2,...{} 中间用 , 隔开

      作用:将多组符合条件的标签选择出来

      1.筛选 class 值 为 red 或 orange 的标签,将字体设定为 30px 在这里插入图片描述 2.显示效果: 在这里插入图片描述