In the past, I have spent a lot of time sorting out some of the previous basics, and I hope these contents can help you go a little more smoothly during the interview. So, I'm going to share with you these 100 CSS tips and tricks that I hope you'll find too useful to you.
Now, let's get down to today's content.
01. The website scrolls smoothly
<html>Add scroll-behavior: smooth to the element for smooth scrolling across the page.
html{
scroll-behavior: smooth;
} 02. Linked property selector
The target of this selector is links that have an href attribute that starts with "https".
a[href^="https"]{
color: blue;
} 03. - Merge siblings
Select <h2> the All sibling elements that follow <p> the element.
h2 ~ p{
color: blue;
} 04. :not() 伪类
The selector applies styles to list items that don't have a Special class.
li:not(.special){
font-stlye: italic;
} 05. Viewport units for responsive typography
Use viewport units (vw, vh, vmin, vmax) to make the font size respond to the viewport size.
h1{
font-size: 5vw;
} 06. :empty 表示空元素
This selector locates empty <p> elements and hides them.
p:empty{
display: none;
} 07. Custom Attributes (Variables)
Custom attributes can be defined and used to make it easier to set up themes and maintain them.
:root{
--main-color: #3498db;
}
h1{
color: var(--main-color);
} 08. Object-fit property of image control
object-fit controls how the content of a replacement element (such as <img>) is resized.
img{
width: 100px;
height: 100px;
object-fit: cover;
} 09. Simplify the grid of the layout
CSS grids provide a powerful way to create layouts in a simpler way.
.container{
display: grid;
grid-tempalte-columns: 1fr 2fr 1fr;
} 10. :focus-in 伪类
If the element contains any child elements with :focus, :focus-within selects the element.
form:focus-within{
box-shadow: 0 0 5px rgba(0, 0, 0, 0, 0.2);
} 11. Use Flexbox to center vertically
Use Flexbox to easily center content horizontally and vertically within containers.
.container {
display: flex;
align-items: center;
justify-content: center;
} 12. Customize the highlighted color of your choice
Customize the highlight color when selecting text on a web page.
::selection {
background-color: #ffcc00;
color: #333;
} 13. Placeholder text style
Sets the style of placeholder text in the input field.
::placeholder {
color: #999;
font-style: italic;
} 14. Gradient borders
使用background-clip属性创建渐变边框。
.element {
border: 2px solid transparent;
background-clip: padding-box;
background-image: linear-gradient(to right, red, blue);
} 15. VW variable font size
Adjust the font size based on the viewport width for more responsive typography.
body {
font-size: calc(16px + 1vw);
} 16. Conic gradient of colored elements
Use conic gradients to create colorful, dynamic backgrounds.
.element {
background: conic-gradient(#ff5733, #33ff57, #5733ff);
} 17. Clamp() function for responsive text
Use the clamp() function to set the range of font sizes to ensure readability on different screen sizes.
.text {
font-size: clamp(16px, 4vw, 24px);
} 18. Efficient font loading through font display swapping
Use font display: swap; Properties can improve the performance of web fonts by displaying fallback fonts when a custom font is loaded.
@font-face {
font-family: 'YourFont';
src: url("your-font.woff2") format('woff2');
font-display: swap;
} 19. Custom scrolling snap points
Implement custom scroll snap points for a smoother scrolling experience, especially useful for image galleries or sliders.
.scroll-container {
scroll-snap-type: y mandatory;
}
.scroll-item {
scroll-snap-align: start;
} 20. Variable font styles with font variation settings
利用可变字体和 font-variation-settings 属性对字体粗细、样式和其他变体进行微调控制。
.text {
font-family: 'YourVariableFont', sans-serif;
font-variation-settings: 'wght' 500, 'ital' 1;
} 21. Customize underlining
使用 border-bottom 和 text-decoration 的组合自定义链接上下划线的样式。
a {
text-decoration: none;
border-bottom: 1px solid #3498db;
} 22. Hidden secondary text
Use the class sr-only to visually hide elements but make them accessible to screen readers.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
} 23. Aspect ratio box
Use fill tricks to maintain the aspect ratio of elements such as images or videos.
.aspect-ratio-box {
position: relative;
width: 100%;
padding-bottom: 75%; /* Adjust as needed */
}
.aspect-ratio-box > iframe {
position: absolute;
width: 100%;
height: 100%;
} 24. Choose even and odd elements
使用 :nth-child 伪类设置替代元素的样式。
li:nth-child(even) {
background-color: #f2f2f2;
}
li:nth-child(odd) {
background-color: #e6e6e6;
} 25.CSS counters
Use the Counter Reset and Counter Increment properties to create an automatic number in the list.
ol {
counter-reset: item;
}
li {
counter-increment: item;
}
li::before {
content: counter(item) ". ";
} 26. Multiple background images
Apply multiple background images to elements with different attributes.
.bg {
background-image: url("image1.jpg"), url("image2.jpg");
background-position: top left, bottom right;
background-repeat: no-repeat, repeat-x;
} 27. Hyphens make text smoother
Improve text readability by allowing automatic hyphens using the hyphens attribute.
p {
hyphens: auto;
} 28. Dynamically styled CSS variables
Leverage CSS variables to create dynamic and reusable styles.
:root {
--main-color: #3498db;
}
.element {
color: var(--main-color);
} 29. Focus style for keyboard navigation
Improved focus styling for better keyboard navigation and accessibility.
:focus {
outline: 2px solid #27ae60;
} 30. Smooth gradient transitions
Apply a smooth transition to the gradient background for a beautiful effect.
.gradient-box {
background: linear-gradient(45deg, #3498db, #2ecc71);
transition: background 0.5s ease;
}
.gradient-box:hover {
background: linear-gradient(45deg, #e74c3c, #f39c12);
} 31. Text stroke effect
Add strokes (outlines) to text for a unique visual effect.
h1 {
color: #3498db;
-webkit-text-stroke: 2px #2c3e50;
} 32. Pure CSS hamburger menu
Create a simple hamburger menu without JavaScript.
.menu-toggle {
display: none;
}
.menu-toggle:checked + nav {
display: block;
}
/* Add styles for the hamburger icon and menu here */ 33. CSS :is() 选择器
Use the :is() pseudoclass to simplify complex selectors.
:is(h1, h2, h3) {
color: blue;
} Calculation of 34.CSS variables
Calculations are performed in dynamically styled CSS variables.
:root {
--base-size: 16px;
--header-size: calc(var(--base-size) * 2);
}
h1 {
font-size: var(--header-size);
} 35. The attr() function for content
Use the attr() function to retrieve and display attribute values.
div::before {
content: attr(data-custom-content);
} 36. CSS Shielding
Apply a mask to an image for a creative effect.
.masked-image {
mask: url(mask.svg);
mask-size: cover;
} 37. Blending Mode
Experiment with blending modes for fun color effects.
.blend-mode {
background: url(image.jpg);
mix-blend-mode: screen;
} 38. Aspect Ratio Attributes
Use the aspect ratio property to simplify the creation of aspect ratio boxes.
.aspect-ratio-box {
aspect-ratio: 16/9;
} 39. 用于文本换行的 shape-outside
Use the shape-outside property to wrap text around a specified shape, allowing for a more dynamic layout.
.shape-wrap {
float: left;
width: 150px;
height: 150px;
shape-outside: circle(50%);
} 40. CH units are used for consistent dimensions
The ch unit represents the width of the character "0" in the selected font. It's useful for creating consistent and responsive layouts.
h1 {
font-size: 2ch;
} 41. ::marker伪元素
Use the ::marker pseudo-element to style the markup of a list item.
li::marker {
color: blue;
} 42. 背景的 element() 函数
Use the element() function to dynamically reference an element as a background.
.background {
background: element(#targetElement);
} 43. Use Flexbox's sticky footer
Use Flexbox to create sticky footer layouts.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
} main {
flex: 1;
} 44.scroll-padding实现平滑滚动
Improve scrolling behavior by adjusting scroll fills.
html {
scroll-padding: 20px;
} 45. Interactive highlighting
Use CSS variables to create interactive highlights.
.highlight {
--highlight-color: #e74c3c;
background-image: linear-gradient(transparent 0%, var(--highlight-color) 0%);
background-size: 100% 200%;
transition: background-position 0.3s;
}
.highlight:hover {
background-position: 0 100%;
} 46. Customize radio buttons and checkboxes
Style radio buttons and checkboxes without images.
input[type="radio"] {
appearance: none;
-webkit-appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #3498db;
}
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 2px solid #e74c3c;
} 47. Adjust the property size of the text area
Use the resize property to control the resizing behavior of the text area.
textarea {
resize: vertical;
} 48. Text gradients
使用background-clip 和text-fill-color 属性为文本创建渐变效果。
.gradient-text {
background-image: linear-gradient(45deg, #3498db, #2ecc71);
background-clip: text;
color: transparent;
} 49. Hyphenation properties of long words
Use the word-break property to control the length of a word or string without spaces.
.long-words {
word-break: break-all;
} 50. 可变字体的 font-variation-settings
使用 font-variation-settings 属性微调可变字体样式。
.custom-font {
font-family: 'MyVariableFont';
font-variation-settings: 'wght' 600, 'ital' 1;
} 51. Blend blend modes for creative overlays
Use mix-blend-mode to apply blend modes to elements to create interesting visuals when overlaying elements.
.overlay {
mix-blend-mode: overlay;
} 52. Style broken images
Use the :broken pseudo-class to apply the style to the corrupted image.
img:broken {
filter: grayscale(100%);
} 53. CSS Shape
Use the shape-outside property to create interesting CSS shape designs.
.shape {
shape-outside: circle(50%);
} 54. Attribute selector for substring matching
Use attribute selectors and the *= operator for substring matching.
[data-attribute*="value"] {
/* Styles */
} 55. Background filter to blur background
Use the background filter to apply a blur effect to the background for a frosted glass effect.
.element {
backdrop-filter: blur(10px);
} 56.CSS environment variables
Use the env() function to access environment variables in CSS.
.element {
margin-top: env(safe-area-inset-top);
} 57.CSS property counters
Use the :nth-child selector to count the number of occurrences of a particular attribute value.
[data-category="example"]:nth-child(3) {
/* Styles for the third occurrence */
} 58. CSS shapes for text wrapping
Use shape-outside in conjunction with the Polygon() function to achieve precise text wrapping around irregular shapes.
.text-wrap {
shape-outside: polygon(0 0, 100% 0, 100% 100%);
} 59. Customize the cursor style
Use the cursor properties to change the cursor style.
.custom-cursor {
cursor: pointer;
} 60. HSLA for transparent colors
HSLA values for transparent colors provide more control over the alpha channel.
.transparent-bg {
background-color: hsla(120, 100%, 50%, 0.5);
} 61. Text orientation of vertical text
Use the text direction property to rotate the text vertically.
.vertical-text {
text-orientation: upright;
} 62. Font variants of small caps
Use the font-variant property to apply small caps to text.
.small-caps {
font-variant: small-caps;
} 63. 背景分割的 box-decoration-break
使用 box-decoration-break 控制跨多行的元素的背景。
.split-background {
box-decoration-break: clone;
} 64. :focus-visible 用于特定焦点样式
Styles are applied only when the element is in focus and the focus is not provided by a mouse click.
input:focus-visible {
outline: 2px solid blue;
} 65. Text rendering for best font rendering
Use text rendering properties to improve text rendering.
.optimized-text {
text-rendering: optimizeLegibility;
} 66. Capital letters
Use initial-letter to style the first letter of a block-level element.
p::first-letter {
font-size: 2em;
} 67. overscroll-behavior 滚动超调
Controls how the user behaves when scrolling beyond the boundaries of the rolling container.
.scroll-container {
overscroll-behavior: contain;
} 68. Writing mode with vertical layout
使用writing-mode 属性创建垂直布局。
.vertical-layout {
writing-mode: vertical-rl;
} 69. ::cue is used to style HTML5 headings
Use the ::cue pseudo-element to style the HTML5 header text.
::cue {
color: blue;
} 70. 用于截断多行文本的line-clamp
Use the line-clamp attribute to limit the number of rows displayed within an element.
.truncated-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
} 71. scroll-snap-align
The scroll-snap-align property controls the alignment of scroll snap points within the scroll container, ensuring precise control of scrolling behavior and enhancing the user experience.
.container {
scroll-snap-type: x mandatory;
} .item {
scroll-snap-align: center;
} 72. overscroll-behavior
overscroll-behavior enables you to define how the browser should handle overscrolling, preventing unwanted scrolling effects and improving the overall scrolling experience.
.scrollable {
overscroll-behavior: contain;
} 73. Font kerning
Font kerning allows you to fine-tune character spacing, ensuring optimal readability by adjusting the spacing between characters within a text element.
p {
font-kerning: auto;
} 74. Shape edges
When used in conjunction with CSS shapes, shape margins specify the margins around the shape of a floating element, allowing for precise control over text wrapping and layout.
.shape {
shape-margin: 20px;
} 75. Scroll margins
Scroll margins set the margin between the edge of the scroll container and the start of scrolling content, enhancing the user experience by providing a scroll buffer.
.container {
scroll-margin-top: 100px;
} 76. Tab size
Scroll margins set the margin between the edge of the scroll container and the start of scrolling content, enhancing the user experience by providing a scroll buffer.
pre {
tab-size: 4;
} 77. Text last alignment
text-align-last determines the alignment of the last line of text in a block element, providing precise control over the alignment of multi-line block Chinese text.
p {
text-align-last: justify;
} 78. Text Alignment
This property controls text alignment behavior, specifying whether text alignment should be performed using interword or intercharacter spacing.
p {
text-align: justify;
text-justify: inter-word;
} 79. Column padding
Column padding indicates how content is distributed across multiple column layouts, allowing content to be distributed across column order or balance.
.container {
column-count: 3;
column-fill: auto;
} 80. Contour Offset
Contour Offset adjusts the space between the contour and the edge of the element, allowing you to better control the appearance of the contour without affecting the layout.
button {
outline: 2px solid blue;
outline-offset: 4px;
} 81. Font variant numbers
This property allows fine-grained control over the rendering of digital typography, enabling features such as lining and old-style numeric, fractional, and ordinal number indicators.
p {
font-variant-numeric: lining-nums;
} 82. Font optical size
Enable or disable font optical sizing to adjust the spacing and proportions of characters to improve the visual harmony of various font sizes.
p {
font-optical-sizing: auto;
} 83. Thickness of text decoration
Control the thickness of text decorations, such as underline, upline, and threading, for precise customization.
p {
text-decoration-thickness: 2px;
} 84. Text underline offset
Adjust the position of the underline relative to the text baseline to improve typographic refinement.
p {
text-underline-offset: 3px;
} 85. Rolling filler blocks
Define the padding space to be added around the scrollable block container to ensure that the content remains visible and accessible during scrolling.
.container {
scroll-padding-block: 20px;
} 86. Inline scroll fill
Set up padding space added around scrollable inline containers to enhance the user experience during scrolling interactions.
.container {
scroll-padding-inline: 10px;
} 87. Zhao Xing
Specify how lines are wrapped within a word or character to control line wrap behavior to improve text layout and readability.
p {
line-break: strict;
} 88. Box decoration breaks
Controls the rendering of borders and fills across segmented elements to ensure consistent styling of elements that are split across multiple rows or columns.
.element {
box-decoration-break: clone;
} 89. Initials
Design the first letter or initial character of a block element as a decorative initial drop or other visually prominent initial character.
p::first-letter {
font-size: 2em;
float: left;
} 90. Image Rendering
Adjust the rendering quality and performance of your images to optimize the image display of various scenes.
img {
image-rendering: pixelated;
} 91. Font Function Settings
font-feature-settings 允许您启用或禁用字体中的 OpenType 功能，例如，连字、字距调整和样式替代。
p {
font-feature-settings: "liga" on;
} 92. Text-oriented
This property controls the orientation of the text in its containing box, enabling vertical or landscape text layout.
.vertical-text {
text-orientation: sideways;
} 93. Text Decoration - Skip the ink
text-decoration-skip-ink controls whether text decorations should skip rising and falling sections, improving the appearance of underlines and threads.
p {
text-decoration-skip-ink: auto;
} 94. Text underline position
text-underline-position adjusts the position of the underline relative to the text baseline, allowing you to precisely control the position of the underline.
p {
text-underline-position: under;
} 95. Image Orientation
image-orientation 控制图像的方向，允许您根据需要旋转或翻转它。
img {
image-orientation: from-image;
} 96. column-span
column-span allows one element to span multiple columns in a multi-column layout, allowing for a more flexible and dynamic design.
.spanning-element {
column-span: all;
} 97. contain
contains specifies the inclusion strategy of the element, which improves performance by limiting the scope of layout calculations and rendering.
.optimized-element {
contain: layout;
} 98. Content Visibility
Content visibility allows you to control the rendering behavior of off-screen or hidden content, improving rendering performance by skipping the layout and drawing phases of hidden elements.
.off-screen {
content-visibility: auto;
} 99. Text decoration style
text-decoration-style specifies the line style to use for text decoration, allowing you to select different line styles, such as solid, double, dotted, or dashed.
p {
text-decoration: underline;
text-decoration-style: wavy;
} 100. Word spacing
Word spacing adjusts the spacing between words in text elements, allowing you to fine-tune the layout and improve readability.
p {
word-spacing: 2px;
} summary
At this point, all the 100 CSS basics in this issue have been shared, if you think it's not bad, please remember to like me, follow me, and share today's content with your friends, maybe it can help him.
Finally, thank you for reading and happy programming!