什么是CSS？

2401_83232029

于 2024-03-25 20:30:52 发布

阅读量629

点赞数 13

文章标签： css 前端

本文链接：https://blog.csdn.net/2401_83232029/article/details/137024662

版权

本文详细介绍了HTML中的div和span标签的区别，包括它们的用途、结构特点，并探讨了CSS的作用、学习动机，以及CSS语法和选择器的使用。

摘要由CSDN通过智能技术生成

知识点-div和span

1.⽬标

知道 div 和 span 区别

2.路径

1. 什么是 div 和 span

2. div 和 span 的区别 3. 讲解

3.1什么是div和span

div 是 html ⾥⾯的⼀个标签 <div></div> . 没有特定的含义 ,

作为容器 . ⼀般⽤于配合 css 完成⽹⻚的基本布局 ,

span 也是⼀个标签 <span></span> , 没有特定含义 , ⼀般作为

⽂本容器

3.2div和span的区别

div 是块级元素 (eg:h1,p) 会独占⼀⾏ ,span 是⾏内元素

(eg:b,i,img) 不会独占⼀⾏

div 中可以嵌套其它所有的标签 ( 除了 body,html,head), span

标签中只能嵌套⽂本 / 图⽚ / 超链接

4. ⼩结

1. div 就是⼀个标签 . 是⼀个容器 , 块级元素 , div 内部可以放任

何标签 (body,html 等不⾏ )

2. span 就是⼀个标签 . 是⼀个⽂本容器 , ⾏内元素 , span 标签

中只能嵌套⽂本 / 图⽚ / 超链接

Css介绍

1. ⽬标

能够说出 CSS 的概念和作⽤

2. 分析

1. 什么是 CSS

2. CSS 的作⽤

3. 为什么要学习 CSS

4. CSS 语法

3. 讲解

3.1什么是CSS

层叠样式表

层叠 : 样式层层叠加 eg: 刷墙

样式表 : 样式的集合

学习 html 就是学习标签 , 学习 CSS 主要学习样式 ( 属性 ), 选择

器

3.2 CSS的作⽤

美化⻚⾯ , 修饰⻚⾯

HTML 负责内容 (hello),CSS 负责样式 ( 颜⾊ , 字体⼤⼩ ...)

<font color="red" size="7">hello</font>

html 当做⽑坯房 , CSS 当做装修

3.3为什么要学习CSS

我们在上次课中已经遇到了⼀些样式的问题 , font 标签的字

体不能⽐ 1 还⼩不能⽐ 7 还⼤ , 超链接标签的下划线去不掉 ,

⼤量进⾏嵌套来设置样式 (eg: 段落⾥⾯嵌套 font, 在 font ⾥

⾯再设置 color 属性 )

通过标签来修改样式的缺点 :

1. 需要记忆哪些标签有哪些属性 , 如果该标签没有这个属性 ,

那么设置了也没有效果

2. 当需求变更时我们需要修改⼤量的代码才能满⾜现有的

需求

所以在企业开发中修改样式都是交给 CSS 来做 , 通过 CSS 来

修改样式的好处 :

1. 不⽤记忆哪些属性属于哪个标签

2. 当需求变更时我们不需要修改⼤量的代码就可以满⾜需

求

3.4CSS语法

{

属性 : 属性值属性值 ;

属性 : 属性值属性值

} 注意

属性和属性值⽤ : 连接

如果有多个属性值⽤空格隔开

如果有多个属性 , 属性和属性之间⽤ ; 隔开最后⼀个 ; 可以不

写

4. ⼩结

1. css: 层叠样式表

2. css 作⽤ : 修饰⻚⾯

通过标签的 style 属性来结合【了解】

<head>

标签名称 {

属性名称 : 属性对应的值 ;

}

</style>

</head>

注意点:

1.style 标签必须写在 head 标签的开始标签和结束标签之间

( 也就是必须和 title 标签是兄弟关系 )

2.style 标签中的 type 属性其实可以不⽤写 , 默认就是

type="text/css"

3. 设置样式时必须按照固定的格式来设置 . key: value;

其中 : 不能省略 , 分号⼤多数情况下也不能省略

通过 link 标签结合

1. 创建⼀个 css ⽂件 ( 后缀是 css)

2. 通过 link 标签引⼊

<head>

href="../../css/myCss.css" />

</head>

link 标签属性 :

- href:css ⽂件路径

优先级

选择器优先级

ID 选择器 > 类选择器 > 标签选择器 > 通⽤选择器

如果优先级相同，那么就满⾜就近原则

1. 标签选择器只要是当前这个标签的都会修饰到

标签名 {}

2. id 选择器适合找 1 个

#id{}

3. class 选择器适合找多个 (>=1)

.class{}

2401_83232029

关注

13
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
什么是CSS？

1.⽬标能够说出CSS的概念和作⽤2.分析1.什么是CSS2. CSS的作⽤3.为什么要学习CSS4. CSS语法3.讲解3.1什么是CSS层叠样式表层叠样式层层叠加eg:刷墙样式表样式的集合学习html就是学习标签学习CSS主要学习样式属性),选择器3.2 CSS的作⽤美化⻚⾯修饰⻚⾯HTML负责内容负责样式颜⾊字体⼤⼩...)html当做⽑坯房, CSS当做装修3.3为什么要学习CSS。
复制链接

扫一扫