CSS入门

最新推荐文章于 2024-02-29 09:28:18 发布

劉某人゜

最新推荐文章于 2024-02-29 09:28:18 发布

阅读量297

点赞数 3

分类专栏：前端文章标签： CSS入门

本文链接：https://blog.csdn.net/weixin_44953728/article/details/101642480

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.div和span

1.1什么是div和spn

div是html里面的一个标签<div></div>.  没有特定的含义,作为容器. 一般用于配合css完成网页的基本布局,

span也是一个标签,没有特定含义,一般作为文本容器

1.2div和span的区别

div是块级元素会独占一行,span是行内元素不会独占一行

div中可以嵌套其它所有的标签, span标签中只能嵌套文本/图片/超链接

2.CSS概述和体验

2.1什么是CSS

层叠样式表
层叠: 层层叠加(eg:刷墙)
样式表: 样式的集合, 属性的集合

学习CSS核心就是学习属性, 选择器…

2.2 css能做什么

美化页面,修饰页面
html的标签作用展示页面,定义页面的, CSS的作用修饰页面
eg: html当前毛坯房, css当做装修

2.3为什么要学习CSS

我们在上次课中已经遇到了一些样式的问题, font标签的字体不能比1还小不能比7还大, 超链接标签的下划线去不掉…
通过标签来修改样式的缺点:
1.需要记忆哪些标签有哪些属性, 如果该标签没有这个属性, 那么设置了也没有效果
2.当需求变更时我们需要修改大量的代码才能满足现有的需求
所以在企业开发中修改样式都是交给CSS来做,通过CSS来修改样式的好处:
1.不用记忆哪些属性属于哪个标签
2.当需求变更时我们不需要修改大量的代码就可以满足需求

2.4CSS语法

{
	属性:属性值 属性值;
	属性:属性值 属性值
}

注意

属性和属性值用:连接
如果有多个属性值用空格隔开
如果有多个属性,属性和属性之间用;隔开最后一个;不写

3.html和css常见的结合方式

3.1通过标签的style属性来结合

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

3.2通过style标签来结合

<head>
	<style>
        标签名称{
            属性名称: 属性对应的值;
           	
        }
	</style>
</head>

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

3.3通过link标签结合

创建一个css文件(后缀是css)
通过link标签引入

<head>
	<link rel="stylesheet" href="../../css/myCss.css" />
</head>

link标签属性:
	- href:css文件路径

3.4 三种结合方式优先级

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

4.选择器

4.1什么是选择器

css修饰页面,作用某个标签.CSS选择器就是控制html标签,说白了就是找到要修饰的标签的

4.2基本选择器

在这里插入图片描述
通用选择器 < 标签选择器 < 类选择器 < ID选择器

4.3扩展选择器

由基本选择器组合而成，可以有更加灵活的选择方式
在这里插入图片描述

4.4 伪类选择器

在这里插入图片描述

5.CSS常用的属性

5.1背景属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            /*背景图片*/
            background-image: url("../../img/a.gif");
            /*设置平铺*/
            background-repeat: repeat;
        }

        div{
            width: 200px;
            height: 200px;
            /*背景颜色
            background-color: red;
            */
        }

    </style>
</head>
<body>
    <div></div>
</body>
</html>

5.2文本样式

在这里插入图片描述

5.3字体属性

在这里插入图片描述

6.盒子模型

任何一个网页元素(标签)包含由这些属性组成：内容(content)、内边距(padding)、边框(border)、边界(margin)，
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。整个网页由各种小盒子组成。

6.1盒子属性

在这里插入图片描述

6.2 外边距属性 margin

标签和标签之间的距离就是外边距

一,设置外边距
1.连写(顺时针的顺序)
margin: 上 右 下 左;

2.非连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

3. 注意地方:
3.1 连写注意的地方
	- margin:10px; 上下左右都是10px
	- margin:10px,20px; 上下是10px,左右20px
	- margin:10px,20px,30px;上是10px,右是20px,下30px,左是20px
3.2 设置外边距特点
	外边距的那一部分是没有背景颜色的

6.3内边距属性

就是标签里面的内容距离边框距离

一,设置内边距
1.连写
padding: 上 右 下 左;

2.非连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

3. 注意地方:
3.1 连写注意的地方
	- padding:10px; 上下左右都是10px
	- padding:10px,20px; 上下是10px,左右20px
	- padding:10px,20px,30px;上是10px,右是20px,下30px,左是20px
3.2 设置内边距特点
	给标签设置内边距之后, 标签占有的宽度和高度会发生变化
	给标签设置内边距之后, 内边距也会有背景颜色

在这里插入图片描述

7.浮动属性

7.1 概述

当某一个元素设置浮动之后, 那么这个元素就会脱离文档流. 感觉就像在上面一层覆盖着,有点像PS里面图层. 之前用来做图文混排,后面通常和div一起做页面的布局了

7.2设置浮动

float: 取值 left(左浮动)
		    right(右浮动)

特点:在浮动流中是不区分块级元素/行内元素/行内块级元素的, 都可以设置宽度和高度
浮动规则

1.相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
2.不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
3.浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定

7.3清除浮动

语法

clear: 取值  none: 默认取值,不清除
			left: 不要找前面的左浮动元素
			right: 不要找前面的右浮动元素
			both: 不要找前面的左浮动元素和右浮动元素

清除浮动的方式

方式一: 在当前的元素里面添加clear属性清除
方式二: 添加一个新的盒子添加clear属性清除

劉某人゜

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录