CSS讲解

最新推荐文章于 2024-07-25 15:29:26 发布

犹豫啊

最新推荐文章于 2024-07-25 15:29:26 发布

阅读量1.7k

点赞数 31

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_73776815/article/details/137008605

版权

本文介绍了HTML中的div和span标签的区别，div作为块级元素用于布局，span作为行内元素用于文本包装。CSS的作用、引入方式以及基本选择器如标签选择器、ID选择器和类选择器进行了概述。同时，还涉及了CSS的常用属性如背景、文本和字体的设置。

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

CSS⼊⻔

div和span

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

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

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

⽂本容器

div和span的区别

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

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

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

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

⼩结

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

何标签 (body,html 等不⾏ )

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

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

CSS介绍

什么是CSS

层叠样式表

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

样式表 : 样式的集合

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

CSS的作⽤

美化⻚⾯ , 修饰⻚⾯

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

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

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

为什么要学习CSS

font 标签的字体不能⽐1 还⼩不能⽐ 7 还⼤ , 超链接标签的下划线去不掉 , ⼤量进⾏嵌套来设置样式(eg: 段落⾥⾯嵌套 font, 在 font ⾥⾯再设置color 属性 )

通过标签来修改样式的缺点 : 需要记忆哪些标签有哪些属性, 如果该标签没有这个属性 , 那么设置了也没有效果

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

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

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

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

CSS语法

{
    属性值：属性值 属性值；
    属性值：属性值 属性值；
}

注意：

属性和属性值⽤ : 连接

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

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

⼩结

1.css: 层叠样式表

2. css 作⽤ : 修饰⻚⾯

CSS进阶

CSS引⼊

能够在HTML中引⼊CSS

分析

HTML 是⼀种语⾔； CSS 也是⼀种语⾔。如果想要 CSS 能够修饰HTML 的样式，就必须把 CSS 引⼊到 HTML 中。即：要解决把CSS 代码写在什么地⽅的问题

引⼊的⽅式有：

内联样式：把 CSS 代码内嵌到 HTML 代码⾥ , 通过标签的 style属性来结合

内部样式：把 CSS 代码写在 HTML ⽂档内部 , 通过 style 标签来结合

外部样式：把 CSS 代码写在独⽴的 CSS ⽂件⾥ , 通过 link 标签结合

讲解

通过标签的style属性来结合

<!--通过style属性-->
<p style="属性名称:属性值;..."></p>

通过style标签来结合

<head>
 <style type="text/css">
 标签名称{
 属性名称: 属性对应的值;
 
 }
 </style>
</head>
注意点:
 1.style标签必须写在head标签的开始标签和结束标签之间
(也就是必须和title标签是兄弟关系)
 2.style标签中的type属性其实可以不⽤写, 默认就是
type="text/css"
 3.设置样式时必须按照固定的格式来设置. key: value;
其中:不能省略, 分号⼤多数情况下也不能省略

通过link标签结合

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

2. 通过 link 标签引⼊

<head>
 <link rel="stylesheet"href="../../css/myCss.css" />
</head>
link标签属性:
 - href:css⽂件路径

三种结合⽅式优先级

就近原则(相对于代码,也就是要修饰的标签)

⼩结

通过标签的style属性

<标签 style="css代码"></标签>

通过 style 标签

<style>
     css代码
</style>

通过 link 标签

把 css 单独定义⼀个⽂件

通过link标签引⼊

CSS基本选择器

分析

选择器：⽤于选择 HTML 元素 ( 标签 ) ，进⾏样式修饰。

常⽤的选择器有

1. 标签选择器

2. ID 选择器

3. 类选择器

基本选择器语法

选择器优先级

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

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

⼩结

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

标签名{}

id 选择器适合找 1 个

#id{}

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

.class{}

CSS扩展选择器

分析

CSS 还提供了更多更加灵活的选择器

使⽤多个基本选择器进⾏组合，可以更灵活的选取标签

使⽤伪类选择器，添加⼀些特殊效果

组合选择器

多个基本选择器的组合，可以更灵活的选取标签

伪类选择器

了解⼏个超链接相关的伪类选择器

CSS常⽤属性

分析

CSS 提供了⼤量的样式⽤于修饰 HTML 标签，我们需要了解的有：

1. 背景属性

2. ⽂本样式

3.字体属性

背景属性

介绍

示例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>CSS常⽤属性-背景</title>
 <style>
 /*设置整个⻚⾯的背景样式*/
 body{
 /*背景图⽚*/
 background-image:
url("img/little_mm.jpg");
 /*平铺⽅式*/
 background-repeat: repeat;
 }
 </style>
</head>
<body>
 <div>⻚⾯内容</div>
</body>
</html>

⽂本样式

示例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>CSS常⽤属性-⽂本</title>
 <style>
 p{
 /*⾸⾏缩进：2个字符*/
 text-indent: 2em;
 /*⽂字颜⾊：绿⾊*/
 color: green;
 }
 a{
 /*超链接 不显示下划线*/
 text-decoration: none;
 }
 </style>
</head>
<body>
<p>
 "中关村Java程序员训练营"是由<a
href="http://www.sunlw.cn">Java</a>联合中关村软件
园、CSDN， 并委托Java进⾏教学实施的软件开发⾼端培训机
构，致⼒于服务各⼤软件企业，解决当前软件开发技术⻜速发
展， ⽽企业招不到优秀⼈才的困扰。
</p>
<p>
 ⽬前，“中关村Java程序员训练营”已成⻓为⾏业“学员质
量好、课程内容深、企业满意”的移动开发⾼端训练基地， 并被
评为中关村软件园重点扶持⼈才企业。
</p>
</body>
</html>

字体属性

示例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>CSS常⽤属性-字体</title>
 <style>
 span{
 /*字体：幼圆*/
 font-family: 幼圆;
 /*⼤⼩：40px*/
 font-size: 40px;
 /*字体：斜体*/
 font-style: italic;
 /*加粗显示*/
 font-weight: bolder;
 }
 </style>
</head>
<body>
 <span>Java程序员</span>
</body>
</html>