一起学WEB（三） CSS到底是干啥的

最新推荐文章于 2021-08-04 04:18:24 发布

二月圆舞曲

最新推荐文章于 2021-08-04 04:18:24 发布

阅读量722

点赞数 2

分类专栏： WEB 文章标签：学习 html WEB css 一起学WEB

本文链接：https://blog.csdn.net/FebWaltz/article/details/54666847

版权

WEB 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

三 CSS到底是干啥的

上次我们已经制作了一个简单的网页，并且知道了其中的HTML结构及元素到底是什么意思。的确这个网页可以很好的工作，但是是不是有点太单调了，如果我们想给他做一些美化，比如变换背景颜色或者更换字体之类的该怎么做？这就需要用到CSS了，他与HTML合作，将网页以更美观的方式展现出来。再次强调一下，HTML负责控制网页的结构，CSS负责控制网页的表现。

一个例子，下面是一段单纯的HTML代码（摘自Head First HTML and CSS），这是一个咖啡店的咖啡价目表，这个应该都看得懂，都是上次讲过的：

<html>
	<head>
		<title>Starbuzz Coffee</title>
	</head>

	<body>
		<h1>Starbuzz Coffee Beverages</h1>
		<h2>House Blend, $1.49</h2>
		<p>A smooth, mild blend of coffees from Mexic, Bolivia and Guatemala.</p>

		<h2>Mocha Cafe Latte, $2.35</h2>
		<p>Espresso, steamed milk and chocolate syrup.</p>

		<h2>Chai Tea, $1.85</h2>
		<p>A spicy drink made with black tea, spices, mild and honey.</p>
	</body>
</html>

再来在浏览器中看看他的显示效果，如图：

嗯，默认的白色背景、默认字体、默认字号，总之都是默认的，很干净，但是的确很单调。下面我们就用CSS对这个网页来进行一下美化。用代码编辑器打开index.html，加一段代码，如下：

<html>
	<head>
		<title>Starbuzz Coffee</title>
		<style type="text/css">
			body {
					background-color: #d2b48c;
					margin-left: 20%;
					margin-right: 20%;
					border: 2px dotted black;
					padding: 10px 10px 10px 10px;
					font-family: sans-serif;
			}
		</style>
	</head>

	<body>
		<h1>Starbuzz Coffee Beverages</h1>
		<h2>House Blend, $1.49</h2>
		<p>A smooth, mild blend of coffees from Mexic, Bolivia and Guatemala.</p>

		<h2>Mocha Cafe Latte, $2.35</h2>
		<p>Espresso, steamed milk and chocolate syrup.</p>

		<h2>Chai Tea, $1.85</h2>
		<p>A spicy drink made with black tea, spices, mild and honey.</p>
	</body>
</html>

我们在HTML的head结构中加入了<style>，<style>元素具有一个type属性（很多HTML元素都具有自己的属性，这个网页里他的作用还不大，先不讲）。可以看到<style>的内容就是CSS了，他的语法与HTML是不同的。下面我们来解释一下：

body {	/*以body开头，表示他要控制HTML中整个<body>元素的外观，
	所有外观的属性都在这组大括号中*/
	background-color: #d2b48c;	
	/*这里开始就是body元素的外观属性了，这里是控制他的背景颜色，
	属性值是一个RGB三原色值，用十六进制表示，这组数中红色深度是d2,
	绿色深度为b4，蓝色深度为8c，合成起来是一种棕色*/
	margin-left: 20%;	/*控制左外边距,占整个页面的20%*/
	margin-right: 20%;	/*控制右外边距,占整个页面的20%*/
	border: 2px dotted black;	/*body的边框属性，2个像素粗，虚线，黑色*/
	padding: 10px 10px 10px 10px;	
	/*body的内边框，以顺时针顺序，上、右、下、左都是10个像素，
	这里其实可以简写为padding：10px; 效果相同*/
	font-family: sans-serif;	/*控制元素中的字体样式*/
}

我们来看一下网页现在的效果。

再讲讲上面提到的内边距、边框、外边距。直接看图说。

其中红笔标出的部分是四个方向的内边框，他直接包围着网页的内容，由于网页的内容都是居上居左开始排列的，可以看到上部和左部到边框的距离就是10个像素，而右部和下部则会随着浏览器的大小有所改变。边框不用多说，那个虚线框就是了，他包围着内容和内边距。有一点需要注意，不是所有的浏览器都能正确解释属性，要根据浏览器的种类及版本而定，在笔者的另一种浏览器中边框就没有显示出来。外边距包围着边框、内边距和内容，可以看到上图中他占据了整个页面左右的各20%。

的确不难吧。关于CSS其实还有很多内容，以后我们接触到了再慢慢讲。

下一次我们来讲一讲链接，将我们的网站扩充到多个界面，然后再介绍一下页面资源定位的相关内容，告诉网站如何找到需要的网页或资源。

下期：链接——把你的网页连成网站