【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))行内样式表,只能控制当前标签的样式,对其他标签无效

例如:

存在的问题:

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

相关推荐
IT_陈寒42 分钟前
Redis 高性能缓存设计:7个核心优化策略让你的QPS提升300%
前端·人工智能·后端
井柏然1 小时前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
羊锦磊1 小时前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架
brzhang1 小时前
高通把Arduino买了,你的“小破板”要变“AI核弹”了?
前端·后端·架构
她说..1 小时前
通过git拉取前端项目
java·前端·git·vscode·拉取代码
智能化咨询2 小时前
玩转ClaudeCode:通过Chrome DevTools MCP实现高级调试与反反爬策略
前端·chrome·chrome devtools
Roadinforest2 小时前
水墨风鼠标效果实现
前端·javascript·vue.js
银嘟嘟左卫门2 小时前
上手 Rokid JSAR:新手也能快速入门的 AR 开发之旅
前端
右子3 小时前
HTML Canvas API 技术简述与关系性指南
前端·javascript·canvas
Lotzinfly3 小时前
10个JavaScript浏览器API奇淫技巧你需要掌握😏😏😏
前端·javascript·面试