【前端基础篇】CSS基础速通万字介绍(上篇)1

简介: 【前端基础篇】CSS基础速通万字介绍(上篇)

前言

在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果,更易理解喔😘

以及在看本篇之前需要有HTML的基础,详情请见【前端基础篇】HTML零基础速通

CSS介绍

什么是CSS

CSS(Cascading Style Sheet),层叠样式表, ⽤于控制⻚⾯的样式.

CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离.

CSS 可以理解为"东⽅四⼤邪术" 之化妆术.

对⻚⾯的展⽰进⾏"化妆"


基本语法规范

选择器 + {一条/N条声明}

  • 选择器决定针对谁修改 (找谁)
  • 声明决定修改啥 (干啥)
  • 声明的属性是键值对
<style>
p {
    /* 设置字体颜色 */
    color: red;
    /* 设置字体大小 */
    font-size: 30px;
}
</style>

<p>hello</p>

注意:

CSS 要写到 style 标签中(后面还会介绍其他写法)

style 标签可以放到页面任意位置. 一般放到 head 标签内.

CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换) .

引入方式

内部样式表

写在 style 标签中. 嵌入到 html 内部.

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

优点: 这样做能够让样式和页面结构分离.

缺点: 分离的还不够彻底. 尤其是 css 内容多的时候

前面写的代码主要都是使用了这种方式. 实际开发中不常用.

PS: 搜狗搜索中仍然保留着这种写法

行内样式表

通过style属性,来指定某个标签的样式

只适合于写简单样式. 只针对某个标签生效.

缺点:不能写太复杂的样式.

这种写法优先级较高, 会覆盖其他的样式

<style>
div {
    color: red;
}
</style>
<div style="color:green">这是绿色不是红色</div>


可以看到, red 颜色被覆盖了.


外部样式

实际开发中最常用的方式

  1. 创建一个 css 文件.
  2. 使用 link 标签引入 css
<link rel="stylesheet" href="[CSS文件路径]">

创建 demo.html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>上帝为你关上一扇门, 然后就去睡觉了</div>
</body

创建style.css

div {
    color: red;
}

注意:不要忘记 link 标签调用 CSS, 否则不生效

优点:样式和结构彻底分离了.

缺点:受到浏览器缓存影响, 修改之后 不一定 立刻生效

关于缓存:

这是计算机中一种常见的提升性能的技术手段.

网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的. 如果频繁访问该网站, 那么这些外部资源就没必要反复从服务器获取. 就可以使用缓存先存起来(就是存在本地磁盘上了). 从而提高访问效率.

可以通过 ctrl + F5 强制刷新页面, 强制浏览器重新获取 css 文件.

总结

3种引⼊⽅式对⽐:

  1. 内部样式会出现⼤量的代码冗余, 不⽅便后期的维护,所以不常⽤.
  2. ⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式.
  3. 外部样式,htmlcss实现了完全的分离, 企业开发常⽤⽅式.

代码风格

样式格式

  1. 紧凑风格
p { color: red; font-size: 30px;}
  1. 展开风格
p {
    color: red;
    font-size: 30px;
}

样式大小写

虽然 CSS 不区分大小写, 我们开发时统一使用小写字母


空格规范

  • :后面带空格
  • 选择器和 { 之间也有一个空格.

选择器

选择器的功能

选中页面中指定的标签元素

要先选中元素, 才能设置元素的属性

选择器的种类

以下内容只是 CSS2 标准中支持的选择器, 在 CSS3 中还做出了一些补充, 后面会讲到一些.

  1. 基础选择器器种类

由单个选择器构成

  • 标签选择器
  • 类选择器
  • id 选择器
  • 通配符选择器
  1. 复合选择器

把多种基础选择器综合运用起来

  • 后代选择器
  • 子选择器
  • 并集选择器
  • 伪类选择器

参考文档CSS 选择器参考手册


基础选择器

标签选择器

特点:

  • 能快速为同一类型的标签都选择出来.
  • 但是不能差异化选择
<style>
p {
    color: red;
}
div {
    color: green;
}
</style>

<p>咬人猫</p>
<p>咬人猫</p>
<p>咬人猫</p>
<div>阿叶君</div>
<div>阿叶君</div>
<div>阿叶君</div>

类选择器

特点:

  • 差异化表示不同的标签
  • 可以让多个标签的都使用同一个标签.
 <style>
.blue {
    color: blue;
}
</style>

<div class="blue">咬人猫</div>
<div>咬人猫</div

语法细节:

  • 类名用 . 开头的
  • 下方的标签使用 class 属性来调用.
  • 一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
  • 如果是长的类名, 可以使用 - 分割.
  • 不要使用纯数字, 或者中文, 以及标签名来命名类名

代码示例:使用多个类名

注意: 一个标签可以同时使用多个类名

这样做可以把相同的属性提取出来, 达到简化代码的效果.

<style>
.box {
    width: 200px;
    height: 150px;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}
</style>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>

id选择器

和类选择器类似.

  • CSS 中使用 # 开头表示 id 选择器
  • id 选择器的值和 html 中某个元素的 id 值相同
  • html 的元素 id 不必带 #
  • id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)
<style>
#ha {
    color: red;
}
</style>
<div id="ha">蛤蛤蛤</div>

类比:

姓名是类选择器, 可以重复.

身份证号码是 id 选择器, 是唯一的.


通配符选择器

* {
    color: red;
}
  • 一般用来清除浏览器默认样式
  • 不需要被页面结构调用

基础选择器总结


【前端基础篇】CSS基础速通万字介绍(上篇)2:https://developer.aliyun.com/article/1617326

目录
打赏
0
1
1
1
51
分享
相关文章
|
8天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
53 1
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
77 4
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
474 1
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
103 2
【前端基础篇】CSS基础速通万字介绍(下篇)3
【前端基础篇】CSS基础速通万字介绍(下篇)
31 0
【前端基础篇】CSS基础速通万字介绍(下篇)2
【前端基础篇】CSS基础速通万字介绍(下篇)
32 0

热门文章

最新文章

  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    49
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    92
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    139
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    82
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    118
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等