【web前端开发】CSS--CSS简介及其编写位置(上)

1、CSS简介

(1)CSS的全称为:层叠式样式表(Cascading Style Sheets)

(2)CSS也是一种标记语言,用于给HTML结构设置样式,例如:文字大小、颜色、元素宽度等等。

剖析层叠式样式表

层叠:一层一层"涂"上去

样式:文字大小、背景颜色、元素宽度等等

表:列表

简单理解:CSS可以美化HTML,让HTML更漂亮。

核心思想:HTML搭建结构,CSS添加样式,实现了:结构与样式的分离。

2、CSS的编写位置

(1)行内样式

示例:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS_行内样式</title>
</head>
<body>
    <h1 style="color:green;font-size: 60px;">好好学习,天天向上</h1>
</body>

</html>

结果:

所谓的行内样式就是与HTML的标签搭配使用。

在HTML中,名值对之间用"="相连;

例如:

而在CSS中,名与值之间用**":"相连,末尾加";"**

总结:

(1)CSS的行内样式是写在标签的style属性中(行内样式又称:内联样式)

(2)语法:

html 复制代码
<h1 style="color: blue;">锄禾日当午</h1>
<h1 style="color: red;">汗滴禾下土</h1>

运行结果:

(3)注意点:

1))style属性的值不能随便写,写时要符合CSS语法规范:是**名:值;**的形式

2))行内样式表,只能控制当前标签的样式,对其他标签无效

例如:

存在的问题:

书写繁琐,样式不能复用,并且没有体现出结构与样式分离的思想,不推荐大量使用,只有对当前元素添加样式时,才偶尔使用。

相关推荐
万少9 分钟前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能
3秒一个大30 分钟前
掌握 Stylus:让 CSS 编写效率倍增的预处理器
css
inx17731 分钟前
深入理解 CSS 弹性布局:从传统布局到 Flex 的优雅演进
css·flexbox
好玩的Matlab(NCEPU)31 分钟前
如何编写 Chrome 插件(Chrome Extension)
前端·chrome
Yan-英杰36 分钟前
Deepseek大模型结合Chrome搜索爬取2025AI投资趋势数据
前端·chrome
Crystal3281 小时前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
weixin_445476681 小时前
Vue+redis全局添加水印解决方案
前端·vue.js·redis
lecepin1 小时前
AI Coding 资讯 2025-10-29
前端·后端·面试
余道各努力,千里自同风1 小时前
小程序中获取元素节点
前端·小程序
PineappleCoder1 小时前
大模型也栽跟头的 Promise 题!来挑战一下?
前端·面试·promise