day1125_CSS基础知识

一、CSS基础知识

1、css使用位置

• css含义:层叠样式表

• 对标签结构进行修饰的

• css基本语法

  选择器{
  	属性:属性值;
  	属性:属性值;
  	属性:属性值;
  }
  

  • 介绍
    • 选择器:查找页面元素的一种方式方法
    • {}:样式规则,样式声明,对选择器查找到的元素进行修饰的一个规则
  • 面试题
    • css基本语法几个部分组成？两个:选择器和样式声明
    • css样式声明有几个部分组成？两个:属性和属性值

• css语法的应用位置==三个位置都可以

  • 标签内部,行内位置处===行内样式表

    • 基本语法:<标签名字 style=“属性:属性值;属性:属性值;属性:属性值”>

    • 弊端:

      • 代码重复率较高,比较冗余
      • HTML和CSS放在一起比较混乱,代码不整洁;
      • 没有做到结构和样式的分离

  • 页面内部使用==内部样式表

    • 基本语法：

    • 优点:代码HTML和CSS分离;一次书写,多处使用;代码比较简介

    • 缺点:精准度不高;没有做到充分分离

  • 外部使用位置

    • 重要内容:把所有的修饰的语句都放在一个独立的以.css结尾的后缀名文件中
    • 基本语法:

• 优先级别

  • 问题:三种位置:实际开发的时候,为了方便开发,为了方便爬虫获取页面的相关信息;推荐使用外部样式
  • 问题:三个位置一起使用的时候,我们实现的样式以谁为准?
  • 两两对比
    • 行内和内部:行内 > 内部
    • 内部和外部:内部 > 外部
      • 特殊情况:代码执行顺序是从上向下执行的;后面的代码会覆盖掉前面的代码;如果你的外部修饰在内部修饰的底部,则实现的效果是外部修饰;(外部>内部)
      • 实际开发情况:开发过程中,原则:所有引入的东西,都必须放在前面
    • 行内和外部:行内 > 外部
    • 遵循的一个原则:就近原则,谁挨着标签近就实现谁的效果
    • 行内>内部>外部

2、 css选择器

• 选择器{样式规则}
• 选择器:查找页面元素的一种方式方法
• 标签名选择器
  • 让标签名字当作选择器使用
  • 基本语法:p{} div{}
  • 让标签名字当作选择器使用,只要你叫这个名字，无论你的嵌套级别多深都能实现效果
  • 优点:直接
  • 缺点:匹配范围过于广泛,精准度不高

示例

<!-- html部分 -->
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div
   <p>我是div里的p</p>
</div>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<p>我是一个独立的p</p>
<p>我是一个独立的p</p>
<p>我是一个独立的p</p>

<!-- css部分 -->
div{
    width: 200px;
    height: 100px;
    background-color: red;
}
p{
    width: 100px;
    height: 100px;
    background-color: yellow;
}

• class类名选择器
  • 给元素起一个别名,通过这个别名找到页面中的元素
  • 基本语法:
    • 起名:
    • 查找:.box{}
  • 注意事项:
    • .不能省略,因为他是class类的标志;
    • 一个标签可以起多个不同的类名:最多三个 三个名字都是比较语义化的,方便认识
    • 起多个类名的时候,共用一个class并且,多个名字之间使用空格隔开
    • 优点:提高了我们的精准度
    • 缺点:精准度不是特别高,因为不同的元素可以起相同的类名

示例

<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div
    <p>我是div里的p</p>
</div>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<p class="p1 pone">我是一个独立的p</p>
<p class="p1 pone">我是一个独立的p</p>
<p class="p1 ptwo">我是一个独立的p</p>

.p1{
    width: 100px;
    height: 100px;
    background-color: blue;
}
.pone{
    width: 150px;
    height: 150px;
    color: purple;
    background-color: orange;
}

• ID选择器
  • 通过给元素起一个id名字,通过这个id名字找到这个元素
  • html基本语法:
  • css查找:#box{}
  • 注意事项:#必须携带的;id具有唯一性;任何一个标签都可以有id属性,但是名字只能出现一次
  • 注意事项:如果id出现了相同的取值;则实现效果与class一致;为了保证我们id获取,我们需要自己设置成独立名字,严禁出现相同名字

<!-- html部分 -->
<div id="box1">我是一个div</div>
<div id="box2">我是一个div</div>
<div id="小小淞">我是一个div</div>
<div>我是一个div
    <p>我是div里的p</p>
</div>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<p>我是一个独立的p</p>
<p>我是一个独立的p</p>
<p>我是一个独立的p</p>

<!-- css部分 -->
#box1{
    width: 200px;
    height: 200px;
    background-color: red;
}
#box2{
    width: 300px;
    height: 300px;
    background-color: aqua;
}
#小小淞{
    width: 250px;
    height: 250px;
    background-color: blue;
}

• 群组选择器(逗号选择器,并集选择器)

  • 问题:如何把公共的代码提取出来?
  • 需要使用的选择器:群组选择器(并集选择器,逗号选择器)
  • 基本语法
    • 选择器1,选择器2,选择器3{样式规则}

示例

<!-- html部分 -->
<div>法兰德装甲</div>
<div>大荒囚天指</div>
<h1>哥斯拉</h1>
<h1>我叫腾大帝</h1>
<p>哥斯拉</p>
<p>我叫腾大帝</p>

<!-- css部分 -->
div,h1,p{
    width: 200px;
    height: 50px;
}
div{ 
    background-color: red;
}
h1{
    background-color: blue;
}
p{
    background-color: orange;
}

• 通配符选择器

  • *====统配符
  • 用来匹配页面中的所有元素,或者是某一个区域中的所有元素,实现对应的样式
  • 基本语法
    • *{margin:0;padding:0}
  • 如果想要实现对应的距离我们再单独添加即可;

• 后代和子代选择器

  • 什么是后代,什么是子代
  • 后代:除了了儿子辈分的人之外还有孙子辈分,重孙子辈分的人
  • 子代:只有一个辈分:父子关系
  • 后代选择器
    • 从当前元素出发,查找符合条件的所有后代元素(儿子备份的元素,和孙子辈分的元素等等)
    • 基本语法
      • 选择器1 选择器2{}
  • 子代选择器
    • 从当前元素出发,查找符合条件的子代元素(只有儿子辈分的元素)
    • 基本语法
      • 选择器1>选择器2{}

<!-- html部分 -->
<ul>
    <li>我是老大</li>
    <li>我是老二</li>
    <li>我是老三</li>
    <li>我是老四
        <ol>
            <li>我是111</li>
            <li>我是222</li>
            <li>我是333</li>
            <li>我是444</li>
        </ol>
    </li>
    <li>我是老五</li>
</ul>

• 问题

  • ul里面有多少个子代? 答:5个子代
  • ul里面有多少个后代? 答:10个后代
  • ul里面有多少个子代的li? 答:5个
  • ul里面有多少个后代的li? 答:9个

• 问题:是不是后代选择器匹配到的数量一定比子代选择器匹配到的数量多?

  • 答:可能存在等于的情况

• 选择器权重值

  • 采用两两对比的形式

  • 不同的选择器修饰同一个元素的时候,我们要考虑选择器的权重值

    • 标签和类:类大于标签
    • 类和id :id>类
    • 标签和id :id>标签

  • id(100)>类(10)>标签(1)>通配符(0)—括号里面的数值代表权重值

  • 应用的时候大部分是配合后代和子代选择器一起使用

  • 问题:如何找到这个p标签

    • p{}

      div>p{}

      div p{}

      .box>p{}

      .box p{}

      #bobo p{}

      #bobo>p{}

    • 使用不同的符合选择器实现的是哪一个效果

    • 涉及到权重值的相加

  • 权重值相加,基础的嵌套遵循权重值相加没有问题

  • n层以上的嵌套(n=10)(相同的选择器),不在遵循权重值相加的概念,始终遵循的是id>类>标签

3、 css核心部分:样式规则

3.1 文本规则

• 主要对文字进行修饰的

  • 文本大小规则

    • 属性:font-size
    • 属性值:数值+单位
    • 默认字体大小为16px;
    • 最新版本浏览器能设置成小于12px的字体

  • 文本的字体

    • 属性:font-family(字体族科)
    • 取值
      • 使用中文字体,不需要带引号
      • 如果使用英文字体,单个英文单词组成的字体,不需要带引号,多个英文单词组成的字体需要带引号;
      • 可以跟多个字体取值;多个字体之间使用逗号隔开;
      • 多个字体设置被称为安全字体;读取的时候,从左向右依次读取;如果第一个字体支持的话则实现效果,如果不支持,依次向后;都不支持则使用默认字体

  • 文本加粗

    • 属性:font-weight

    • 取值:两种

      • 数值类型
        • 100-900 整百的数值
        • 100====细体
        • 400====正常字体
        • 700====加粗字体
        • 900====更粗字体(强调性)
      • 关键词类型
        • lighter==细体
        • normal==正常字体
        • blod==加粗字体
        • border==更粗字体(强调性)

    • 问题1:为什么已经有了b标签还要学习CSS:font-weight:blod

      • 简化页面结构,可以实现任何一个标签都能加粗

      • CSS属性能方便我们只做一些简单的交互效果(划过)

      • 选择器:hover{

        ​ color:red;

        ​ font-weight:bold

        }

    • 问题2:为什么知道有默认文本还要学习font-weight:normal

      • 取消h1-h6,b,strong默认加粗效果;

  • 文本的倾斜

    • 属性:font-style
    • 取值
      • italic====倾斜
      • oblique===斜体字(强调性)
      • normal====正常字体
    • 问题1:为什么知道有i标签还要学习font-style:italic 同上
    • 问题2:为什么没有倾斜还要学font-style:normal 同上

  • 小型大写

    • 属性:font-variant
    • 取值:small-caps

  • 首行缩进

    • 属性text-indent
    • 问题:如何在不隐藏盒子(元素)的情况下,把元素内的文本隐藏掉?
      • text-indent:-999999px;
      • font-size:0px;

  • 水平对齐方式

    • 属性:text-align
    • 取值
      • left====左侧对齐
      • right==右侧对齐
      • center=居中对齐
      • justify=两端对齐
    • 能否让最后一行文本/单独只有一行文本的标签内容实现两端对齐
    • 属性:text-align-last:justify

示例

<!-- html部分 -->
<p class="p1">原来:你好呀,欢迎来到叉叉学院,我们学校的食堂不好吃 My name is Huang Song</p>
<p class="p2">修饰:你好呀,欢迎来到叉叉学院,我们学校的食堂不好吃 My name is Huang Song</p>
<p class="p3">奥特曼</p>
<h1>标题1</h1>
<p class="p4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium rem cum quis, rerum eveniet autem ratione excepturi suscipit harum blanditiis unde eaque nesciunt dignissimos. Architecto autem eligendi impedit ipsum expedita.
     Est consectetur excepturi debitis quasi aspernatur dolores maiores accusamus, doloribus quam ipsam inventore a porro consequuntur. Maiores porro possimus, dolore esse tenetur itaque id quidem saepe hic qui, placeat excepturi.
     Impedit fugiat magnam eligendi fugit consequuntur laboriosam, inventore dolores. Aut officiis consequatur aspernatur ratione numquam dolores beatae libero soluta nihil sequi repellendus hic, neque perspiciatis eos nobis dicta eius exercitationem?
     Sed voluptas reiciendis rerum, exercitationem ut aliquam soluta optio maxime vitae ipsam, at dolores ducimus repellat praesentium illo cumque deleniti! Adipisci, dolores itaque. Non quo nesciunt asperiores, magnam dicta minus.</p>

<!-- css部分 -->
.p2{
    /* 1)文本大小 */
    /* font-size: 16px; */
    /* 2)字体属性 */
    /* font-family: 楷体; */
    /* 3)加粗 */
    /* font-weight: lighter; */
    /* 4)倾斜 */
    /* font-style: oblique; */
    /* 5)小型大写 */
    /* font-variant: small-caps; */
    /* 6)首行缩进 */
    /* text-indent: -999999px; */
    /* font-size: 0px; */
}
.p3:hover{
    color: red;
    font-weight: blod;
    font-style: italic;
}
.p4{
    text-align-last: justify;
}