1.CSS基础_CSS介绍和引用

最新推荐文章于 2022-11-30 21:37:28 发布

橘九。

最新推荐文章于 2022-11-30 21:37:28 发布

阅读量115

点赞数

分类专栏： CSS基础

本文链接：https://blog.csdn.net/qq_34400745/article/details/102590254

版权

CSS基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前面一部分简单学习了一下html部分，这个部分来看一下css;,这个部分都是总结常用和基础部分，深入的暂不总结；

HTML和CSS具体什么区别呢？

HTML:页面结构，可以把它看做一个文档，定义展示页面的内容结构；
CSS:页面表现，元素大小，颜色，位置，隐藏或者显示，部分动画效果；
JavaScript:页面行为：部分动画效果，页面与用户交互，页面功能；

CSS介绍和引用：

CSS概述：

CSS:层叠样式表，是用于表现HTML或者XML(标准通用标记语言的一个子集)等文件样式的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态对网页各种元素进行格式化，CSS能够对网页中的元素位置的排版进行像素级精准控制，支持几乎所有字头字号样式，拥有对网页对象和模型样式编辑的能力。

CSS基本语法：

CSS规则通常由两个部分构成，选择器，以及一条或者多条声明；

选择器通常是要需要改变样式的HTML元素
每条属性由一个属性和一个值组成
属性时是希望设置的样式属性，每个属性都有一个值，属性和值被冒号分开；

CSS引入方法：

外联式：通过link标签，链接外部样式表到页面中。
先在外部建立css文件；
例如在css目录下建立main.css文件：

.box{
	width: 200px;
	height: 400px; 
	background: red;
}

再建立html文件，在link标签中进行链接css文件，文件地址在href中定义；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题内容</title>
		<!-- 外链式 ，需要引入css文件地址-->
		<link rel="stylesheet" href="css/main.css">
	</head>
	<body>
		<div class="box">这个是嵌入式</div>
	</body>
</html>

嵌入式：通过style标签，在网页中创建嵌入式的样式表；一般在head中加style

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题内容</title>
		<!--需要在head中加入-->
		<style type="text/css">
			.box{
				width: 200px;
				height: 400px; 
				background: red;
				
			}
		</style>
	</head>
	<body>
		 <!-- 嵌入式 -->
		<div class="box">这个是嵌入式</div>
	</body>
</html>

内联式：通过标签的style属性，在标签中直接写样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题内容</title>
	</head>
	<body>
	    <!-- 内联式 -->
		<div style="width: 200px;height: 400px; background: red;"></div>	
	</body>
</html>

橘九。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.CSS基础_CSS介绍和引用

前面一部分简单学习了一下html部分，这个部分来看一下css;,这个部分都是总结常用和基础部分，深入的暂不总结；HTML和CSS具体什么区别呢？HTML:页面结构，可以把它看做一个文档，定义展示页面的内容结构；CSS:页面表现，元素大小，颜色，位置，隐藏或者显示，部分动画效果；JavaScript:页面行为：部分动画效果，页面与用户交互，页面功能；CSS介绍和引用：CSS概述：C...
复制链接

扫一扫

专栏目录