#WEB安全基础 : HTML/CSS | 0x1初识CSS

2019-01-21 02:37:55来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

"我受够这些难看的网页了,我怎么才能让它变得好看点?"你说。

我答道:"看来你得学点CSS了"

学习这些东西只有一个原则,就是用你的脑袋想,用你的眼睛看,用的你手敲。很简单,对吧?


这次我写了两个网页


看代码就用到了你的眼睛,

下面是index.html的代码

<html>
<head>
<title>Starbuzz Coffe</title>
<!--CSS内部调用(就是在html文本中写<style>标签从而使用CSS)-->
<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 Coffe Menu</h1>
<h2>House Blend, $1.49</h2>
<p>
A swooth, mild blend of coffees from Mexico, Bolivia and Guatemala.
</p>
<h2>Mocha Cafe Latte, $2.35</h2>
<p>
Espresso, steamed milk and chocolate syrup.
</p>
<h2>Cappuccino, $1.89</h2>
<p>
A mixture of esresso, steamed milk and foam.
</p>
<h2>Chai Tea, $1.85</h2>
<p>
A spicy drink made with black tea, spices, milk and honey.
</p>
</body>
</html>
<!--
body{                                    CSS作用的标签
background-color: #d2b48c;                背景颜色,#d2b48c是RGB十六进制颜色代码
margin-left: 20%;                        左边空出20%的页面
margin-right: 20%;                        右边空出20%的页面
border: 2px dotted black;                2px大小的虚线黑色边框
padding: 10px 10px 10px 10px;            内边距上下左右的边距都是10px的大小
font-family: sans-serif;                字体
}
不要在CSS内尝试写html的注释
-->

 


请记住

不要在CSS内尝试写html的注释!!! 否则CSS会失效


这是网页的一个页面,称为默认页面,默认页面的文件名一般是index.html或者是default.html它们的作用是当你只是通过域名访问到网站时,网站会展示给你默认网页而不是随便一个网页(网站不只是由一个网页组成)。比如访问百度,百度就会向你展示一个“百度一下你就知道”的页面。

我们现在是在自己的电脑上写网页,所以默认网页并不起作用。


这是index.html在浏览器中的显示

这是网页在自己电脑里的路径(这不是域名)

file:///C:/Users/Administrator/Desktop/WebFrontEnd/HTML%E5%92%8CCSS/02%E5%88%9D%E8%AF%86CSS/index.html


把文件名,也就是index.html去掉,可以查看目录下的索引

如:


接下来是mission.html的代码

<html>
<head>
<title>Starbuzz Coffee's Misson</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's Mission</h1>
<p>
To provide all the caffeine that you need to power you life.
</p>
<p>
Just drink it.
</p>
</body>
</html>

 

试着自己分析各个元素的作用

这是mission.html在浏览器中的显示


不要只是看一看代码就行了,你需要理解,也不是只要理解就行,你需要动手。


怎么样,加了CSS的网页好不好看?


//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买


转载请注明出处  by:M_ZPHr

最后修改日期:2019-01-16


原文链接:https://www.cnblogs.com/MZPHr/p/10278243.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:博客园的推荐栏,怎么漂起来?

下一篇:转:从输入url到显示网页发生了什么