CSS的了解

一、HTML CSS JavaScrip的关系

HTML是结构,CSS是样式,JavaScript是行为。一般CSS不会单独存在,在HTML中做修饰成分。

二、CSS

1、csacading style sheet的缩写——层叠样式表
2、CSS的保存方式与HTML相同,都是文件名+.css

三、引入CSS

①行间样式

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div style="width:100px;
	            height:100px;
	            background-color:red;">
	 </div>
</body>	
</html>

②页面级css

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">   /*告诉浏览器我这里面写的是css代码*/
                      div {     
                                width:100px;
	                 height:100px;
	                 background-color:blue;"
                            }
	 </style>
</head>
<body>
     <div></div>
</body>
</html>

③外部css文件

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="lesson3.css"> -->
</head>
<body>
    	<div></div>
</body>	
</html>

注:
1、href里的填写方式也存在绝对路径和相对路径之说,与引入图片的标签相似。

2、标签的快捷方式:英文+快捷键Tab

3、width:100px;表示宽是100像素
height:100px;表示高是100像素
background-color:blue;表示背景颜色是蓝色

4、像素(px):位图的一幅图像,是由若干个点组成的,每个点就叫做像素,.图像宽度上的点数乘以高度上的点数,就是这个图像的总像素,一幅图像点越多,图像就越大.

发布了8 篇原创文章 · 获赞 1 · 访问量 231

猜你喜欢

转载自blog.csdn.net/qq_46179838/article/details/104089280