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

我答道:"看来你得学点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

#WEB安全基础 : HTML/CSS | 0x1初识CSS的更多相关文章

  1. 第五模块:WEB开发基础 第1章·HTML&CSS基础

    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...

  2. web前端基础知识-(二)CSS基本操作

    1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...

  3. #WEB安全基础 : HTTP协议 | 0x1 TCP/IP通信

    TCP/IP是如何通信的呢? 请看图 用TCP/IP协议族通信时,会通过分层顺序与对方进行通信.发送端从应用层往下走,接受层从链路层往上走. 客户端为了浏览界面在应用层发送请求,为了方便传输在传输层的 ...

  4. #WEB安全基础 : HTTP协议 | 0x6 初识HTTP报文

    欢迎来到HTTP最精彩的部分 请注意:应用HTTP协议时,必定有一方担任客户端,另一方担任服务器 客户端向服务器发出请求,服务器向客户端返回响应 下面是一个请求与相应的例子: 请求: GET /ind ...

  5. #WEB安全基础 : HTML/CSS | 文章索引

    本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...

  6. #WEB安全基础 : HTTP协议 | 文章索引

    本系列讲解WEB安全所需要的HTTP协议 #WEB安全基础 : HTTP协议 | 0x0 TCP/IP四层结构 #WEB安全基础 : HTTP协议 | 0x1 TCP/IP通信 #WEB安全基础 : ...

  7. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  8. #WEB安全基础:HTML/CSS | 0x0 我的第一个网页

    #WEB安全基础:HTML/CSS系列,本系列采用第二人称以免你不知道我在对着你说话,以朋友的视角和你交流 HTML的中文名叫做超文本标记语言,CSS叫做层叠样式表 用HTML设计你的第一个网页,你需 ...

  9. Web前端基础——CSS

    一.CSS概述 css ( cascading style sheets ) 层叠样式表,可以轻松设置网页元素的显示.位置和格式外,甚至还能产生滤镜,图像 淡化,网页淡入淡出的渐变效果,简而言之,cs ...

随机推荐

  1. 18年最有"钱"途的专业就是它(文末有福利)

    根据社会调查机构麦可思发布的<2018年中国大学生就业报告>中得知,从就业率.薪资和就业满意度等多角度综合考量,信息安全专业为首推绿牌专业. 不管你是计算机相关专业的学生,还是已经工作的I ...

  2. 1分钟快速制作漂亮的H5本地记事本

    大家好,以前给大家分享过一个五步骤制作精美的HTML5时钟的文章,点击回顾<五步教你制作漂亮精致的HTML时钟>,还有<一分钟教你如何实现唯美的文字描边>:今天给大家分享一个用 ...

  3. Android JNI 学习(十一):Invocation Api

    1. 简介 Invocation API允许软件提供商在原生程序中内嵌Java虚拟机.因此可以不需要链接任何Java虚拟机代码来提供Java-enabled的应用程序. 以下代码演示如何使用: #in ...

  4. Javascript高级编程学习笔记(35)—— DOM(1)节点

    DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...

  5. python 字符串拼接

    str1 = 'abc' str2 = 'def' str3 = str1 + str2 print(str3) 这种方法只需要申请一次内存.

  6. HOG算法资源备忘

    最近再研究这个算法,找了不少资料来研究,发现这方面的资料好的并不多,今天就把找到的经典的资料做一个汇总,方便后续查阅吧. 一 基本概念和推导: 1 解释最清楚的:中文网站:https://blog.c ...

  7. 【PHP篇】字符串基础

    1.声明时既可以用双引号也可以用单引号 str1 =”字符串值”;    //可解析引号里的变量等内容 str2=’字符串值’;     //不可解析内容 2.字符串没有长度限制,但要注意内存的消耗 ...

  8. Impl模式实现之注意内联

    最近学习muduo源码时,对于内联函数有了更深刻的认知. 内联(inline)在代码执行方面具有优势,但是有时使用不当,或者稍微不注意,就会造成编译错误. 以下将通过Impl实现说明一二: 头文件: ...

  9. sql server 性能调优之 资源等待内存瓶颈的三种等待类型

    一.概述 这篇介绍Stolen内存相关的主要三种等待类型以及对应的waittype编号,CMEMTHREAD(0x00B9),SOS_RESERVEDMEMBLOCKLIST(0x007B),RESO ...

  10. salesforce零基础学习(九十三)Email To Case的简单实现

    Salesforce提供了标准的功能来实现通过Email 创建 Case.我们可以设置指定的路由的地址,指定条件的邮件会自动生成到目标salesforce系统的Case数据.Salesforce提供了 ...