怎么快速的写好css_7快速CSS增强功能可带来更好的用户体验

怎么快速的写好css

The beauty in CSS is that a tiny directive can make a huge difference in how the page displays. Here are seven quick CSS snippets that will give your website more "pop" and make your user's experience more functional and enjoyable.

CSS的优点在于，微小的指令可以极大地改变页面的显示方式。 这里有七个快速CSS片段，这些片段将使您的网站更具“流行性”，并使您的用户体验更加实用和有趣。

更改文字突出显示颜色 (Change Text Highlight Color)

::selection			{ background:#c3effd; color:#000; /* Safari and Opera */ }
::-moz-selection  { background:#c3effd; color:#000; /* Firefox */ }

The default text selection color is usually a boring navy color (at least on Windows PCs). Firefox, Opera, and Safari allow you to change the color to whatever you'd like!

默认的文本选择颜色通常是无聊的海军颜色(至少在Windows PC上)。 Firefox，Opera和Safari允许您将颜色更改为所需的颜色！

防止Firefox滚动条跳转 (Prevent Firefox Scrollbar Jump)

html { overflow-y:scroll; }

Firefox has an unfortunate habit of showing the right scrollbar when a page is long and hiding it when the page doesn't reach below the fold, thus creating an undesireable "jump." The above snippet prevents that.

Firefox有一个不幸的习惯，当页面较长时显示正确的滚动条，而当页面未达到折叠以下时则隐藏它，从而造成不希望的“跳转”。 上面的代码片段可以防止这种情况。

圆角元素 (Rounded-Corner Elements)

input		{ -moz-border-radius:10px; -webkit-border-radius:10px; }

Adding a subtle rounded corner to input elements (like WordPress does) can add a classy touch to otherwise boring elements.

在输入元素上添加一个微妙的圆角(就像WordPress一样)可以为原本无聊的元素添加优雅的触感。

打印分页符 (Print Page Breaks)

.page-break		{ page-break-before:always; }

Don't forget that many users print off your informational pages! The above CSS snippet allows you to set page breaks within each page.

不要忘记，许多用户会打印您的信息页！ 上面CSS代码段可让您在每个页面内设置分页符。

特定于属性的图标 (Attribute-Specific Icons)

a[href$='.pdf'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/pdf.gif) no-repeat center right; }

Spice up your links by adding attribute-specific icons to your links. Add PDF icons next to your .PDF links, Excel icons next to your .XLS links, and so on. This is a great way to warn the user that you are linking to a document other than another page.

通过在链接中添加特定于属性的图标来丰富链接。 在.PDF链接旁边添加PDF图标，在.XLS链接旁边添加Excel图标，依此类推。 这是向用户发出警告的好方法，即您正在链接到除其他页面之外的文档。

CSS指针游标 (CSS Pointer Cursors)

input[type=submit],label,select,.pointer	{ cursor:pointer; }

New rule for you to live by: if the user is meant to click on any element, it should have the "pointer" cursor when the user mouses over it. Links, buttons, SELECT elements, etc.

您赖以生存的新规则：如果用户要单击任何元素，则当用户将鼠标悬停在元素上时，它应具有“指针”光标。 链接，按钮，SELECT元素等。

display：block链接 (display:block Links)

#navigation li a	{ display:block; }

When you've built a navigation menu with UL/LI/A elements, be sure to set each anchor 's display property to "block" so that the user doesn't necessarily need to hover over the anchor's text for the link to work.

使用UL / LI / A元素构建导航菜单后，请确保将每个锚点的显示属性设置为“阻止”，以便用户不一定需要将锚点悬停在文本上才能使链接起作用。

So what are you waiting for? Get to it!

那你还在等什么？ 来吧！

翻译自: https://davidwalsh.name/css-enhancements-user-experience

怎么快速的写好css