初学者css常见问题_20个适合初学者CSS技巧

最新推荐文章于 2022-04-05 21:04:15 发布

cune1359

最新推荐文章于 2022-04-05 21:04:15 发布

阅读量277

点赞数

文章标签： java css python html javascript ViewUI

在过去，即使只是很小的网站，我们仍然非常依赖开发人员和程序员来帮助更新网站。多亏了CSS及其灵活性，样式可以独立于代码提取。现在，有了CSS的一些基本知识，即使是新手也可以轻松地更改网站的样式。

无论您是想使用CSS来创建自己的网站，还是只是对博客的外观和外观进行一些调整，从基础知识入手以获得更好的基础总是一件好事。让我们看一些我们认为可能对初学者有用的CSS技巧 。

使用

在呈现CSS样式时，Firefox和Internet Explorer等浏览器具有不同的处理方式。 reset.css重置所有基本样式，因此从一个真正空白的新样式表开始。

以下是一些常用的reset.css框架：

使用简写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调试工具：

避免多余的选择器

有时，您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定位

以下文章为您提供了使用CSS定位的清晰了解- position: {...}

CSS

有两种方法可以调用外部CSS文件–分别使用@import和<link> 。如果您不确定要使用哪种方法，请参考以下几篇文章来帮助您做出决定。

用CSS设计表单

Web表单可以使用CSS轻松设计和自定义。以下这些文章向您展示了如何：

获得灵感

如果您正在寻找设计良好的基于CSS的网站来寻求灵感，或者只是浏览以找到一些不错的UI，我们建议您使用以下CSS展示站点：

保持CSS代码干净

如果您CSS代码杂乱无章，您将最终陷入混乱，并且很难参考之前的代码。对于初学者，您可以创建适当的缩进，对其进行适当注释。

版式测量：

在选择何时使用度量单位px或em时遇到问题？以下这些文章可能使您对印刷单元有更好的了解。

CSS浏览器兼容性表

我们都知道每种浏览器都有不同的呈现CSS样式的方式。最好有一个参考，图表或列表来显示每个浏览器的整个CSS兼容性。

CSS支持表：＃1 ，＃2 ，＃3

用CSS设计多列

在使左，中和右列正确对齐时遇到问题吗？以下一些文章可能会有所帮助：

免费获得CSS编辑器

专用编辑器总是比记事本更好。以下是我们建议的一些方法：

了解媒体类型

使用<link>声明CSS时，媒体类型很少。打印，投影和屏幕是几种常用的类型。以正确的方式理解和使用它们可以更好地访问用户。以下文章说明了如何处理CSS Media类型。

翻译自: https://www.hongkiat.com/blog/20-useful-css-tips-for-beginners/

cune1359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学者css常见问题_20个适合初学者CSS技巧

在过去，即使只是很小的网站，我们仍然非常依赖开发人员和程序员来帮助更新网站。由于CSS及其灵活性，样式可以独立于代码而提取。现在，有了对CSS的一些基本了解，即使是新手也可以轻松地更改网站的样式。无论您是想使用CSS来创建自己的网站，还是只是对博客的外观和外观进行一些调整，从基础知识入手以获得更坚实的基础总是一件好事。让我们看一些我们认为可能对初学者有用的CSS技巧。使用r...
复制链接

扫一扫