CSS基础（一）---CSS样式

一、css概述

1、CSS是Cascading Style Sheets的英文缩写，即层叠样式表

2、CSS和HTML一样都是标记语言，可以直接由浏览器执行，属于浏览器解释型语言

3、CSS能够对网页中的元素进行精确的控制，可以对网页中元素进行精确修改

4、CSS是能够真正做到网页表现与内容分离的一种样式设计语言

5、CSS目前最新版本为CSS3

二、css与html的关系

1、HTML是标记，是把文字、图片等内容放在HTML标签中让浏览器去解释，并把内容显示在浏览器中，供用户阅读，HTML就是人的骨骼架构

2、CSS是为HTML标签添加各种样式，用来告诉浏览器，应该如何显示这些标签里面的内容，起到布局与美化网页的作用，CSS就是人的衣服，用来修饰

三、css写法格式

1、外链样式

外链样式——通过载入的方式加载CSS样式，文件后缀名需要是.css，只要页面加载本CSS文件，那么这些页面都会受到影响，在以后做项目时会经常使用外链样式（需要在head中写上link标签）

<!DOCTYPE html>
<html>
<head>
	<title>css样式-外链样式</title>
	<!-- 在head中导入.css文件 -->
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<!-- 外链样式，引入.css文件,该页面会收到引入的.css文件影响 -->
	<h1>标题1</h1>
</body>
</html>

下面是style.css文件，css文件，针对html当中的标签，标签{……}，在{}中写规则

/*.css文件书写*/
/*对应html文件标签{},在{}编写相应的规则*/
/*选择器{属性:值}*/
h1{color: red}

2、页内样式

页内样式——直接在本页面写CSS样式，所写CSS样式只影响本页面，其他页面不会受到影响（需要在head中写上style标签）

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
<head>
	<title>css样式-页内样式</title>
	<!-- 在head设置本页面的css规则 -->
	<style type="text/css">
		h2{color: green}
		div{color: blue}
	</style>
</head>
<body>
	<h2>demo2</h2>
	<div>哈哈哈哈哈哈</div>
</body>
</html>

3、行内样式

行内样式——在HTML标签内部，以属性的方式写CSS样式，该CSS样式只会对本标签起到作用，类似于<h2 style=“color：red；”>，记得写完style之后加上分号

扫描二维码关注公众号，回复： 4138333 查看本文章

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
<head>
	<title>css样式-行内样式</title>
</head>
<body>
	<!-- 行内样式，直接写在属性当中，只修饰指定标签内容 -->
	<h3 style="color:yellow;">web前端</h3>
	<h3>我正在学习css</h3>
</body>
</html>