每个设计师应该知道的20个基本CSS技巧

 詹姆斯乔治 经过 詹姆斯乔治  |  2016年10月28日

这个是绝对初学者。一旦你了解了盒式模型如何工作,以及如何漂浮那些盒子,就是时候认真对待你的CSS了。为此,我们编制了大规模的提示,技巧,技术以及偶尔的脏话清单,以帮助您构建您想要的设计。

CSS. 可能会变得棘手,你也应该。现在,在没有特别的顺序,(几乎)你需要知道的一切:

 

绝对定位

如果您想要控制在我们网站上的元素始终生存的位置,绝对定位是实现这一目标的关键。如果您认为浏览器作为一个大边界框,绝对定位允许您在该框中控制该框中的位置,该元素将保持。使用顶部,右侧,底部和左侧,伴随着像素值来控制元素保持的位置。

position:absolute;
top:20px;
right:20px

上面的CSS设置元素的位置从浏览器的顶部和右边缘停留20px。您还可以使用div内的绝对定位。

 

2. * +选择器

* 使您可以选择特定选择器的所有元素。例如,如果你用过 * P. 然后将CSS样式添加到那个方面,它会将其与文档中的所有元素一起做到 <p> 标签。这使得在全球范围内易于定位网站的部分。

 

3.覆盖所有风格

这应该谨慎使用,因为如果你为一切做到这一点,你将在长远来看,你会发现自己陷入困境。但是,如果要为特定元素覆盖其他CSS样式,请使用 !重要的 在您的CSS风格之后。例如,如果我希望我网站的特定部分中的H2标题为红色而不是蓝色,我将使用以下CSS:

.section h2 { color:red !important; }

 

4.居中

居中很棘手,因为它取决于你正在尝试的中心。让我们来看看基于内容的项目的CSS。

文本

文本以使用的是为中心的 文字对齐:中心;。如果您希望它到任何一方,请使用左或右而不是中心。

内容

A div (或任何其他元素)可以通过向其添加块属性,然后使用自动边距来居中。 CSS看起来像这样:

#div1 {
    display: block;
    margin: auto;
    width: anything under 100% 
}

我把“100%以下”宽度的原因是因为如果它是100%宽,那么如果是全宽,则不需要居中。最好具有固定宽度,如60%或550px等。

 

5.垂直对齐(对于一行文本)

您将在CSS导航菜单中使用它,我几乎可以保证。关键是使菜单的高度和文本的线路高度相同。当我返回并编辑客户端的现有网站时,我会看到这种技术很多。这是一个例子:

.nav li{
    line-height:50px;
    height:50px;
}

 

6.悬停效果

这用于按钮,文本链接,您网站,图标等的BOCK部分。如果您希望有人在鼠标悬停在鼠标上时要改变颜色,请使用相同的CSS,但添加 :徘徊 对此并改变造型。这是一个例子:

.entry h2{
    font-size:36px;
    color:#000;
    font-weight:800;
}

.entry h2:hover{
    color:#f00;
}

当有人徘徊在它上面时,这是什么都改变了从黑色到红色的H2标签的颜色。常用的好处:悬停是你不必再次声明字体大小或重量,如果它没有改变。它只改变了您的指定。

过渡

对于悬停效果,如在网站中的菜单或图像上,您不希望颜色捕捉到最终结果。您理想地希望逐步缓解变化,这是转换属性发挥的地方。

.entry h2:hover{
    color:#f00;
    transition: all 0.3s ease;
}

这使得更改发生在.3秒内,而不是刚刚立即捕捉到红色。这使得悬停效果更加令人愉悦,更少的震动。

 

7.链接状态

这些样式被许多设计师遗漏,它真的会导致访问者的可用性问题。这 :关联 伪类控制尚未单击的所有链接。这 :访问 伪类处理您已经访问过的所有链接的样式。这告诉网站访问者他们已经在您的网站上,他们尚未探索。

a:link { color: blue; }
a:visited { color: purple; }

 

8.轻松调整图像的大小以适应

有时,您可以进入图像需要适应一定宽度的捏合,同时按比例缩放。一种简单的方法是使用最大宽度来处理此功能。这是一个例子:

img {
    max-width:100%;
    height:auto;
}

这意味着图像最大的是100%,并且基于图像宽度自动计算高度。在某些情况下,您可能还必须必须以100%指定宽度。

 

9.控制部分的元素

使用上面的图像示例,如果您只想定位某个部分的图像,如博客,请使用博客部分的类,并将其与实际选择器组合。这将使您将使您只选择博客部分的图像,而不是其他图像,例如您网站的任何其他部分中的图像,例如您的徽标或社交Meia图标,如侧栏。以下是CSS如何看:

.blog img{
    max-width:100%;
    height:auto;
}

 

10.直接儿童

我希望我在第一次开始使用CSS时知道这一点。这会让我如此多的时间!使用 > 选择元素的直接子女。例如:

#footer > a

这将选择和样式在页脚ID下立即的所有活动链路元素。它不会选择任何以前的活动元素,或页脚中包含的其他任何其他内容,如纯文本。这也适用于顶级导航元素。

具体的儿童元素

相信我,当你造型的列表时,这很方便。您只需要计算元素的数量是您想要的样式,然后应用那种样式。

li:nth-child(2) {
    font-weight:800;
    color: blue;
    text-style:underline;
}

上面的CSS针对列表中的第二项并使其粗体,下划线和蓝色。在括号中添加“n”,并且您可以针对每个第二列表项。想象一下,能够在桌式布局中使用其他线,以便于阅读。 CSS将是:

li:nth-child(2)

 

11.将CSS应用于多个类或选择者

假设您希望在所有图像,博客部分和侧栏周围添加相同的边框。您不必写出3次相同的CSS。只需列出这些项目,用逗号分隔。这是一个例子:

.blog, img, .sidebar {
    border: 1px solid #000;
}

您是否一直是网络设计师多年,或者您刚刚开始,学习如何建立网站,正确的方式似乎是一个岩石,永无止境的旅程。一旦您缩小了您想要学习的语言,您必须学习和改进您的技能。

无论你所学到什么,CSS都是必不可少的,但你必须掌握的艰巨技能。然而,它不一定是如此困难,特别是如果您知道一些方便和较少的CSS技术以完成工作。

 

12.盒式尺寸:边界盒;

这是许多网络设计师中的最爱,因为它解决了填充和布局问题的问题。基本上,当您将一个框设置为特定宽度时,并将填充添加到它,填充会增加到框的大小。但是,有了 盒子尺寸:边框盒;,这是否定的,盒子保持其尺寸。

 盒子尺寸

 

13.:之前

此CSS是一个选择器,允许您选择CSS元素并在具有应用于它的特定类的每个元素之前插入内容。假设您在每个H2标签之前有一个网站,在那里您想要特定文本。你会我们这个设置:

h2:before { 
    content: "Read: ";
<span class=" 苹果 -converted-space">    color: #F00;</span>
}

这是非常方便的,特别是如果您使用的是图标字体。您可以在某些元素之前放置图标,并在全球范围内应用。

 前

 

14.:之后

如:在选择器之前,可以使用:在特定元素上全局插入内容之后。在博客上的每一个摘录后,实际使用将增加“阅读更多”。这就是你的方式。

p:after{ 
    content: " -Read more… ";
    color:#f00;
}
 后

 

15.内容

内容 是一个CSS属性,当您需要插入要能够控制的元素时派上派上友好。我所看到的最常见用途是从特定位置的图标字体插入图标。在上面的示例中,您可以看到您必须将要插入引号的文本包装。

 

16. CSS重置

不同的浏览器具有默认的CSS设置,因此必须重置这些设置,因此您有一个偶数,一致的播放字段。将其视为建造房屋,以及你是否在山的一侧,在沙滩上,或在树林区域的中间,你希望那个基础是水平。

此CSS重置方法为所有网站设置标准基础,在其CSS起点中提供了一致性。它删除了不需要的边界,预设边缘,填充,线路高度,列表上的样式等。Eric Meyer创建了 一个效果很好.

 

17.下拉帽

每个人都喜欢下拉帽。它提醒我们传统的印刷书,是启动内容页面的好方法。那1 英石 ,大写字母真的抓住了你的注意力。在CSS中创建丢弃帽有一种简单的方法,它是使用伪元素::第一个字母。这是一个例子:

p:first-letter{
    display:block;
    float:left;
    margin:3px;
    color:#f00;
    font-size:300%;
}

这是什么都将字母设置为3x的其他字母的大小。它在字母周围设置3px的空间,以防止重叠,并将字母的颜色设置为红色。

 Dropcap.

 

18.强制文本是全部概要,所有小写或资本化

在所有帽子中键入整个部分将是荒谬的。想象一下,当网站的格式更改时,必须返回并修复,或者它被更新。相反,使用以下CSS样式强制文本到某种格式。此CSS针对H2标题标记。

  • h2 {text-transform:大写; } – all caps
  • h2 {text-transform:小写; } – all lowercase
  • H2 {文本变换:大写; } – capitalizes the 1 英石 letter of each word.
 案子

 

19.垂直屏高度

有时,无论屏幕尺寸是什么,您都希望一个部分填充整个屏幕。您可以使用VH或查看高度来控制此。该数字是百分比,因此如果您希望它填充100%的浏览器,则会将其设置为100.您可以将其设置为85%,以适应固定的导航菜单。

为容器创建类,并应用您想要的VH的数量。您可能需要调整的一件事是特定屏幕的媒体查询值或纵向模式的电话等方向。想象一下,伸展景观形象以适应纵向模式。那只是看起来不错。

.fullheight { height: 85vh; }

 

20.风格的电话链接

如果您在用户在手机上调用了电话号码时,您可以使用传统的活动链接选择器故障调用电话号码。相反,使用以下CSS:

a[href^=tel] {
<span class=" 苹果 -converted-space">    color: #FFF;</span>
<span class=" 苹果 -converted-space">    text-decoration: none;</span>
}