web学习-css基础1

最新推荐文章于 2021-06-15 23:52:50 发布

fire_zero

最新推荐文章于 2021-06-15 23:52:50 发布

阅读量223

点赞数

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

本文链接：https://blog.csdn.net/fire_zero/article/details/103235205

版权

一.css介绍

CSS (Cascading Style Sheet)
css通常称之为css样式表或层叠样式表（级联样式表），主要作用是设置HTML页面中布局，文本，图片等外观的显示样式。
简单的css_case

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css_case</title>
		<style type="text/css">
			p{
				font-family:"楷体";
				color:red;
				font-size:24px;
			}
		</style>
	</head>
	<body>
				<p>演示段落</P>
	</body>
</html>

运行结果如下：
css_case.html的运行结果

二.css的三种书写位置

1.第一种：内嵌式
将css代码写在HTML网页中，css代码和HTML代码相对分离。代码耦合度相对较低，在项目中偶尔使用，在讲解知识点时经常使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				color: black;
				background:red;
			}
		</style> 
	</head>
	<body>
		<div>
			一个盒子
		</div>
	</body>
</html>

2.第二种：行内式
将css代码掺杂在html网页文件中,代码耦合度高,会造成代码冗余,代码维护性差,偶尔会使用

		<div style="color: yellow;width: 6.25rem;height: 12.5rem; background: #009A57;">
			一个盒子
		</div>

3.第三种：外链式
将css代码单独写在css文件中，css代码和HTML代码绝对分离，代码耦合度极低，维护性高，在工作中经常使用

 <head>
		<meta charset="utf-8">
		<title></title>
 		<link rel="stylesheet" type="text/css" href="01.css"/>
 </head>

01.css 文档

div{
	background:#FFD669;
	width: 200px;
	height: 400px;
	text-align: center;
}

三.css盒子

1.盒子的基本属性

<style type="text/css">
			div{
				/* 宽度 */
				width: 300px;
				/* 高度 */
				height: 300px;
				/* 背景色 */
				background: red;
			}
		</style>

四.显示模式

1.显示模式：

1.块级显示模式：设置宽高起作用，独占一行。在不设置宽度时，宽度和父元素一致。

块元素：div h1-h6 hr ul ol li dl dt dd form p

2.行内显示模式：设置宽高不起作用，不独占一行。宽高是被内容撑开的

行内元素： span b strong i em u ins s del a

3.行内块显示模式：设置宽高起作用，不独占一行。

行内块元素：img 表单标签

行内元素和行内块元素，代码之间有空格或换行时显示效果会有空格

2.显示模式转换

转换成行内块元素display;inline-block:
转换成块元素display;block:
隐藏元素 display:none;
若想把隐藏的元素重新显示

最低0.47元/天解锁文章

fire_zero

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web学习-css基础1

一.css的三种书写位置1.第一种：内嵌式将css代码写在HTML网页中，css代码和HTML代码相对分离。代码耦合度相对较低，在项目中偶尔使用，在讲解知识点时经常使用。<html> <head> <meta charset="utf-8"> <title></title> <style type="text/c...
复制链接

扫一扫