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

Editor to share with you every Web developer should know what CSS skills, I believe most people do not know much, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

1. How to use CSS to center content

Putting content in the middle of the screen can be tricky. However, you can use position: absolute to override the dynamic location and always place the content in the center.

It also applies to all resolutions across devices. However, be sure to carefully check that everything is positioned according to your needs, and the elements look natural even on a smaller screen.

Sample snippet:

Section {position: absolute; left: 50%; top: 50%; transform: translate (- 50%,-50%); padding: 30px;} 2. How to fix the position of an element in CSS

Although the site is dynamic, you may want to fix some elements in some places. You can do this by using the position:absolute script.

However, please use this method carefully and test each screen size and resolution in advance so as not to damage the design of your website.

Using this method based on a specific location node in the web page file ensures that the element remains in the same location for all users.

Sample snippet:

/ * suppose you want to fix your sidebar's position and size * / .sidebar {position: absolute; top: 15px; right: 15px; width: 300px; height: 150px;} 3. How to make the picture page adaptive in CSS

There is nothing worse than your image going beyond the user screen. It can definitely destroy the design of your website and prevent users from continuing to use it.

However, with this simple technique, you can make sure that your image always fits the visitor's screen, no matter what device they use.

Sample snippet:

Img {max-width: 100%; height: auto;} 4. How to edit styles on a single page in CSS

If you have a CMS and want some of your posts to look different from others, you can use custom classes to override the CSS style of your site. This ensures that you adjust only one post page and leave the other pages at their default values.

When you create a post on a WordPress blog, it includes the id of the post in the body as a class, for example:

Then you can make changes like this to change the style of that post page:

.postid-330 {font-size: 24px; font-weight: 750; color: red;}

Other popular CMS allows you to add custom classes to a single post. For example, Ghost allows you to mark a post as a selected post and add a. Posts class.

However, if you find yourself using this approach often, it's best to modify the main CSS stylesheets to avoid writing unnecessary code.

This doesn't just apply to CMS-if you have a simple Web site that contains multiple HTML files, you can apply custom styles to elements of the entire project and adjust them through the same CSS file.

For example, if you have a page with class. Landing:

Landing Page Landing Page

My landing page.

Index .html

Another about page:

About Page About Page

My about page.

You can add it to the main style sheet to adjust only the styles on the page:

.about {font-size: 24px; font-weight: 750; color: red;}

Css/style.css

5. How to integrate styles in CSS

If you know that you want to add CSS styles to multiple projects, it takes time to write the code piece by piece. However, when you separate items with commas and write CSS styles to them, styles are added to all items.

This helps you save time and reduce the weight of your code because you don't have to write similar lines of code many times.

Sample snippet:

/ * suppose you want to add a solid border around your caption element, image, and paragraph element * / .caption, img, p {border: 2px solid # 0000000;} / * you can also limit the selection using selectors * / p.white-text, div > p.unique {color: white; font-size: 24px;} 6. Access link style in CSS

The default style of the access link clicked by the user may not apply to the style of your current site. You can use CSS code to adjust the appearance of visitors before and after clicking the link.

You can then match these to the overall style of your site to create a unique experience.

Sample snippet:

A:link {color: # ff0000; / * the unvisited link is red * /} a:visited {color: # ee82ee; / * the visited link turns violet * /} 7. Delay in hovering effect in CSS

This: the hover selector is a CSS pseudo-class that allows you to create a hover effect. However, you can further adjust your style by adding a transition element to delay the hover effect.

Although it looks neat, it also creates a sense of movement in the user's eyes, further drawing attention to the element.

Sample snippet:

.entry h3 {font-size: 48px; color: # 000000; font-weight: 750;} / * Next, add a delay to the hover effect * / .entry h3:hover {color: # f00; transition: all 0.5s ease;} 8. How to disable text wrapping and add ellipses in CSS

If your text space is tight, you may need to cut it short to accommodate other elements. Of course, you can adjust each text element manually, but it takes time and trial and error.

What you can do is combine overflow, white-space, and text-overflow to create a natural break in the text to make it easier to read.

The following example sets a limit on the width of the text, hides the overflow, disables text wrapping, and adds an ellipsis (.) To indicate that the user has more text.

Sample snippet:

.product-description {max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} 9. Stylized initials in CSS

The drop of acronym or acronym has been used in book and magazine design for a long time. It works by attracting the reader's attention and making them interested in reading the first line.

Although you may think this style is out of date, you can also design it as a modern-looking page, and you can still use it to have a psychological impact on your visitors. In addition, the drop caps option is written into the CSS language, so you can use it effortlessly and refresh your paragraphs.

Sample snippet:

P:first-letter {display: block; float: left; margin: 5px; color: # 0000000; font-size: 60px;} 10. How to reset CSS Styles

Last but not least, you may need to override all the default style properties of different browsers to make your design work perfectly.

Each browser has its own stylesheet with built-in default styles, which can sometimes be a problem when you try to make your site look consistent across all browsers.

You can use a comprehensive CSS reset, which covers almost all elements. You can also achieve minimal reset results, such as the following method:

* {vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0; outline: 0; padding: 0; margin: 0;} these are all the contents of the article "what CSS skills every Web developer should know". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.