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

例如:

存在的问题:

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

相关推荐
hahala233311 分钟前
ESLint 提交前校验技术方案
前端
夕水33 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了36 分钟前
实现一个简单的Vue响应式
前端·vue.js
独立开阀者_FwtCoder44 分钟前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
Cacciatore->1 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo1 小时前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末1 小时前
React——基础
前端·react.js·前端框架
每天开心1 小时前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry1 小时前
uniapp三步完成一维码的生成
前端·vue.js