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

This article mainly introduces the relevant knowledge of "what are the practical skills of CSS beginners". The editor shows you the operation process through actual cases, the operation method is simple and fast, and it is practical. I hope this article "what are the practical skills of CSS beginners" can help you solve the problem.

1. How to fix horizontal scrolling on a web page in CSS

If you are styling a web page and see a horizontal scroll bar at the bottom, you need to find elements that are wider than the available screen widths.

For example, in the screenshot below, you can see that there is a horizontal scroll:

You can use the universal selector (*) to find the culprit element by applying the following rules:

* {border: 2px solid red;} copy the code

This applies a 2-pixel red border to each element on the page, so you can easily find out which elements need to be adjusted.

After applying the above style, the results are as follows:

You can see that the second green wave is causing the horizontal roll. This is because the width is set to 1400 pixels, which is wider than the available screen width of 1200 pixels.

.copy 2 {width: 1400px;} copy the code

Setting the width back to 1200 pixels or deleting it completely will solve the problem, so there is no more horizontal scrolling.

two。 How to override styles in CSS

In some specific cases, you may want to overwrite specific styles that already exist (for example, from libraries). Or, you may have a template with a large stylesheet, and you need to customize specific parts of it.

In these cases, you can apply CSS specificity's rules, and! important can also use exceptions before the rules.

In the following example,! important provides an emerald green variant of # 2ecc71 (my favorite color) for each H2 element:

H2 {color: # 2ecc71! important;} copy the code

But be careful-using this exception is considered a bad practice, and you should avoid it as much as possible.

Why? Well, important actually destroys the cascading nature of CSS, which makes debugging more difficult.

The best use case! important uses it to identify problems in the code base when dealing with a large number of template stylesheets or old code. Then you can quickly fix the problem and eliminate the exception.

In addition to using! important to apply styles, you can learn more about the specificities of CSS and apply these rules.

3. How to make a Square with CSS

If you want to make a square without having to mess up the width and height too much, you can set the div [or span as the case may be] style and equal numbers by setting the background color, desired width, and aspect ratio. The first number is the top and bottom dimensions, and the second is the left and right.

You can take it a step further by playing with these two numbers to make rectangles and any squares you want.

Copy the code .square {background: # 2ecc71; width: 25remr; aspect-ratio: 1max 1;} copy the code

4. How to use CSS to center div

As the stylesheet grows, it becomes very difficult to center the div. To style any div, set the block display, automatic margins, and width less than 100% for it.

Copy the code .center {background-color: # 2ecc71; display: block; margin: auto; width: 50%; height: 200px;} copy the code

5. How to remove extra padding from a box in CSS

Using box-sizing: border-box ensures that no additional padding is added to the box when you set the width and fill for the box. This will help your layout look better.

* {margin: 0; padding: 0; box-sizing: border-box;} copy code 6. How to use CSS to make a drop caption

You can use acronym pseudo elements to make the drop caps. Right! The first word you read in the newspaper sank.

Select the appropriate HTML element and apply the style, as follows:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officia nisi veniam laboriosam? In excepturi ea inventore eligendi iusto! Incidunt molestiae quas molestias, nesciunt voluptate aut vitae odio corrupti quisquam laudantium aperiam consequuntur voluptas eum? Velit, eligendi ad laboriosam beatae corporis perferendis tempore consequatur sint rem quam, quae, assumenda rerum.

Copy code p.texts::first-letter {font-size: 200%; color: # 2ecc71;} copy code

7. How to set text to uppercase or lowercase in CSS

Uppercase or lowercase letters do not have to come directly from your HTML. You can force any text to be uppercase or lowercase in CSS.

I hope there will be options for SentenceCase and tOGGLEcASE in the future. But why did you write a text toOGGLEcASE?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, minima.

LOREM IPSUM DOLOR SIT AMET

Copy the code .upper {text-transform: uppercase;} .lower {text-transform: lowercase;} copy the code

8. How to declare variables to maintain CSS DRY

Variables? Right. You can declare variables in CSS.

When you declare variables, you can use them in many other styles. If you have anything to change, you just need to change the variable, and the results will be reflected wherever they are used. This will help keep your CSS code dry (don't repeat yourself).

You can declare a variable by placing it in the root scope so that it is global in the stylesheet. To use your variable, you can place the property in curly braces next to the "var" keyword.

Variables are usually declared at the top of the stylesheet-that is, before they are reset.

: root {--text-color: hsl (145,63%, 49%);} p {color: var (--text-color);} copy code 9. How to use: before and: after selectors to add extra content to your CSS

The: before selector in CSS helps you insert content before the element:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, minima.

Copy code p.texts::before {content: "Some Lorem Texts:"; color: # 2ecc71; font-weight: bolder;} copy code

Select: the explorer does the same thing, but it inserts content after the element:

P.texts::after {content: "Those were Some Lorem Texts"; color: # 2ecc71; font-weight: bolder;} copy the code

10. How to use pure CSS to achieve smooth scrolling

You can apply smooth scrolling to a web page without writing complex JavaScript or using plug-ins. Therefore, if you have anchor tags that link to multiple parts of the page and click them, the scrolling is smooth.

Html {scroll-behavior: smooth;} copy code about "what are the practical tips for beginners in CSS"? thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.