For a beginner front-end designer, when designing and modifying the front-end of the website, we need to write some CSS and JS content to achieve the interface effect. Today I will share 10 CSS tips that are important for front-end designers, which I have summed up in the process of making websites for many clients.
1. Absolute positioning
In the vast majority of the process, if you want to determine the fixed position of an element in the website, absolute positioning is the solution to achieve this. In web pages, absolute positioning can precisely control the position of elements in the web page, we can use top, bottom, left and right, with a pixel value to control the position of the element.
position:absolute;top:50px;right:50px
The CSS above sets the position of an element to remain 50px from the top and right of the browser. You can also use absolute positioning inside a div.
2. Override all styles
Everything you need to know when writing CSS is when you want to add a new CSS style to an element that has already been defined before. At this point we can use it ! important to define.
For example, if I wanted the H3 headings in a specific section of my site to be red instead of yellow, I could use the following CSS:
.section h3 {color:red !important; }
3. Centered
There are many cases of centering, which are generally divided into text centering and DIV content centering.
Text
centering Use text-align: center; to center text. If you want the text to be on the left and right, you can use left or right.
DIV content
DIV content centering is not the same as text centering. CSS can be defined like this:
#div1 { display: block; margin: auto; width: anything under 100% }
The reason for setting the width to "below 100%" is because if it's 100% width, then if it's full width, it doesn't need to be centered. It's better to have a fixed width like 60% or 550px etc.
4. Vertical alignment (for one line of text)
To make the height of the menu match the line height of the text, you can set it like this:
.nav li{line-height:50px; height:50px;}
5. Hover effect
This works for buttons, text links, parts of a website, icons, and more. If you want to make a hover effect, you can try:
.entry h2{font-size:36px; color:#000; font-weight:800;} .entry h2:hover{color:#ffeb3b;}
This function can change the color of your h2 tags from black to yellow.
6. Hover effect transition
For hover effects, such as using menus or images on a website, we definitely don't want the color to get close to the result quickly, so we can achieve a transition effect by using a time change.
.entry h2:hover{color:#ffeb3b; transition: all 0.5s ease;}
This allows for a change in style, which can be a transition time of 0.5 seconds from black to yellow, rather than immediate yellow. This makes the hover effect more harmonious without being too obtrusive.
7. Status of a label
When we encounter the a tag, we must define the style of the a tag, otherwise it is very easy to cause confusion for users in use. Through the style, the user can know whether the link has been clicked, which is more conducive to the user experience.
a:link {color: blue; } a:visited {color: red; }
8. Easily resize images to fit
Speaking of this style, I didn't know that the adaptive effect of the picture could be achieved in the following ways. As a novice, I believe that many people want to do this effect. Of course, the method I provide is only one of them:
img {max-width:100%;height:auto;}
This style means that the largest image possible is 100%, and the height is automatically calculated based on the image width. In some cases you may also have to specify a width of 100%.
9, father element Kazuko element
If you don't want to select arbitrary descendant elements, but want to narrow down and select only the children of an element, use the child selector :
h1 > strong {color:red;}
In special cases you may want to define the style of the Nth child element, so you can use the following style:
li:nth-child(n)
The specific use method can go to w3school to see.
10. Apply CSS to multiple classes or selectors
If you want to add the same border on all images, blog section and sidebar. You don't have to write the same CSS style 3 times. Just list these items, separated by commas:
.blog,img,.sidebar {border: 1px solid #000;}
Today I will share so much with you. These 10 CSS skills I think are more important. I often appear in the process of making websites for clients. When it comes to building a website, I recommend an easy-to-use system: Cicada .
Well, I hope that novice front-end designers can also gain something after reading this article. If you are interested, you are also welcome to pay attention to Xiaoqiao's personal blog: Xiaoqiao Design .
