Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the practical CSS skills". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the practical CSS skills"?

1. Black and white image

This code will make your color photos appear as black and white photos, isn't it cool?

Img.desaturate {filter: grayscale;-webkit-filter: grayscale;-moz-filter: grayscale;-ms-filter: grayscale;-o-filter: grayscale;}

two。 Use: not () to apply / unapply borders on menus

Add a border to each menu item first

/ * add border * / .nav li {border-right: 1px solid # 666;}

…… And then remove the last element.

/ / remove border /. Nav li:last-child {border-right: none;}

…… You can directly use the: not () pseudo class to apply the element:

.nav li:not (: last-child) {border-right: 1px solid # 666;}

This makes the code clean, easy to read, and easy to understand.

Of course, if your new element has a sibling element, you can also use the general sibling selector (~):

.. nav li:first-child ~ li {border-left: 1px solid # 666;}

3. Shadow at the top of the page

Here is a simple CSS3 snippet to add a nice top shadow to a web page:

Body:before {content: "; position: fixed; top:-10px; left: 0; width: 100%; height: 10px;-webkit-box-shadow: 0px 0px 10px rgba (0box-shadow: 0px 0px 10px rgba; box-shadow: 0px 0px 10px rgba); z-index: 100;}

4. Add line heights to body

You don't need to add line-height to each pMagee h tag separately, etc. Simply add to body:

Body {line-height: 1;}

This makes it easy for text elements to inherit from body.

5. Everything is vertically centered.

It's too easy to center all elements vertically:

Html, body {height: 100%; margin: 0;} body {- webkit-align-items: center;-ms-flex-align: center; align-items: center; display:-webkit-flex; display: flex;}

Look, isn't it easy.

Note: beware of flexbox in IE11.

6. Comma separated list

Make the HTML list items look like a real, comma-separated list:

Ul > li:not (: last-child): after {content: ",";}

Use the: not () pseudo class for the last list item.

7. Select a project using a negative nth-child

Use negative nth-child in CSS to select items 1 to n.

Li {display: none;} / * select items 1 through 3 and display them * / li:nth-child (- nasty 3) {display: block;}

8. Use SVG with icons

There is no reason why we should not use SVG for icons:

.logo {background: url ("logo.svg");}

SVG is scalable for all resolution types and supports all browsers to return to IE9. This avoids .png, .jpg, or .gif files.

9. Optimize display of text

Sometimes fonts don't work best on all devices, so you can ask the device browser to help you:

Html {- moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}

Note: please use optimizeLegibility responsibly. In addition, IE / Edge does not have text-rendering support.

10. Use max-height for pure CSS sliders

Use max-height and overflow hiding to implement the CSS-only slider:

.slider ul {max-height: 0; overlow: hidden;}. Slider:hover ul {max-height: 1000px; transition: .3s ease;}

11. Inherit box-sizing

Let box-sizing inherit html:

Html {box-sizing: border-box;} *, *: before, *: after {box-sizing: inherit;}

This makes it easier to change the box-sizing in other components of plug-ins or other behaviors of leverage.

twelve。 Table cells are equal in width

Tables are troublesome to work with, so be sure to use table-layout: fixed as much as possible to keep cells equal in width:

.calendar {table-layout: fixed;}

13. Use Flexbox to get rid of all kinds of hack with outer margin

When you need to use column delimiters, you can get rid of the hack of nth-,first-, and last-child through the space-between property of flexbox:

.list {display: flex; justify-content: space-between;} .list .person {flex-basis: 23%;}

The list delimiter now appears at evenly spaced locations.

14. Use the property selector for empty links

Displays a link when the an element has no text value, but the href attribute has a link:

A [href ^ = "http"]: empty::before {content: attr (href);}

It's quite convenient.

15. Detect mouse double click

HTML:

Double click me

CSS:

.test3 span {position: relative;} .test3 span a {position: relative; z-index: 2;} .test3 span a:hover, .test3 span a:active {z-index: 4;} .test3 span input {background: transparent; border: 0; cursor: pointer; position: absolute; top:-1px; left: 0; width: 101%; / * Hacky * / height: 301%; / * Hacky * / z-index: 3;} .test3 span input:focus {background: transparent; border: 0; z-index: 1;}

16. CSS writes out triangles

/ * create an arrow that points up * / div.arrow-up {width:0px; height:0px; border-left:5px solid transparent; / * left arrow slant * / border-right:5px solid transparent; / * right arrow slant * / border-bottom:5px solid # 2f2f2f; / * bottom, add background color here * / font-size:0px; line-height:0px;} / * create an arrow that points down * / div.arrow-down {width:0px; height:0px; border-left:5px solid transparent; border-right:5px solid transparent Border-top:5px solid # 2f2f2f; font-size:0px; line-height:0px;} / * create an arrow that points left * / div.arrow-left {width:0px; height:0px; border-bottom:5px solid transparent; / * left arrow slant * / border-top:5px solid transparent; / * right arrow slant * / border-right:5px solid # 2f2f2f; / * bottom, add background color here * / font-size:0px; line-height:0px;} / * create an arrow that points right * / div.arrow-right {width:0px Height:0px; border-bottom:5px solid transparent; / * left arrow slant * / border-top:5px solid transparent; / * right arrow slant * / border-left:5px solid # 2f2f2f; / * bottom, add background color here * / font-size:0px; line-height:0px;}

17. Use of CSS3 calc ()

The use of calc () is similar to a function, which sets dynamic values for elements:

/ * basic calc * / .simpleBlock {width: calc;} / * calc in calc * / .complexBlock {width: calc / 3); padding: 5px calc (3-2px); margin-left: calc (10% + 10px);}

18. Text gradient

Text gradients are very popular, and you can easily achieve them with CSS3:

H3 [data-text] {position: relative;} h3 [data-text]:: after {content: attr (data-text); z-index: 10; color: # e3e3e3; position: absolute; top: 0; left: 0;-webkit-mask-image:-webkit-gradient (linear, left top, left bottom, from (rgba), color-stop (50%, rgba), to (rgba)

19. Disable mouse events

CSS3's new pointer-events allows you to disable mouse events for elements, for example, a connection cannot be clicked if it is set to the following style.

.disabled {pointer-events: none;}

20. Fuzzy text

Simple but beautiful text blur effect, simple and good-looking!

.blur {color: transparent; text-shadow: 0 0 5px rgba

21. A simple way to resize a picture

.content img {

Height:auto

Width:500px

}

22.IE HTML Hack

Div#content {width: 580px}

* html body div#content {width: 600px}

23.CSS Shadow

.shadow {

-moz-box-shadow: 3px 3px 5px 6px # ccc

-webkit-box-shadow: 3px 3px 5px 6px # ccc

Box-shadow: 3px 3px 5px 6px # ccc

}

24.CSS first word magnification

P:first-letter {

Display: block

Float: left

Margin: 5px 5px 0 0

Color: red

Font-size: 1.4em

Background: # ddd

Font-family: Helvetica

}

25. Flip an image with CSS

# content img {

-moz-transform: scaleX (- 1)

-o-transform: scaleX (- 1)

-webkit-transform: scaleX (- 1)

Transform: scaleX (- 1)

Filter: FlipH

-ms-filter: "FlipH"

}

twenty-six。 Remove the dotted box linked by the dot

A {outline: none}

Or

A {outline: 0}

twenty-seven。 Use special fonts in CSS

You can use CSS to load special fonts, all you have to do is upload the font in TTF format to the server, and then import it on CSS using font rules.

twenty-eight。 Element transparency

.element {

Filter:alpha (opacity=50)

-moz-opacity:0.5

-khtml-opacity: 0.5

Opacity: 0.5

}

twenty-nine。 Use CSS to display the URL after the link

A:after {content: "(" attr (href) ");}

This displays the URL after the link anchor. You can also define it in fonts or other styles.

thirty。 Customize special styles for handheld devices

thirty-one。 The level of the text is in the middle.

Text-align:center

Setting order of 32.link statu

A:link

A:visited

A:hover

A:active

thirty-three。 Use a picture as a list logo

Ul {list-style: none}

Ul li {

Background-image: url ("path-to-your-image")

Background-repeat: none

Background-position: 0 0.5em

}

thirty-four。 Automatic line wrapping is prohibited

H2 {white-space:nowrap;}

thirty-five。 Form elements that gain focus

Input:focus {border: 2px solid green;}

36.user-select forbids users to select Chinese text

Div {

User-select: none; / * Standard syntax * /

}

thirty-seven。 A highlight that appears after clearing the element after the mobile phone tap event

* {

-webkit-tap-highlight-color: rgba (0pc0pl 0p0pl 0)

}

thirty-eight。 Enhance the user experience and use pseudo elements to increase the click hotspot

.btn:: befoer {

Content: ""

Position:absolute

Top:-10px

Right:-10px

Bottom:-10px

Left:-10px

}

thirty-nine。 Pseudo elements break lines instead of newline tags

Inline-element:: after {

Content: "A"

White-space: pre

}

40.will-change improves rendering performance such as page scrolling and animation

/ * key value * /

Will-change: auto

Will-change: scroll-position

Will-change: contents

Will-change: transform; / * example * /

Will-change: opacity; / * example * /

Will-change: left, top; / * two examples * /

You should also be careful when using will-change, following the principle of minimizing impact, and don't write it directly in the default state, because will-change will hang all the time:

. will-change {

Will-change: transform

Transition: transform 0.3s

}

. will-change:hover {

Transform: scale (1.5)

}

You can have the parent element hover declare will-change, so that it will automatically remove when it is moved out, and the scope of the trigger is basically the range of valid elements.

.will-change-parent:hover. Will-change {

Will-change: transform

}

. will-change {

Transition: transform 0.3s

}

. will-change:hover {

Transform: scale (1.5)

}

41.box-sizing makes the width and height of the element include border and padding

{

Box-sizing: border-box

}

42.calc () function, calculating attribute values

Div {

Width: calc (100%-100px)

}

An example is to make the width 100% minus the value of 100px.

43.css implements no line wrapping, automatic line wrapping, and forced line wrapping

/ / No line wrapping

White-space:nowrap

/ / automatic line wrapping

Word-wrap: break-word

Word-break: normal

/ / forced line feeds

Word-break:break-all

44.perspective perspective

The existence of this attribute determines whether the element you see is 2d or 3D. It is generally set on the parent class of the package element.

. div-box {

Perspective: 400px

}

forty-five。 Two ways to set image transparency

Opcity:0.6

Background:rgba (0pr 0re0pl .6)

46.position Positioning Properties

The position attribute specifies the type of positioning method for an element (static, relative, absolute, or fixed).

Attribute values of position:

Absolute: elements that generate absolute positioning

Fixed: generates absolutely positioned elements, relative to the browser window

Relative: generates a relative positioning element that is positioned relative to its normal position.

Z-index: specifies the stacking order of an element.

47.cursor attribute

The cursor attribute defines the shape of the cursor used when the mouse pointer is placed within the boundary of an element.

The cursorvalue provided by CSS:

Pointer: little finger

Help: arrow with question mark

Wait: turn in circles

Move: moving cursor

Crosshair: crosshairs.

Through the pointer attribute, we can forge hyperlinks:

Pointer

forty-eight。 Hide movies that are not muted and play automatically

Video [autoplay]: not ([muted]) {

Display: none

}

49.Font-Size benchmark

/ * assume that the default size of the browser is 16px, first set it to 10px (font-size:10/16) * /

Body {font-size:10/16;}

/ * then you can use em as the uniform font unit 2.4em = 24px * /

H2 {font-size: 2.4 em}

fifty。 Transparent container

.element {

Filter:alpha (opacity=50); / * for ie * /

-moz-opacity:0.5; / * for ff * /

-khtml-opacity: 0.5; / * for webkit as chrome * /

Opacity: 0.5; / * for opera * /

}

Thank you for your reading, these are the contents of "what are the practical CSS skills?" after the study of this article, I believe you have a deeper understanding of what practical CSS skills have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.