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

The main content of this article is to explain "what are the rapid improvement skills of CSS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the CSS rapid promotion skills"!

1. Use CSS reset (reset)

Css reset libraries such as normalize.css have been in use for many years, and they can provide a clearer standard for your site style to ensure consistency across browsers.

Most projects do not need all the rules contained in these libraries. You can apply all the elements in the layout through a simple rule, delete all margin and padding, and change the browser's default box model.

* {box-sizing:border-box; margin:0; padding:0}

Using box-sizing declaration is optional, and you can skip it if you use the inherited box model form below.

2. Inheritance box model

Let the box model inherit from html:

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

3. Use flexbox layout to avoid margin problems (Get Rid of Margin hacks width Flexbox)

When how many times you try to design a grid layout such as a combination or a photo gallery, if you use a float, you need to clear the float and reset the outer margin to break it down into the required number of lines. To avoid nth-, first-, and last-child problems, you can use the value of the space-between property of flexbox.

. flex-container {display:flex; justify-content:space-between;}. Flex-container .item {flex-basis:23%;}

4. Use: not () to solve the problem of lists border

In web design, we usually use the: last-child nth-child selector to override the style that was originally declared on the parent selector. For example, a navigation menu creates a separator for each link Link by using borders, and then adds a rule to remove the border of the last link

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

This is a confusing way that not only forces the browser to render in one way, but then undoes it through a specific selector. This overlay style is inevitable. Most importantly, however, we can use only one style on the elements you want to declare by using: not pseudo-class:

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

The above is, except for the last li, all .nav li are added border style, isn't it very simple!

Of course, you can also use .nav li+li or .nav li:first-child ~ li, but not is more semantic and easier to understand.

5. Add line-height style to body

One of the things that leads to low style efficiency (inefficient stylesheets) is constant repetition of declarations. It is best to make project planning and composition rules, so that the CSS will be more smooth. To achieve this, we need to understand cascading (cascade) and how styles written in universal selectors can be inherited elsewhere.

Line spacing (line-height) can be used as a property to set for your entire project, not only to reduce the amount of code, but also to give the style of your website a standard appearance.

Body {line-height: 1.5;}

Please note that the declaration here has no units, we just tell the browser to let it render the line height is 1.5 times the render font size.

6. Center any element vertically (vertical-center anything)

When you are not ready to use CSSGrid layouts, setting global rules for vertically centered layouts is a good way to lay a foundation for elegantly content layouts.

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

7. Use SVG icons

SVG is used in all distinguished classes and is supported by all browsers. So files such as .png. Jpg. Gif can be discarded. Icon fonts for SVG are also available in FontAwsome5. Set the format of SVG just like other image types:

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

Warm reminder: if you use SVG on interactive elements such as button,SVG, it will cause problems that cannot be loaded. You can use the following rule to ensure that SVG is accessible (make sure the appropriate aria property is set in HTML)

.no-svg. Icon-only:after {content: attr (aria-label);}

8. Use "OWL selector"

Using the universal selector (universal selector) * and the adjacent sibling selector (adjacent sibling selector) + provides a powerful CSS feature that sets uniform rules for all elements in the document stream that follow other elements.

* + * {margin-top: 1.5remt;}

This is a great technique to help you create more uniform types and spacing. In the column above, the elements that follow other elements, such as H4 after H3, or a paragraph after a paragraph, have at least the 1.5rems spacing between them (about 30px)

9. Consistent vertical structure (Consistent Vertical Rhythm)

Consistent vertical rhythm provides a visual aesthetics that makes the content more readable. If the owl selector is too generic, use the generic selector (*) within the element to create a consistent vertical rhythm for specific parts of the layout:

.intro > * {margin-bottom: 1.25remr;}

10. Use box-decoration-break for prettier newline text

Suppose you want to apply uniform spacing, margin, highlighting, or background color to long lines of text that wrap to multiple lines, but you don't want the entire paragraph or title to look like a chunk. The Box Decoration Break property allows you to apply styles only to text while maintaining the integrity of padding and margins.

This feature is especially useful if you want to apply highlighting when hovering, or if you want to style subtext in the slider to have a highlighted appearance:

.p {display: inline-block; box-decoration-break: clone;-o-box-decoration-break: clone;-webkit-box-decoration-break: clone;}

Inline block declarations allow colors, backgrounds, margins, and padding to be applied to each line of text, rather than to the entire element, and the clone declaration ensures that these styles are applied evenly to each line.

11. Equal width table cell

Tables can be difficult to work with, so try using table-layout:fixed to keep cells equal in width:

.calendar {table-layout: fixed;}

12. Force an empty link to be displayed using the property selector

This is especially useful for links inserted through CMS, where CMS usually does not have class attributes and helps you style them without affecting cascading. For example, the element has no text value, but the href attribute has a link:

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

13. Style "default" link

When it comes to link styles, you can find a common A style in almost every style sheet. This forces you to write additional overrides and styling rules for any links in child elements, and when using a CMS like WordPress, your main link style may be more prone to problems than button text colors.

Try this less intrusive way to style the "default" link:

A [href]: not ([class]) {color: # 999; text-decoration: none; transition: all ease-in-out .3s;}

14. Ratio box

To create a box with an inherent ratio, all you need to do is apply the top or bottom fill to the div:

.container {height: 0; padding-bottom: 20%; position: relative;} .container div {border: 2px dashed # ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}

Fill with 20% so that the height of the box is equal to 20% of its width. The sub-div maintains its aspect ratio (100% / 20% = 5:1) regardless of the width of the viewport.

15. Images with broken style

This technique is not about code reduction, but about refining design details. Broken images can occur for many reasons, either unsightly or chaotic (just an empty element). Use this little CSS to create a more beautiful effect:

Img {display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 300; height: auto; line-height: 2; position: relative; text-align: center; width: 100%;} img:before {content: "We're sorry, the image below is missing: ("; display: block; margin-bottom: 10px } img:after {content: "(url:" attr (src) ")"; display: block; font-size: 12px;}

16. Use rem for global resizing and em for local resizing

After setting the basic font size of the root directory, such as html font size: 15pxposition, you can set the font size of the containing element to rem:

Article {font-size: 1.25remt;} aside {font-size: .9rem;}

Then set the font size of the text element to em

H3 {font-size: 2em;} p {font-size: 1em;}

Now, each contained element has become partitioned, easier to stylize, easier to maintain, and flexible.

17. Hide the unmuted autoplay video

This is a good technique for customizing user style sheets when you are dealing with content that cannot be easily controlled from the source code. This tip will help you avoid automatically playing the sound in the video to interfere with visitors when the page is loaded, and once again provide a wonderful: not () pseudo selector:

Video [autoplay]: not ([muted]) {display: none;}

18. Flexible use of root types

Responding to the font size in the layout should be able to automatically adjust to the viewport, saving the work of writing media queries to handle font size. You can use: not and viewport units to calculate the font size based on the height and width of the viewport:

: root {font-size: calc (1vw + 1vh + .5vmin);}

Now you can use the root em unit, which is based on: not:

Body {font: 1rem/1.6 sans-serif;}

Combine the above rem/em techniques for better control.

19. Set the font size on the form elements for a better mobile experience

To prevent mobile browsers (iOS Safari, etc.) from zooming in on HTML form elements when clicking on the drop-down list, add font-size styles:

Input [type= "text"], input [type= "number"], select, textarea {font-size: 16px;}

20. CSS variable

Finally, the most powerful CSS level comes from the CSS variable, which allows you to declare a set of common property values that can be reused by keywords anywhere in the stylesheet. You may have a set of colors to use throughout the project to maintain consistency.

Repeating these color values in CSS is not only annoying, but also error-prone. If a color needs to be changed at some point, you have to find and replace it, which is unreliable or unfast, and variables make customization much easier when building a product for the end user. For example:

: root {--main-color: # 06c;-- accent-color: # 999;} H2, h3, h4 {color: var (--main-color);} a [href]: not ([class]), p, footer span {color: var (--accent-color);} so far, I believe you have a deeper understanding of "what CSS rapid promotion skills", you might as well do it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.