首页 前端知识 CSS概述 | CSS的引入方式 | 选择器

CSS概述 | CSS的引入方式 | 选择器

2024-03-13 00:03:24 前端知识 前端哥 424 741 我要收藏

文章目录

        • 1.CSS概述
        • 2.CSS的引入方式
          • 2.1.内部样式表
          • 2.2.行内样式表
          • 2.3.外部样式表
        • 3.选择器

1.CSS概述

CSS,全称Cascading Style Sheets(层叠样式表),是一种用来设置HTML(或XML等)文档样式的语言。CSS的主要作用是描述网页的布局和外观,包括颜色、字体、间距、背景图像等,CSS可以和HTML内容经行分离,这样,一个CSS样式可以用在多个HTML页面,修改时候可以只修改一个CSS文件即可。

CSS的基本语法

选择器 + 一条或N条声明选择器决定针对谁做修改,比如想要对p标签中的字体大小和颜色进行修改,那么p就是一个选择器,这样类型的选择器称为元素选择器

声明,是在一对花括号{}中进行声明 ,每个声明都由两部分组成:属性和值;注:CSS 不区分大小写, 开发时通常使用使用小写字母

p {
  color: red;
  font-size: 16px;
}
2.CSS的引入方式
2.1.内部样式表

通过style 标签将CSS样式嵌入到 html 内部,当CSS内容特别多的时候,html页面就显得很大。这不是一种很好的方法,但是有些网页还是会用,我感觉是历史遗留的问题,哈哈哈。

理论上来说 style 放到 html 的哪里都行,但是一般都是放到 head 标签中。

<html lang="en">
<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p>天空为什么是蓝色的</p>
    </div>
</body>
</html>
2.2.行内样式表

通过 style 属性, 来指定某个标签的样式,只适合于写简单样式. 只针对某个标签生效,这种写法优先级较高, 会覆盖其他的样式

<head>
    <style>
        p { color: red; }
    </style>
</head>
<body>
    <p style="color:blue">天空是什么颜色</p> 
</body>
2.3.外部样式表

实际开发中最常用的方式,创建后缀为css的文件, 使用 link 标签引入 css。

在同级目录下的css文件夹中创建style.css文件

p{
    color: blue;
    font-size: 18px;
}

在一个HTML的文件中引用外部的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/style.css">
</head>
<body>
    <p>大海为什么是蓝色的</p>
</body>
</html>

这样的好处是css样式和html结构彻底分离了,但是受到浏览器缓存影响, 修改之后 不一定 立刻生效。

关于浏览器的缓存

缓存(Cache):提升性能的技术手段,网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取,如果频繁访问该网站, 那么这些外部资源就没必要反复从服务器获取,浏览器就可以使用缓存先存起来(就是存在本地磁盘上), 减少网络传输的时间和带宽消耗,从而提高访问效率。可以使用 ctrl + F5 强制刷新页面;

3.选择器

前面我们就一直在使用选择器(元素选择器),选择器选中标签元素从而设置元素的属性。选择器可以分为基础选择器和复合选择器,我主要分享常见的基础选择器,关于复合选择器可以去参考文档:链接

注:下面的css代码,都是放在和html同级的css文件夹下

标签选择器

能快速为同一类型的标签都选择出来,但是不能差异化选择

p{
    color: blue;
    font-size: 18px;
}
<link rel="stylesheet" href="./css/style.css">
<p>大海为什么是蓝色的</p>
<p>红苹果</p>

展示结果:使用p标签标识的标签就都是蓝色的了

在这里插入图片描述

类选择器

类名用.开头的,下方的标签使用 class 属性来调用,如果类名过长, 可以使用 - 分割

.box-height-width{
    height: 50px;
    width: 300px;
}

.blue{
    color: blue;
}

.red{
    color: red;
}

html页面可以使用class引入多个样式,中间用空格隔开

<p class="blue box-height-width">大海为什么是蓝色的</p>
<p class="red ">苹果是红色的</p>

展示结果:

在这里插入图片描述

id选择器

CSS 中使用 # 开头表示 id 选择器,id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)

#box{
    height: 500px;
}

#blue{
    color: blue;
}
<p id="blue box">苹果</p>
<p id="blue">大海为什么是蓝色的</p>

展示结果:

在这里插入图片描述

通配符选择器

使用 * 的定义, 选取所有的标签

* {
    color: blue;
}

页面的所有内容都会被改成 红色,可以用于修改浏览器的默认属性

复合选择器(了解)

使用基础选择器组合,常见的符合选择器有:后代选择器、子选择器、并集选择器、伪类选择器

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3707.html
标签
评论
发布的文章

JavaScript基础库

2024-04-09 00:04:11

解决vue npm 下载echart出错

2024-04-09 00:04:05

Echarts中option属性设置

2024-04-08 23:04:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!