CSS基础学习笔记

最新推荐文章于 2020-06-16 11:45:19 发布

BigDevil_

最新推荐文章于 2020-06-16 11:45:19 发布

阅读量241

点赞数

分类专栏：前端学习文章标签： css基础

本文链接：https://blog.csdn.net/BigDevil_/article/details/103091823

版权

前端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

CSS基础

CSS基础

1. CSS是什么？

层叠样式表
层叠：多个样式表可以同时叠加在一个html元素上显示效果
样式表：改变html元素的外观

2.HTML引入CSS

1、直接在html的style中写

<style type="text/css">
	.span_class{
		background-color: #87CEEB;
	}
</style>

2、引入方法1：

<link rel="stylesheet" type="text/css" href=""/>

3、引入方法2：

<style type="text/css">
	@import url("");
</style>

3. CSS有什么作用？

a.渲染
b.提高工作效率

3. CSS的好处：

1、功能更加强大(修改表格内容居中的例子)

2、HTML和样式是分离的(代码的解耦)

4. CSS如何使用？

html和css的整合

1.内联样式表
每个标签都有style属性，直接在标签里写css样式即可

<font style="color: blue;font-size: 70px;font-family: '微软雅黑';">
			今天天气不错！！！
</font>

2.内部样式表
直接在head标签的style子标签中进行书写css代码

<style>
	div{
		border: 1px solid red;
		width: 200px;
		height: 200px;
	}
</style>

3.外部样式表
首先在外部定义一个后缀名为.css的文件
方式1：
在内部使用head标签的link标签导入

<link rel="stylesheet" type="text/css" href=""/>

方式2：

<!-- 引入方式2   -->
		<style type="text/css">
			@import url("");
		</style>

css的格式（语法）：

	选择器{
				css属性名:css属性值;
				css属性名1:css属性值1;
				........
		}

css的选择器：

id选择器：#id值每个标签都有id属性 id不能重复
class选择器：.class属性的值每个标签都有class属性 class可以重复
标签选择器：通过标签名即可定位到html元素
派生选择器：
a,b{css样式…} 选择器a和选择器b共用一套样式
a b{css样式…} 定位到选择器a里面为选择器b的元素并且改变选择器b元素的样式
兄弟选择器： ~ 和 +
兄弟选择器帖子

css常用的属性：

基本属性：文字属性、文本属性、背景属性、边框属性

基本属性

文字属性：更改文字的大小，粗细，系列，家族…
font-size: 3cm; //字体大小
font-style: italic;//字体样式
font-weight: 400; //字体粗细
font-family: 楷体; //字体

文本属性：更改文字的颜色,对其方式,设置标准文本…
color: slateblue;
text-align: center;
text-decoration: none; //字体装饰，可以去掉a标签的下划线

背景属性：更改背景颜色,加入背景图片…
background-image: url(…/img/small06.jpg);
height: 500px;
background-repeat: no-repeat;//背景图片不重复
background-position:-200px -10px;//从图片的那个位置开始截取
background-size: 400px 200px;//图片大小

边框属性：更改元素边框… border:边框的粗细边框的类型边框的颜色
border: 10px groove red;
边框粗细样式（虚线，实线slide）边框颜色
width: 200px;
height: 200px;

高级属性：

float：浮动可以使html元素向哪个方向漂浮

clear：清除浮动 需要在最后一个浮动的div后面加上一个空的div 给div起一个id ；然后使当前div的clear属性=both

display：是否显示，行内元素和块级元素转换！。
display取值：
    none 隐藏；
    block 转换为块级元素；
    inline，转换为行内元素；
    inline-block,行内元素，可以设置宽高；

案例：float和clear的使用举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				background-color: #FFEBCD;
			}
			#v1{
				width: 100px;
				height: 100px;
				background-color: #FF0000;
				
				float: left;
			}
			#v2{
				width: 200px;
				height: 200px;
				background-color: greenyellow;
				float: left;
			}
			#v3{
				width: 300px;
				height: 300px;
				background-color: #87CEEB;
				float: left;
			}
			#clear{
				clear: both;
			}
			#div2{
				border: 2px solid black;
				background-color: aquamarine;
				width: 500px;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<div id="div1" style="border: 2px solid black;">
			<div id="v1">
				div1
			</div>
			<div id="v2">
				div2
			</div>
			<div id="v3">
				div3
			</div>
			<div id="clear">
			</div>
		</div>
		
		<div id="div2" >
			
		</div>
	</body>
</html>

加clear的效果图：
在这里插入图片描述
不加clear：both时的效果图：

盒子模型：

padding：内边距会撑大盒子不会影响两个盒子的距离
margin：外边距增大外边距会增大两个盒子之间的距离

5.行内元素与块级元素（如：span和div）：

块级元素：以区域块方式出现。每个块标签独自占据一整行或多整行。块结束会自动换行。不可以设置宽，高（用于网页布局）。就是有多大内容就占多大空间

行内元素：根据内容多少来占用行内空间，不会自动换行。不可以设置宽，高（用于展示少量信息）
相互转换：
display取值：
    none 隐藏；
    block 转换为块级元素；
    inline，转换为行内元素；
    inline-block,行内元素，可以设置宽高；

注意：可以用display属性转换行内元素(inline)和块级元素(block)。
在这里插入图片描述

案例：块级元素和行内元素例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入方式1 -->
		<link rel="stylesheet" type="text/css" href=""/>
		<!-- 引入方式2   -->
		<style type="text/css">
			@import url("");
		</style>
		
		<style type="text/css">
			.span_class{
				background-color: #87CEEB;
			}
			
			.div_class{
				border: 1px solid black;
				width: 100px;
				height: 80px;
				background-color: #32CD32;
			}
		</style>
	</head>
	<body>
		<!-- 块级元素可以设置宽高，行级元素不能 -->
		
		<!-- span 行级内容 有多大内容，占多大空间（用于展示少量信息） -->
		<!-- 不会自动换行 -->
		<span class="span_class">
			span 行级内容，有多大内容占多大空间，用于展示少量信息。设置宽高没用
		</span>
		<!-- ------------------------------------------------------------------------------------------------------------ -->
		<!-- div 块级元素 独占一行（用于网页布局）-->
		<!-- 自动换行 -->
		<div class="div_class" >
			div 块级元素，独占一行，用于网页布局。设置宽高可以直接显示
		</div>
	</body>
</html>

BigDevil_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS基础学习笔记

CSS基础CSS是什么？层叠样式表层叠：多个样式表可以同时叠加在一个html元素上显示效果样式表：改变html元素的外观CSS有什么作用？a.渲染b.提高工作效率CSS如何使用？html和css的整合1.内联样式表每个标签都有style属性，直接在标签里写css样式即可<div style="background-color:red;">&...
复制链接

扫一扫

专栏目录