sql初学者指南_Web设计初学者指南:第2部分

sql初学者指南

在本系列的第二部分中,我们将创建一个CSS(层叠样式表)文件来编辑HTML网页的外观 。 Web设计人员将网页的内容与样式(CSS)分开,以使源代码易于阅读,并使网站的重新设计比将样式与内容混在一起要简单得多。


此系列中也可用:

  1. Web设计初学者指南:第1部分
  2. Web设计初学者指南:第2部分
  3. Web设计初学者指南:第3部分

上图是我们的网页现在的外观。 今天,我们将使用这个未样式化的页面,并使用CSS将其转换为:


步骤1:入门

使用您喜欢的文本编辑器,在与HTML页面相同的目录中创建一个新的空白文件,并将其命名为“ style.css”-这是我们将所有样式存储在其中的文件。

但是首先,我们需要链接到我们网页中CSS文件。

在HTML文件中,将以下行添加到<head>部分中的<title>下方:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />

在style.css中输入以下内容:

body { 
	  background-color: #eeeeee; 
	}

我们在这里所做的是在HTML页面上为<body>标签设置样式。 通过样式化主体,我们可以样式化整个页面。 在{}大括号内,我们输入要应用于目标标记的样式。

background-color是目标标记的背景色CSS属性。 键入属性后,我们在冒号(:)后接此属性的值。 在每个CSS属性的末尾,您都必须输入分号(;)。

#eeeeee是一个十六进制数字,表示以下灰色阴影:            。 如果您对任何图形包(如Photoshop)有任何经验,可能对您很熟悉。

您还可以通过其HTML颜色名称设置颜色(不建议使用,因为您几乎无法控制颜色阴影):

background-color: red;

或作为RGB十进制数字

background-color: rgb(255, 255, 255);

看一下您的网页。 现在,背景应该是不同的颜色:


造型身体

除了更改背景色之外,我们还为<body>标签添加更多样式:

  1. 文字颜色:浏览器为文字提供的默认颜色是黑色(#00000)。 让我们将其更改为近乎黑色的颜色,在背景下看起来不那么刺眼,例如#111111。
  2. 字体:大多数浏览器将默认字体设置为“ Times New Roman”,我们希望使用类似的衬线字体 ,但有些“经典”。 我们将字体设置为“乔治亚”。
  3. 字体大小:字体现在有点大,我们将其减小为默认大小的90%。

body {}样式选择器中添加以下属性以及background-color:

color: #111111; 
	font-family: "Georgia", "Times New Roman", serif; 
	font-size: 90%;

在第一行中,我们使用“颜色”属性将页面上文本的颜色设置为#111111。

之后,我们使用“字体家族”来更改字体。 由于所有计算机可能未安装相同的字体,因此,如果浏览器找不到第一个字体,则为浏览器设置其他字体很重要,这很重要。

在我们的情况下,我们将默认字体设置为“乔治亚”。 万一发生访问我们网站的人未安装格鲁吉亚的情况,浏览器将尝试使用“ Times New Roman”字体。 如果也未安装该字体,则将使用系统的首选衬线字体

最后,我们使用“字体大小”将页面上文本的大小设置为其默认设置的90%。 为了确认,您CSS文件现在应显示为:

body { 
	  background-color: #eeeeee; 
	  color: #111111; 
	  font-family: "Georgia", "Times New Roman", serif; 
	  font-size: 90%; 
	}

在浏览器中查看页面:


盒子模型–边距,填充和边框

用于样式页面的一些最重要CSS属性是“页边距”,“填充”和“边框”。 看下面的图:

每个HTML元素本质上都是一个盒子,内容在中间。 内容周围是填充,它添加了空白空间并受元素的背景颜色影响。

边框位于填充的边缘,边框周围是空白,在对象周围增加了透明的空白空间。

下图显示了对齐到两段文字左侧的图像。 该图像没有填充,边框或边距,因此它的位置尽可能靠近文本。

如果我们要给图像提供以下属性:

padding: 3px; 
	border: 3px solid #dddddd; 
	margin-top: 5px; 
	margin-right: 10px; 
	margin-bottom: 5px;

它看起来像这样:

您可以清楚地看到3px灰色边框正在生效。 图像和边框之间的空白是填充,并且不同的边距在边框外部增加了透明空间,以将其与文本稍微分开。

如果填充要添加元素的背景色,则要添加以下属性:

background-color: yellow;

我们会得到:


步骤2:容器

目前,我们的网页占据了浏览器的整个宽度,这严重影响了大型浏览器中页面的可读性。 为了解决这个问题,我们将使用“容器”包装网页的全部内容,然后使用CSS限制此容器的宽度。

在文本编辑器中打开HTML文件,然后在打开<body>标记后直接输入:

<div id="container">

然后直接在</ body>标记之前,关闭容器:

</div>

<div>标记标记了一个“部门”,并且主要用作构建布局页面的构件。

所有HTML标记都可以具有ID和Class属性以帮助进行样式设置。 请注意,您只能在同一页面中使用一次ID,因此对于只能存在一次的元素(例如容器)很有用。

类属性可以在同一页面上多次使用,对于元素之间的通用样式(如对齐图像)很有用。 稍后我们将进一步研究class属性。

在您CSS文件中,添加以下内容:

#container { 
	  width: 900px; 
	}

#container中的#是“ ID为...HTML元素”CSS选择器。 我们也可以将此选择器编写为div#container

我们将容器设置为900像素的宽度。 对于网站而言,这是一个不错的宽度,但是请记住,建议使用的最大宽度为960px,以确保在绝大多数屏幕分辨率下,页面显示时没有水平滚动条。

要将容器在浏览器窗口中居中,请将以下样式添加到#container中:

margin: 0 auto;

这会将上边距和下边距设置为0(即无边距),并自动计算左右边距-这意味着浏览器会将容器放在浏览器窗口的中心。


CSS速记

在容器的边距样式中,我们使用CSS简写。 我们可以将样式写为:

margin-top: 0; 
	margin-right: auto; 
	margin-bottom: 0; 
	margin-left: auto;

但是,通过设置“ margin”并为其提供两个值(“ 0”和“ auto”),第一个值用于顶部和底部边距,第二个值用于左侧和右侧。

使用一个值

下面的样式将在元素的每边增加5px的边距:

/* Short-hand: */ 
	margin: 5px; 
 
	/* Long-hand: */ 
	margin-top: 5px; 
	margin-right: 5px; 
	margin-bottom: 5px; 
	margin-left: 5px;

两个价值观

这将使其顶部和底部的空白为10px,左侧和右侧为20px:

/* Short-hand: */ 
	margin: 10px 20px; 
 
	/* Long-hand: */ 
	margin-top: 10px; 
	margin-right: 20px; 
	margin-bottom: 10px; 
	margin-left: 20px;

三个价值观

如果我们设置三个值,则第一个值用于顶部边距,第二个值用于左侧和右侧,第三个值用于底部边距。

/* Short-hand: */ 
	margin: 10px 15px 5px; 
 
	/* Long-hand: */ 
	margin-top: 10px; 
	margin-right: 15px; 
	margin-bottom: 5px; 
	margin-left: 15px;

四个价值观

通过设置四个值,第一个是顶部边距,第二个是右侧,第三个是底部,第四个是左侧。 可以将此顺序视为顺时针旋转元素-顶部,右侧,底部,左侧。

/* Short-hand: */ 
	margin: 5px 3px 9px 12px; 
 
	/* Long-hand: */ 
	margin-top: 5px; 
	margin-right: 3px; 
	margin-bottom: 9px; 
	margin-left: 12px;

您可以将这种速记样式与边距和填充一起使用。 要了解其他CSS速记技术,请参阅WebCredible上的本文


步骤3:标题

当我们沿着页面向下移动时,下一部分是标题。 在这里,我们希望标题位于页面的中心,并在页面上应用细微的阴影。

将以下样式添加到样式表:

header h1 { 
	  text-align: center; 
	  text-shadow: 1px 1px 1px #999999; 
	}

“标题h1”选择器的意思是“在标题内查找每个h1”。

“ text-align”完全符合您的期望:它设置元素的水平对齐方式。 在这种情况下,我们将其设置为居中。 您也可以将其设置为“右”或“左”(默认)。

“文本阴影”是CSS 3中的新属性,需要四个值:

  1. 右侧显示阴影的像素数(使用负数将其设置为左侧)
  2. 下方显示阴影的像素数(使用负数在上方设置阴影)
  3. 使阴影模糊的像素数
  4. 阴影的颜色

在本例中,我们将阴影设置为文本下方和右侧的1px,具有非常微妙的1px模糊,并且颜色为中灰色(#999999)。


导航

现在进入导航,这将需要更多的代码样式:

从以下样式开始:

nav ul { 
	  list-style: none; 
	  padding: 0; 
	  text-align: center; 
	}

在这里,我们将目标定位在导航内的ul(无序列表)上。 “列表样式”为每个列表项的项目符号样式。 在这种情况下,我们通过将属性设置为“ none”来删除项目符号。

“填充:0;” 删除默认的填充Web浏览器通常会给出UL(通常是左侧填充)。 最后,我们将文本以“ text-align”居中。

因此,我们的导航现在位于页面的中心,但是它们显示在彼此下方。 这是因为每个列表项都有默认样式,这使它们成为“阻止”元素-意味着它们不会并排显示。 为了纠正这个问题,我们将它们显示为“内联”:

nav ul li { 
	  display: inline; 
	  font-variant: small-caps; 
	  letter-spacing: 2px; 
	}

因此,现在导航中无序列表(ul)中的每个列表项(li)将显示内联,允许其他元素位于它们旁边。

我们还设置了“ font-variant”属性,将文本设置为“ small-caps”(所有小写字符将显示为小写大写字符)。

最后,我们将“字母间距”设置为2px。 这在每个字符之间增加了2个像素的间隙。 您可以在此处使用负值来强制字符靠得更近。

您真的可以看到CSS为我们提供的强大功能。 它几乎可以完成Photoshop的所有工作。

现在,让我们在每个导航项之间添加一些行,以将它们分开。 在“ nav ul li”样式中添加以下内容:

border-right: 1px solid #999999;

我们在每个列表项的右侧添加了一个边框,该边框的厚度为1px,为“实线”,中间为灰色(#999999)。 其他线条样式不是“固体”包括“虚”,“点缀”,“双”和几个

边界在那儿,但我们之间确实需要一定的间距。 让我们添加一个边距和填充来修复它:

margin-right: 10px; 
	padding-right: 10px

请记住,在“盒子模型”中,填充位于边框的内部,空白位于边框的外部。 据此,我们知道上面的代码在每个列表项之间添加了20px的间距,中间有1px的边框。

但是,仍然存在两个问题:最后一个列表项上的边框是不必要的,链接本身是一种可怕的颜色。

要从最后一个列表项中删除边框,请使用以下样式:

nav ul li:last-child { 
	  border: none; 
	  margin: 0; 
	  padding: 0; 
	}

“:last-child”选择器的目标是导航中ul中ul的最后一个li(基本上是我们的最后一个导航项)。 我们已从此项中删除了所有边框,边距和填充(我们已删除边距和填充以确保它们不会使列表稍微偏离中心)。

要更改链接颜色,我们将定位导航栏中的所有链接(“ a”标签):

nav a { 
	  color: #111; 
	  text-decoration: none; 
	}

第一行很清楚,我们将链接的颜色设置为#111-与网站上其余文本的颜色相同。 在第二行中,通过将“文本装饰”设置为“无”,我们删除了通常出现在链接下方的下划线。

这很好用,但是当我们将鼠标悬停在链接上时,该链接没有任何React来确认我们将鼠标悬停在该链接上。 若要更正此问题,请添加以下样式:

nav a:hover { 
	  text-decoration: underline; 
	}

“:hover”选择器的意思是“当用鼠标悬停该元素时”。 因此,当发生这种情况时,我们将通过更改先前从中删除的“文本装饰”属性,将下划线添加回链接。

在上图中,我将鼠标悬停在“ Nettuts”链接上,以便显示下划线。


剖面与侧面

现在,我们的侧边栏(<aside>)实际上不是侧边栏-它只是位于主要内容(<section>)的下方。 若要更正此问题,我们需要给<section>和<aside>都设置一个宽度,然后告诉它们粘贴到容器的任一侧。

您会记得,我们的#容器具有900像素的宽度供我们使用。 我们知道我们的主要内容应该比侧边栏宽,因此<section>和<aside>之间的2:1比例会很好用-因此我们将“ section”设置为600px,将“ aside”设置为300px。

但是,这种逻辑存在一个小问题:主要内容和侧边栏之间没有缝隙。 为了解决这个问题,我们只会将侧边栏设置为280px-在它们之间留出20px的间隙:

section { 
	  float: left; 
	  width: 600px; 
	} 
 
	aside { 
	  float: right; 
	  width: 280px; 
	}

在上面的代码中,我们设置了两个对象的宽度,但是我们还告诉了<section>向左“浮动”,告诉<aside>向右“浮动”。

通过设置“ float”属性,我们将每个对象从字面上对齐到其容器的任一侧,从而允许侧边栏与主要内容并排放置。


页脚

现在,我们的页脚正坐在侧边栏的正下方,正试图容纳任何空白空间。 若要更正此问题,我们需要告诉页脚不允许在其任一侧浮动任何对象:

footer { 
	  clear: both; 
	  display: block; 
	}

“清楚:两者”确保页脚的任何一侧都没有“浮动”。 您还可以将“清除”设置为“左”或“右”,以确保没有任何特定一侧浮动。

“显示:阻止”确保页脚不内联显示(Firefox需要此显示)。

最后,让我们修正页脚中文本的样式。 将以下内容添加到现有的页脚样式中:

font-size: 90%; 
	font-style: italic; 
	font-variant: small-caps; 
	padding-top: 10px;

页脚中的样式链接还有以下新样式:

footer a { 
	  color: #111111; 
	}

摘要

在本系列的最后一部分,我们将通过在我们的网站上添加一个额外的页面,使用一些不同HTML元素并通过样式化来扩展我们CSS知识,来进一步提高您HTML和CSS技能。

翻译自: https://code.tutsplus.com/tutorials/the-beginners-guide-to-web-design-part-2--pre-8952

sql初学者指南

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值