前端三件套之CSS

CSS:

css 基本概念

CSS(Cascading Style Sheets,层叠样式表)是用于描述 HTML 文档的样式的语言。它能控制网页的布局、颜色、字体、间距等,帮助设计者呈现出美观的网页

1.1 css 基本语法

CSS 的基本语法由选择器(selector)、属性(property)和值(value)三部分组成:

复制代码

selector { property: value; }

例如我要给p标签添加一个样式(颜色和字体大小):

复制代码

p { color: red; font-size: 16px; }

各标签的属性和值可自行查询资料

1.2 css 的应用方式

  • 内联样式:直接在HTML标签内使用style属性
复制代码

<p style="color: red; font-size: 16px;">Hello World</p>

  • 内部样式:在 HTML 文档的 <head> 部分使用 <style> 标签定义
复制代码

<style> p { color: red; font-size: 16px; } </style>

  • 外部样式:<link> 标签引入外部 CSS 文件(添加在<head>中)
复制代码

<link rel="stylesheet" href="styles.css"> /*推荐使用这种方法,方便后期代码修改*/

css 选择器

2.1 基本选择器

  • 元素选择器:根据 HTML 元素名称选择
复制代码

p { color: blue; }

相关推荐
极小狐16 分钟前
极狐GitLab 容器镜像仓库功能介绍
java·前端·数据库·npm·gitlab
程序猿阿伟28 分钟前
《Flutter社交应用暗黑奥秘:模式适配与色彩的艺术》
前端·flutter
rafael(一只小鱼)32 分钟前
黑马点评实战笔记
前端·firefox
weifont32 分钟前
React中的useSyncExternalStore使用
前端·javascript·react.js
初遇你时动了情37 分钟前
js fetch流式请求 AI动态生成文本,实现逐字生成渲染效果
前端·javascript·react.js
影子信息1 小时前
css 点击后改变样式
前端·css
几何心凉1 小时前
如何使用 React Hooks 替代类组件的生命周期方法?
前端·javascript·react.js
小堃学编程1 小时前
前端学习(1)—— 使用HTML编写一个简单的个人简历展示页面
前端·javascript·html
hnlucky2 小时前
通俗易懂版知识点:Keepalived + LVS + Web + NFS 高可用集群到底是干什么的?
linux·前端·学习·github·web·可用性测试·lvs
懒羊羊我小弟3 小时前
使用 ECharts GL 实现交互式 3D 饼图:技术解析与实践
前端·vue.js·3d·前端框架·echarts