本文共 2109 字,大约阅读时间需要 7 分钟。
在过去,即使只是很小的网站,我们仍然非常依赖开发人员和程序员来帮助更新网站。 多亏了CSS及其灵活性,样式可以独立于代码提取。 现在,有了CSS的一些基本知识,即使是新手也可以轻松地更改网站的样式。
无论您是想使用CSS来创建自己的网站,还是只是对博客的外观和外观进行一些调整,从基础知识入手以获得更好的基础总是一件好事。 让我们看一些我们认为可能对初学者有用的CSS技巧 。
在呈现CSS样式时,Firefox和Internet Explorer等浏览器具有不同的处理方式。 reset.css
重置所有基本样式,因此从一个真正空白的新样式表开始。
以下是一些常用的reset.css
框架:
速记CSS为您提供了一种编写CSS代码的更短方法,而最重要的是–它使代码更清晰,更易于理解。
而不是像这样创建CSS
.header { background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left; }
它可以简化为以下几种:
.header { background: #fff url(image.gif) no-repeat top left }
这两个选择器经常使初学者感到困惑。 在CSS中, class
由点“。”表示。 而id
是一个哈希“#”。简而言之id
被用在风格是独特的,不重复自己, class
的另一边,可重复使用。
CSS的最大优点之一是使用<div>
来实现样式方面的总体灵活性。 <div>
与<table>,
不同<table>,
在<table>,
内容被“锁定”在<td>
的单元格内。 可以肯定地说,大多数<table>
布局都可以通过使用<div>
和适当的样式来实现,也许除了大量的表格内容之外。
在调整CSS的同时获得布局的即时预览总是很好的,它有助于更好地理解和调试CSS样式。
您可以在浏览器上安装以下一些免费CSS调试工具:
有时,您CSS声明可能会更简单,这意味着如果您发现自己编写了以下代码:
ul li { ... } ol li { ... } table tr td { ... }
它们可以缩短到
li { ... } td { ... }
标记为!important
任何样式都会被使用,无论下面是否有覆盖规则。
.page { background-color:blue !important; background-color:red;}
在上面的示例中,将对background-color:blue
进行改编,因为它被标记为!important
,即使存在background-color:red;
也不background-color:red;
在它下面。
这通常是将<h1>title</h1>
从基于文本的标题替换为图像的做法。 这是您的操作方式。
h1 {text-indent:-9999px;background:url("title.jpg") no-repeat;width:100px;height:50px;}
说明: text-indent:-9999px;
将您的文字标题移出屏幕,由background: {...}
声明的图像替换为具有固定width
和height
。
以下文章为您提供了使用CSS定位的清晰了解- position: {...}
有两种方法可以调用外部CSS文件–分别使用@import
和<link>
。 如果您不确定要使用哪种方法,请参考以下几篇文章来帮助您做出决定。
Web表单可以使用CSS轻松设计和自定义。 以下这些文章向您展示了如何:
如果您正在寻找设计良好的基于CSS的网站来寻求灵感,或者只是浏览以找到一些不错的UI,我们建议您使用以下CSS展示站点:
如果您CSS代码杂乱无章,您将最终陷入混乱,并且很难参考之前的代码。 对于初学者,您可以创建适当的缩进,对其进行适当注释。
在选择何时使用度量单位px
或em
时遇到问题? 以下这些文章可能使您对印刷单元有更好的了解。
我们都知道每种浏览器都有不同的呈现CSS样式的方式。 最好有一个参考,图表或列表来显示每个浏览器的整个CSS兼容性。
CSS支持表: , ,
在使左,中和右列正确对齐时遇到问题吗? 以下一些文章可能会有所帮助:
专用编辑器总是比记事本更好。 以下是我们建议的一些方法:
使用<link>
声明CSS时,媒体类型很少。 打印,投影和屏幕是几种常用的类型。 以正确的方式理解和使用它们可以更好地访问用户。 以下文章说明了如何处理CSS Media类型。
翻译自:
转载地址:http://cbezd.baihongyu.com/