CSS是'Cascading Style Sheets'的缩写。CSS是HTML的姊妹语言,允许您设置网页的样式。风格改变的一个例子就是使词语变得粗体。在标准的HTML中,你可以像这样使用标签:
< b >让我大胆< / b >
这工作正常,它本身没有什么问题,除了现在如果你想要改变你最初做粗体的所有文本加下划线,你将不得不去每个页面的每一个地方,改变标签。
在这个例子中还可以找到另外一个缺点:假设你想让上面的文字变成粗体,把字体样式Verdana改成红色,你需要大量的代码来包装文本:
< font color = “#FF0000” face = “Verdana,Arial,Helvetica,sans-serif” >
< b >这是文字< / b > < / font >
这是冗长(罗嗦),并有助于使您的HTML凌乱。使用CSS,您可以在别处创建自定义样式并设置其所有属性,为其指定唯一的名称,然后“标记”HTML以应用这些样式属性:
< p class = “myNewStyle” >我的CSS风格文本< / p >
而在网页顶部的 标签之间,你可以插入这个CSS代码来定义我们刚刚应用的样式:
<! -
.myNewStyle 笀
font-family : Verdana , Arial , Helvetica , sans-serif ;
font-weight : bold ;
颜色: #FF0000 ;
}
- >
style >
在上面的例子中,我们将内嵌样式表代码,换句话说,包含在页面中。对于较小的项目或在您定义的样式只能在单个页面中使用的情况下,这是很好的。
有很多次,当你将你的CSS样式应用到很多页面,并且很难将CSS代码复制并粘贴到每个页面中。除了使用重复的CSS代码混淆每个页面的事实之外,如果要更改样式,还需要编辑每个页面。
解决方案:就像使用JavaScript一样,您可以在一个单独的文件中定义/创建CSS样式,然后将其链接到要应用代码的页面:
< link 栀爀攀昀 = “myFirstStyleSheet.css” 爀攀氀 = “stylesheet” 琀礀瀀攀 = “text / css” >
上述代码行将您的外部样式表“myFirstStyleSheet.css”链接到HTML文档。您将此代码放置在网页中的 head>标记之间。
要创建一个外部样式表,您只需要创建一个简单的文本文档(在Windows上,您只需右键单击并选择new - > text document),然后将其从文件类型.txt更改为.css。您只需更改文件扩展名即可更改文件类型。Windows上文件名的扩展名告诉计算机它是什么类型的文件,并允许计算机确定如何处理该文件,例如,当您尝试打开它。
你可能猜到了; CSS文件只是特别(特别)格式化的文本文件,就像HTML页面一样。文件本身并没有什么特别的或者不同的地方,而是将CSS文件作为CSS文件的文件内容。
使用外部CSS文档时,需要记住几点:
1.不要像在HTML中嵌入CSS代码那样在CSS文档/页面中添加这些标签:
< style 琀礀瀀攀 = “text / css” > < / style >
由于连接CSS页面和HTML页面的网页中的链接表示您正在链接到一个CSS页面,因此不需要声明页面中的代码是CSS。这就是上面的标签所做的。相反,您只需将您的CSS代码直接添加到页面:
.myNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FF0000; } .my2ndNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FF0000; } .my3rdNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12pt; color: #FF0000; }
在上面的例子中,我创建了一系列可以应用于任何HTML标记的CSS类,如下所示:
< p 挀氀愀猀猀 = “myNewStyle” >我的CSS风格文本< / p >
要么
< h2 挀氀愀猀猀 = “my3rdNewStyle” >我的CSS风格文本< / h2 >
你会注意到,在上面的例子中,我将CSS样式应用于
标签。这个标签将它所包装文本的大小设置为浏览器中预设的大小(例如:10像素)。当您应用CSS类时,CSS代码会覆盖您通常使用标记获取的默认大小,以支持CSS类中指定的大小。所以现在你可以看到CSS可以覆盖默认的HTML标签行为!
在上面的例子中,我有CSS代码,我定义了我的CSS类,然后“应用”到页面中的各种元素。应用CSS的另一种方法是全局重新定义一个HTML标签以便以某种方式查看:
h1 { 昀漀渀琀-family : Garamond , “Times New Roman” , serif ; 昀漀渀琀-size : 200%; 紀
这个CSS代码所做的是一次性设置所有
标签的字体样式和大小。现在,您不必像以前那样对任何标签应用CSS类,因为它们自动受到CSS样式规则的影响。
这里是我给整个页面更大利润的另一个例子:
身体{ 稀絺左边: 15%; 保证金: 15%; 紀
正如你所看到的,你可以重新定义任何标签并改变它的样子!这可能是非常强大的:
div { background: rgb(204,204,255); padding: 0.5em; border: 1px solid #000000; } |
在上面的代码中,所有的
div>标签现在都有一个背景颜色'rgb(204,204,255)',并有一个0.5em的填充和一个纯黑色的薄的1像素边框。
以上几点需要解释:
CSS中的颜色可以用几种方式表示:
在十六进制 - >例如:#000000 - 这是黑色的,这个:#FF0000是红色的。
在rgb - > rgb(204,204,255)中是浅紫色的蓝色。
与命名的颜色,如:“红色”或“蓝色”
我通常使用十六进制颜色,因为我熟悉它们,或者我只使用命名的颜色。所以最后一个例子可以这样重写:
div { background: green; padding: 0.5em; border: 1px solid #FF0000; }
所以我不是'rgb(204,204,255)',而是指定'绿色'。
通过使用RGB(RGB是'Red Green Blue'的缩写)和Hex颜色,当你知道你的代码时,你可以很容易地得到你想要的确切颜色。幸运的是许多程序(如Dreamweaver)为您提供了易于使用的颜色选择器,因此您不需要知道代码的值。
在这最后一个示例中,我将向您展示“超酷”CSS代码,该代码允许您创建不带图像的链接翻转效果:
:link { color: rgb(0, 0, 153) } /* for unvisited links */ :visited { color: rgb(153, 0, 153) } /* for visited links */ :hover { color: rgb(0, 96, 255) } /* when mouse is over link */ :active { color: rgb(255, 0, 102) } /* when link is clicked */ |
上面的CSS会导致你的链接改变颜色时,有人把鼠标指针悬停在它上面,即时翻转没有图像!上述代码的一个重要注意事项是风格声明的顺序是正确的:“link-visited-hover-active”,否则它可能在某些浏览器中被破坏。
CSS功能非常强大,可以让你做一些你不能用标准HTML做的事情。现在在所有的现代浏览器中都支持它,并且是网页设计人员必须学习的工具。
上面的例子只是CSS的一个小例子,但是对于你来说,很好的开始你的页面样式应该已经足够了。像许多技术一样,CSS有很多功能,大多数人不需要经常使用。不要陷入思想陷阱,如果有一些功能/功能可用,你必须使用它。