最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

7. html和css:html中写css样式表

HTML语言学习 林雍岷 217浏览

从html中写css教程是提供给想要开始使用CSS的,以前从来没有编写过CSS样式表的人。介绍如何创建一个HTML文件,一个CSS文件,又如何让它们一起工作。之后,你可以参考其他教程里的任何一个,再来给HTML和CSS文件添加更多功能。或者你可以切换到专用的HTML或CSS编辑器,帮助你编写更复杂的网站。

教程到最后你会制作出一个HTML文件,如下所示:

See the Pen first-html-and-css by Peter (@linyongmin) on CodePen.default

编写HTML

制作你的第一个CSS样式表建议使用sublime文本编辑器就可以了。不要使用文字处理软件,例如Microsoft Word或OpenOffice,他们制作出来的文件网络浏览器是无法读取的。对于HTML和CSS文件我们需要简单的文本编辑器就行了。

第一步打开你的文本编辑器输入以下的内容:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个样式页面</title>
</head>

<body>

<!--导航-->
<ul class ="navbar">
   <li><a href="index.html">首页</a></li>
   <li><a href="musings.html">连接1</a></li>
   <li><a href="town.html">连接2</a></li>
   <li><a href="links.html">连接3</a></li>
</ul>

<!--主要内容-->

<h1>我的第一个样式页面</h1>

<p>欢迎来到我的样式页面!</p>

<p>这里没有图片,但至少有CSS样式。 有连接,但只是为了模仿和演示,并不能带你到任何地方...</p>

<p>这只是一个例子,好像没什么好写。</p>

<!--日期-->
<p>2020年1月31日制作</p>
</body>
</html>

如果想在自己电脑试一试,可以copy上面的代码。在你的电脑上,将代码以文件名:index.html 的形式保存下来,以下是我们一步步的操作演示。

html添加css

现在我们要HTML文档添加CSS,有三种方式可以实现,而目前我们更倾向于在文档的开头处添加CSS链接。在HTML文档index.html相同目录创建一个文件,名为 styles.css,看后缀知道此文件是CSS。

为了把 styles.css 和 index.html 结合起来使用,可以在HTML文档<head>里面加上下面的代码:

<link rel="stylesheet" href="styles.css">

代码解释

 <link>里面我们用rel属性值是stylesheet,让浏览器知道有CSS文档存在(要遵守CSS样式的规定),并用属性href指定CSS文件的位置。

<link>属性包括:

href指向外部样式表的位置
rel必须设置为“stylesheet”才能链接样式表
type必须设置为“text/css”才能链接到层叠样式表

现在我们可以做测试来验证CSS是否有效,在styles.css里面加上CSS样式并观察显示的结果:

h1 {
  color: red;
}

上述代码为“h1”元素添加了样式,设定文本的颜色是红色。CSS里的样式表是由规则组成,每条规则有三个部分:

  • 选择器(上述示例“h1”)告诉浏览器index.html文档那部分受规则影响;
  • 属性(上述示例’color”是属性)规定 index.html文档h1标签被设置;
  • 还有值(”red”)设置color样式属性的值。

保存styles.css文件再回到浏览窗口。如果你按“刷新”键,从“沉闷”的页面变成有色彩的页面,h1标题颜色显示为红色文本,如下图:

7. html和css:html中写css样式表 html中写css
h1标签设置字体颜色

HTML元素添加颜色

你现在看到是白背景黑字,这是浏览器默认显示。我们现在要做是让页面添加一些颜色。我们开始在styles.css继续编写样式:

body {
     color: #fff;
     background-color: #000;
 }

我们为“body”元素添加了样式,设定文本的颜色是白色,还有接下来一行设定背景颜色是黑色。CSS里的样式表是由规则组成:

  • 选择器(上述示例“ body”)告诉浏览器index.html文档那部分受规则影响;
  • 属性(上述示例”color”和” background-color “是属性)规定 index.html文档字体颜色和背景颜色被设置;
  • 还有值(”red”和”#000″)设置color和background样式属性的值。

我们要设置两个属性,因此我们要做两个单独的规则:

 body { color: #fff} 
body { background-color: #000}

但是因为两个规则都都会影响body,我们只要输入一次“body”,再把属性和值放在一起即可。

body元素的背景也就是整个文档的背景。我们没有给任何其它的元素 (p,li……) 明确的背景,所以它们默认没有(或透明的)。’color ‘属性设置body元素文本的颜色,但是主体内的其它元素都要继承这种颜色,除非明确的覆盖。

现在保存文件再回到浏览窗口按“刷新”键,白色页面变成黑色。除了顶端的链接列表,文本应该是黑色背景显示白色文本。

css引入字体

为页面元素引入字体,我们设置文本为“Georgia”字体,除了h1标题我们使用“Helvetica”字体。在网络上我们不能确定读者电脑上用的是什么字体,通常我们也添加一些字体替代方案,如果没有Georgia,Times New Roman也可以,如果都没有浏览器会使用默认字体。

  body {
    font-family:Georgia,"Times New Roman",Times,serif;
    color:#fff;
    background-color:#000}
  h1 {
    font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif }

再次保存文件和刷新浏览器,现在H1标题和其它文本的字体不相同,如下图:

7. html和css:html中写css样式表 html中写css
css引入字体

html导航栏

在index.html代码顶部有ul列表的导航栏,网站导航通常设置在网页顶部或在页面的边上,这个实例页面我们把它放在左边。导航菜单已经在HTML页面的ul列表,列表的链接是无效的因为我们“网站”到现在为止只是一个页面,当然一个正真的网站肯定不会有任何死链。

现在我们需要把列表移到左边去,然后把其它的文本稍微右移,我们要使用的CSS属性是’padding-left’(为了移动文本主体)和’position’、’left ‘和’top’(为了移动菜单)。

body {
    padding-left: 11em;
    font-family:Georgia,"Times New Roman",Times,serif;
    color:#fff;
    background-color:#000
}
ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em 
}
h1 {
    font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif
}

保存文件刷新浏览器,现在就可以看到主要文本显示在右边,导航列表显示在左边了,如下图:

7. html和css:html中写css样式表 html中写css
html导航栏设置在左边

“position: absolute”说明ul元素的定位独立出现在文档中的任何文本,而”left”和”top”标明在什么位置,从窗口顶部起2em,左边起1em。em在CSS里是非常有用的一个单位,因为它能自动调节字体,1em等于12px。 浏览器有一个加大或是减少字体大小的菜单,你可以试一试,看看当字体加大了菜单如何在加大,如果我们换做使用一个像素大小,情况就不会是这样了。

网站导航设计

网站导航菜单现在看起来像个列表不像菜单。让我们给它添加一些样式,首先移除列表项目符号,再把条目移到项目符号的位置,我们给每个项目添加白色背景。添加链接访问后效果,蓝色显示用户没有看过的连接,红色显示已经访问过的连接。

body {
    padding-left: 11em;
    font-family:Georgia,"Times New Roman",Times,serif;
    color:#fff;
    background-color:#000
}
ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.navbar li {
    background: #fff;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid #000
}
 ul.navbar a {
    text-decoration: none
}
a:link {
    color: blue 
}
a:visited {
    color: red
}
h1 {
    font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif
}
7. html和css:html中写css样式表 html中写css
美化和设计网站导航

HTML超链接<a>元素要规定颜色,为了区分已经访问过的和没有访问过的链接,CSS提供了两个“伪类”(:link和:visited)从类型属性来区别,例如,在我们的示例 class=“navbar” 里使用。

在本教程中,我们学习了使用CSS为文档添加样式的几种方法。你现在已经有足够的知识为文本建立样式;根据目标元素的不同用不同的方式应用样式;在MDN文档中查找属性和值。

转载请注明:林雍岷 » 7. html和css:html中写css样式表