您的位置：首页 > Web前端 > CSS

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

2017-01-22 10:14 218 查看

三 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其实还有很多内容，以后我们接触到了再慢慢讲。

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 学习 html WEB css 一起学WEB

相关文章推荐

新的分享

章节导航