CSS学习笔记一

最新推荐文章于 2024-06-28 14:02:41 发布

wkxjhngw

最新推荐文章于 2024-06-28 14:02:41 发布

阅读量158

点赞数 1

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_50945128/article/details/110286440

版权

笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

CSS

CSS规则 = 选择器 + 声明块

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

选择器

选择器：选中元素

ID选择器

<p id="a">这是一个段落</p>
<style>
        #a{
            font-style: italic;
        }
</style>

元素选择器

<h1>这是一个标题</h1>
<style>
        h1{
            text-align: center;
        }
</style>

类选择器

<div class="a"></div>
<style>
        .a{
            font-size: 20px;
        }
</style>

通配符选择器

*，选中所有元素

<style>
        *{
            margin: auto;
        }
</style>

属性选择器

根据属性名和属性值选中元素

/* 选中所有具有href属性的元素 */
[href]{
    color:red;
}

伪类选择器

选中某些元素的某种状态

1）link: 超链接未访问时的状态

a:link {
    color: chocolate;
}

2）visited: 超链接访问过后的状态

a:visited {
    color: rgb(113, 133, 0);
}

3）hover: 鼠标悬停状态

/* 选中鼠标悬停时的a元素 */
a:hover{
    color:red;
}

4）active：激活状态，鼠标按下状态

/* 鼠标按下时的a元素 */
a:active{
    color:#008c8c;
}

爱恨法则

link > visited > hover > active

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a:link{
            color: green;
        }

        a:visited{
            color: red;
        }

        a:hover{
            color: chocolate;
        }

        a:active {
            color: #000;
        }
    </style>
</head>
<body>
    <a href="http://163.com">
        网易
    </a>
</body>
</html>

在这里插入图片描述

伪元素选择器

before

after

<p><span>怦然心动</span>是一部好看的电影</p>

span::before{
    content: "《";
    color: orangered;
}
span::after{
    content: "》";
    color: orangered;
}

效果如下
在这里插入图片描述

选择器的组合

并且
后代元素 —— 空格
子元素 —— >
相邻兄弟元素 —— +
后面出现的所有兄弟元素 —— ~
选择器的并列
多个选择器, 用逗号分隔

声明块

出现在大括号中

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

常见样式声明

color	元素内部的文字颜色
background-color	元素背景颜色
font-size	元素内部文字的尺寸大小
font-weight	文字粗细程度，可以取值数字，可以取值为预设值
font-family	文字类型
font-style	字体样式，通常用它设置斜体
text-decoration	文本修饰，给文本加线
text-indent	首行文本缩进
line-height	每行文本的高度
width	宽度
height	高度
letter-space	文字间隙
text-align	元素内部文字的水平排列方式

CSS代码书写位置

内部样式表

书写在style元素中

<style>
        #a{
            font-style: italic;
        }
        h1{
            text-align: center;
        }
        .a{
            font-size: 20px;
        }
        *{
            margin: auto;
        }
    </style>

内联样式表，元素样式表

直接书写在元素的style属性中

<h1 style="text-align: center;">这是一个标题</h1>

外部样式表

将样式书写到独立的css文件中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <h1 class="red-big-center">
        这是一个标题
    </h1>
    <p >
        Lorem, ipsum dolor.
    </p>
    <p class="color">Lorem ipsum dolor sit amet.</p>
    <p>Voluptatem non blanditiis eaque voluptatibus.</p>
    <p>Rerum similique quo enim tenetur.</p>
</body>
</html>

在这里插入图片描述
效果如下：

1). 外部样式可以解决多页面样式重复的问题
2). 有利于浏览器缓存，从而提高页面响应速度
3). 有利于代码分离（HTML和CSS），更容易阅读和维护

层叠

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

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

1. 比较重要性

重要性从高到底：

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

作者样式表中的!important样式
作者样式表中的普通样式
浏览器默认样式表中的样式

2. 比较特殊性

看选择器

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

具体规则：通过选择器，计算出一个4位数（x x x x）

千位：如果是内联样式，记1，否则记0
百位：等于选择器中所有id选择器的数量
十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
个位：等于选择器中所有元素选择器、伪元素选择器的数量

3. 比较源次序

代码书写靠后的胜出

应用

重置样式表

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

重置样式表 -> 浏览器的默认样式

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

爱恨法则

link > visited > hover > active

继承

子元素会继承父元素的某些CSS属性

通常，跟文字内容相关的属性都能被继承

属性值的计算过程

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行

渲染每个元素的前提条件：该元素的所有CSS属性必须有值

一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程

属性值计算过程简介

确定声明值：参考样式表中没有冲突的声明，作为CSS属性值
层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值
使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
使用默认值：对仍然没有值的属性，使用默认值

<style>
        div {
            width:100px;
            height: 100px;
            background: lightblue;
        }

        .mydiv{
            background: initial;
        }
</style>

<body>
    <div class="mydiv"></div>
</body>