前端学习-day3

TSyyds
179 阅读8分钟

CSS选择器、盒模型添加样式1

CSS中的基本概念

h1{
    color: red;
    background-color: lightblue;
    text-align: cente;
}

CSS规则=选择器+声明块

选择器

选择器：选中元素

  1. ID选择器：选中的是对应id值的元素(#001{})

  2. 元素选择器：选中所有同名元素（h2{}）

  3. 类选择器(class)：选中所有同类元素（.color{}）

    <style>
        h1 {
            color: red;
        }

        #p001 {
            color: yellow;
        }

        .green {
            color: green;
            text-align: center;
        }
    </style>


<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p id="p001">Lorem ipsum dolor sit amet consectetur.</p>
    <h2 class="green">Lorem ipsum dolor sit amet</h2>
    <p>Lorem ipsum dolor sit amet consectetur.</p>
    <p>Reprehenderit quo corrupti autem temporibus minima?</p>
    <h2 class="green">Lorem ipsum dolor sit amet</h2>
    <p>Lorem ipsum dolor sit amet consectetur.</p>
    <p>Quidem, sequi? Voluptatem quo accusantium quasi?</p>
</body>

声明块

声明块出现于{}中，包含了很多声明（属性），每一个声明（属性）表达了某一方面的样式

CSS代码书写位置——样式表

1. 内部样式表

书写在style元素中，在head里进行声明，例如：

<head>	
...
<style>css内容</style>
</head>

2. 内联样式表

元素样式表，直接书写在style属性中,例如：

<h1 style="color:red;">
    ~~
</h1>

3. 外部样式表【推荐】

​ 将样式书写到独立的CSS文件中（用link元素链接到对应的CSS文件）

<head>
...
<link rel="stylesheet" href="css文件地址">
</head>

​ 1). 外部样式可以解决多页面样式重复的问题

​ 2). 有利于浏览器缓存，从而提高页面响应速度

​ 3). 有利于代码分离（HTML和CSS），更容易阅读和维护

常见样式声明

1. color

元素内部的文字颜色

  1. 预设值：定义好的单词

  2. 色值：光学三原色（红、绿、蓝），每个颜色可以使用0-255之间的数字来表达，三原色组合起来的数值就叫做色值

色值的两种表示方法：
rgb表示法：
rgb(0,255,0)
hex（十六进制）表示法：
#红绿蓝

常见颜色

马尔斯绿：#008c8c

克莱因蓝：#002fa7

普鲁士蓝：#003153

申布伦黄：#fbd26a

勃艮第红：#470024

淘宝红：#ff4400, #f40

黑色：#000000，#000

白色：#ffffff, #fff

灰色：#cccccc,#ccc

红：#ff0000, #f00

绿：#00ff00, #0f0

蓝：#0000ff, #00f

紫：#f0f

青：#0ff

黄：#ff0

2. background

元素背景颜色

3. font-size

元素内部文字的尺寸大小，单位有：

1）px：绝对单位，像素，简单的理解为文字的高度占多少个像素

2）em：相对单位，相对于父元素的字体大小

每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号。

user agent，UA，用户代理（浏览器）

4. font-weight

文字粗细程度，可以取数字，可以取预设值

normal=400

bold=700

strong，默认加粗。

5.font-family

文字类型,字体

必须用户计算机中存在的字体才会有效。可使用多个字体，以匹配不同环境

sans-serif，非衬线字体，最好加在font-family的最后，增强适配性

6. font-style

字体样式，通常用它设置斜体，取值为italic时为斜体

i元素、em元素，默认样式是倾斜字体; 实际使用中，通常用它表示一个图标（icon）

7. text-decoration

文本修饰，给文本加线。

overline：文本上加线 line-through：穿过文本加线 underline：文本下加线

通常用于

a元素

del元素：错误的内容

s元素：过期的内容

8. text-indent

首行文本缩进，取值单位为px或em

9.text-align

元素内部文字的水平排列方式，最常见的取值有center

10. line-height

每行文本的高度，该值越大，每行文本的距离越大。

设置行高为容器的高度，可以让单行文本垂直居中

行高可以设置为纯数字，表示相对于当前元素的字体大小

11. width

宽度

12. height

高度

13. letter-space

文字间隙

选择器

简单选择器

  1. ID选择器
  2. 元素选择器
  3. 类选择器
  4. 通配符选择器，*{声明内容}，选中所有元素
  5. 属性选择器，根据属性名和属性值选中元素

[属性]{声明内容} 表示选择所有具有此属性的元素

[属性="属性值"]{} 特殊性更强，精确到属性值

  1. 伪类选择器，选中某些元素的某种状态

link，表示超链接未访问时的状态

visited，表示超链接访问后的状态

hover，表示鼠标悬停的状态

active，表示激活状态（鼠标按下）

爱恨法则:lvha(love hate)，伪类选择器书写有顺序要求

a:link{
color=green;
}
  1. 伪元素选择器

before

after

元素::before/after{声明内容}

选择器的组合

  1. 并且
  2. 后代元素—— 空格
  3. 子元素—— >
  4. 相邻兄弟元素—— +
  5. 后面出现的所有兄弟元素—— ~

选择器的并列

多个选择器，用逗号分隔

语法糖

层叠

声明冲突：同一个样式，多次应用到同一个元素

层叠（权重计算）：解决声明冲突的过程，浏览器自动处理

层叠分为三步，比较重要性，比较特殊性，比较源次序。

比较重要性

重要性从高到低为：

1）作者样式表中的**!important**样式

作者样式表：开发者书写的样式

2）作者样式表中的普通样式

3）浏览器默认样式表中的样式

比较特殊性

总体规则：看选择器，选择器选中的范围越窄越特殊

具体规则：通过选择器，计算出一个4位数，逐位比较数值，数值越大越特殊

​ 1）千位：如果是内联样式，记1，都则记0

​ 2）百位：等于选择器中所有id选择器的数量

​ 3）十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量

​ 4）个位：等于选择器中所有元素选择器、伪元素选择器的数量

经统计，这个数大概是逢256进1

比较源次序

代码书写靠后的胜出

例：

<head>
...
    <style>
        a {
            /* 0001 */
            color: red;
        }

        div ul a {
            /* 0003 */
            color: green;
        }
        
        #mydiv #myul a {
            /* 0201 */
            color: gray;
        }

        #mydiv #myul .mylink {
            /* 0210 */
            color: #008c8c;
        }

        #mydiv #myul :link{
            /* 0210 */
            color:chocolate;
        }
    </style>
</head>

<body>
    <div id="mydiv">
        <ul id="myul">
            <li id="myli">
                <a href="https://163.com" class="mylink">
                    举个例子
                </a>
            </li>
        </ul>
    </div>
</body>

应用

  1. 重置样式表

书写一些作者样式表，覆盖浏览器的默认样式

重置样式表 ——覆盖——> 浏览器的默认样式

常见的重置样式表：normalize.css、reset.css、meyer.css

  1. 爱恨法则

link > visited > hover > active

继承

子元素会继承父元素的某些CSS属性，通常跟文字内容相关的属性都能被继承

属性值的计算过程

  1. 浏览器渲染某一个元素之前，该元素的每一个CSS属性值必须都要有确定的值，否则是无法渲染的，即：渲染每个元素的前提条件是：该元素的所有CSS属性必须有值

    元素的 CSS 属性值从无到有的过程就叫作CSS 属性值的计算过程

  2. 元素渲染时的顺序会按照页面文档的树形目录结构进行

属性值计算过程

无属性值————>每个属性都有值

  1. 确定声明值
  2. 层叠冲突
  3. 使用继承
  4. 使用默认值

1. 确定声明值

参考样式表中没有冲突的声明，作为CSS属性值

2. 层叠冲突

对样式表中有冲突的声明使用层叠规则，确定CSS属性值

3.使用继承

对仍然没有值的属性，若可以继承，则继承父元素的值

4. 使用默认值

对仍然没有值的属性，使用默认值

特殊的两个CSS取值：

- inherit：手动（强制）继承，将父元素的值取出应用到该元素

- initial：初始值，将该属性设置为默认值

盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

盒子类型

  1. 行盒，display属性等于inline的元素
  2. 块盒，display属性等于block的元素

行盒在页面中不换行，块盒独占一行，display默认值为inline

浏览器默认样式表设置的块盒：容器元素、h1~h6、p

常见的行盒：span、a、img、video、audio

盒子的组成部分

无论是行盒还是块盒，都由下面几个部分组成，从内到外分别是：

  1. 内容 content

    width、height，设置的是盒子内容的宽高

    内容部分通常叫做整个盒子的内容盒 content-box

  2. 填充 （内边距） padding

    盒子边框到内容的距离

    padding-left、padding-right、padding-top、padding-bottom

    简/速写属性
padding:上 右 下 左
例：
padding:100px 80px 50px 50px
padding:50px 30px	 上下为50px,左右为30px
padding:50px		上右下左均为50

    填充区+内容区=填充盒 padding-box

  3. 边框 border

    边框=边框样式+边框宽度+边框颜色

    边框样式：border-style

    边框宽度：border-width

    边框颜色：border-color

    边框+填充区+内容区=边框盒 border-box

    速写属性
border:样式 宽度 颜色

  4. 外边距 margin

    边框到其他盒子的距离

    margin-top、margin-left、margin-right、margin-bottom

    速写属性margin与padding一样
margin:上 右 下 左
avatar
文章
阅读
粉丝