一个网站的视觉风格和布局是由CSS或级联样式表。这些文档塑造了网页的HTML标记,为web浏览器提供了如何显示由该标记产生的页面的说明。CSS处理页面的布局,以及颜色、背景图像、排版等等。
如果您查看CSS文件,您将看到,如任何标记或编码语言,这些文件对它们具有特定语法。每个样式表由许多CSS规则组成。全额拍摄时,这些规则是该网站的样式。
CSS规则的组成部分
CSS规则由两个不同的部分组成——选择器和声明。选择器决定页面上要设置的样式,声明决定页面应该如何设置样式。例如:
p {
颜色:# 000;
}
这是一个CSS规则。的选择器部分是p,它是“段落”的元素选择器。因此,它会选择站点中的所有段落,并为它们提供这种样式(除非在CSS文档的其他地方有更特定的样式针对段落)。
该规则的一部分说,“颜色:# 000;这就是所谓的宣言。该声明由两部分组成——the财产和价值。
的财产是个颜色这一宣言的一块。它决定了选择器的哪个方面将在视觉上改变。
的价值所选的CSS属性将被更改为。在我们的例子中,我们使用的是十六进制值# 000,这是CSS中“黑色”的缩写。
因此,使用这个CSS规则,我们的页面将以黑色的字体显示段落。
CSS属性基本知识
当您编写CSS属性时,您就不能简单地制作它们,如您所看到的拟合。例如,“颜色”是实际的CSS属性,因此您可以使用它。此属性是确定元素的文本颜色的原因。如果您尝试使用“文本颜色”或“字体颜色”作为CSS属性,则它们将失败,因为它们不是CSS语言的实际部分。
另一个例子是属性“background-image”。这个属性设置一个可以用作背景的图像,像这样:
.logo {
背景 - 图片:URL(“/ images / company-logo.png”);
}
如果您尝试使用“背景图片”或“Background-Graphic”作为属性,则它们将失败,因为再次,这些不是实际的CSS属性。
一些CSS属性
有许多CSS属性可以用于样式化站点。一些例子:
- 边框(包括边框样式、边框颜色和边框宽度)
- 填充(包括顶部填充、右侧填充、底部填充和左侧填充)
- 页边距(包括页边距上、页边距右、页边距下、页边距左)
- 字体系列
- 字体大小
- 背景颜色
- 宽度
- 高度
这些CSS属性都是很好的例子,因为它们都非常简单,即使你不知道CSS,你也可以根据它们的名字猜出它们的作用。
还有其他CSS属性,您也会遇到,这可能不会像他们的名字那样明显地工作:
- 浮动
- 清除
- 溢出
- 文本变换
- z - index
当您深入了解Web设计时,您将遇到(并使用)所有这些属性等等!
属性需要值
每次使用属性时,都必须给它一个值 - 而某些属性只能接受某些值。
在“color”属性的第一个例子中,我们需要使用一个颜色值。这可能是十六进制值, RGBA值,甚至彩色关键词。但是,任何这些值都会起作用,但是,如果您使用此属性“阴郁”一词,它不会做任何事情,因为,如该字可以的描述性,它不是CSS中的识别值。
我们的“背景图像”的第二个例子需要用于使用的图像路径获取一个实际的图像从您的网站的文件。这是必需的值/语法。
所有CSS属性都有它们期望的值。例如:
- 边界颜色期望颜色值。
- 边界大小预期尺寸值,如像素或百分比。
- 边框样式需要此属性使用的保留样式之一,如“solid”。
如果您浏览CSS属性列表,您将发现它们中的每一个都有特定的值,它们将使用这些值来创建它们想要的样式。