2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Introduction to CSS
CSS isCascading Style Sheets(Cascading Style Sheets), which is used to precisely control the style of HTML pages in order to better display graphic information or produce a cool/friendly interactive experience.
没有必要让所有浏览器都显示得一模一样的，好的浏览器有更好的显示，糟糕的浏览器就只有普通的显示，这才是对用户更负责任的做法。
The suffix of CSS files is .css
/* 注释的内容 */
Three ways to add styles
<span style="color: red">红色文字</span>
https://blog.csdn.net/weixin_41192489/article/details/140226382
Elements within a container will get the styles added to the container
<div style="color: red">
<p>我是容器内的元素，并没有直接添加样式，但也会变红！</p>
</div>
Who decides the final style?
Because the styles on an element come from many sources, including the browser's default style, built-in styles, styles added by various CSS selectors, and styles inherited from parent elements, the final style will be determined by the style with the highest priority among the many styles.
https://blog.csdn.net/weixin_41192489/article/details/139720467
Essential knowledge of style
https://blog.csdn.net/weixin_41192489/article/details/140236423
https://blog.csdn.net/weixin_41192489/article/details/140318834
https://blog.csdn.net/weixin_41192489/article/details/102411612
Inline elements can only show inner and outer margins at the beginning and end, and should be avoided as much as possible, so do not set inner and outer margins for inline elements.
When an inline element wraps, the borders will be displayed in an irregular manner, so do not set borders for inline elements!
When you need to add borders/margins to an inline element, convert it to an inline box.
display：inline-block
What styles can be added?
Almost every HTML element can have styles added to it.
By using the following styles, you can change the element's default standard box model to the IE box model.
box-sizing:border-box;
at this time
padding: 10px;
Padding: 10px on top, bottom, left and right
padding:10px 5px;
The top and bottom padding is 10px
The right and left padding are 5px
padding:10px 5px 15px;
The top padding is 10px
The right and left padding are 5px
The bottom padding is 15px
padding:10px 5px 15px 20px;
The top padding is 10px
The right padding is 5px
The bottom padding is 15px
The left padding is 20px
Related styles include
See https://blog.csdn.net/weixin_41192489/article/details/140325106
https://blog.csdn.net/weixin_41192489/article/details/115140348
Containers with overflow values of auto and scroll are scroll containers (containers with scroll bars). It is not recommended to use padding for their blank space because of compatibility issues. Therefore, you can only use the margin-bottom of the child element to achieve the bottom blank space of the scroll container.
The attribute value ranges from 0.0 (completely transparent) to 1.0 (completely opaque). If it exceeds the range of 0 to 1, the final calculated value is the boundary value.
opacity: -1; /* 解析为 0, 完全透明 */
opacity: 2; /* 解析为 1, 完全不透明 */
https://blog.csdn.net/weixin_41192489/article/details/140301618
The shadow will not change the size of the box, will not affect the layout of its sibling elements, and you can also set multiple border shadows to achieve better effects and enhance the three-dimensional effect.
box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色（默认值为color的颜色值） 内/外阴影
box-shadow: 15px 21px 48px -2px #666;
Common shadows
box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);
For more usage, see
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow
[Actual] Override the background color of the input box auto-fill
input:-webkit-autofill {
-webkit-box-shadow: inset 0 0 0 1000px #fff;
background-color: transparent;
}
[Actual] Batch modify button press color
button:active {
box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .1);
}
[Actual Combat]The masking effect of the novice guide
.guide {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, .75);
border-radius: 50%;
}
https://blog.csdn.net/weixin_41192489/article/details/121341551
https://blog.csdn.net/weixin_41192489/article/details/140314866
Firefox browser does not support it. The following attribute values are allowed:
zoom:50%, which means shrinking to half of its original size.zoom:0.5, which means shrinking to half of its original size.normalKeywords.zoom:normalEquivalent tozoom:1, is the default value.resetKeywords.zoom:reset, which means that when the user presses Ctrl and − or Ctrl and + to zoom in and out, the element does not zoom in and out. However, this keyword has poor compatibility and is only supported by Safari browsers.Comparison between zoom and scale() functions
zoomThe center coordinates of the attribute scaling are relative to the upper left corner of the element and cannot be modified.transformTransformingscale()The default center coordinate of the scaling function is the center point of the element.https://blog.csdn.net/weixin_41192489/article/details/121158821
https://blog.csdn.net/weixin_41192489/article/details/140316024
https://blog.csdn.net/weixin_41192489/article/details/140264311
Pseudo-class styles - must be written in the following fixed order:
/*让超链接点击之前是红色*/
a:link{
color:red;
}
/*让超链接点击之后是绿色*/
a:visited{
color:orange;
}
/*鼠标悬停，放到标签上的时候*/
a:hover{
color:green;
}
/*鼠标点击链接，但是不松手的时候*/
a:active{
color:black;
}
https://www.runoob.com/cssref/css3-pr-filter.html
Responsive icons with font-weight
Icon fonts are more detailed at larger font sizes and simpler at smaller font sizes
https://demo.cssworld.cn/8/5-1.php
CSS Icon Merger - ClipPath Sprites Technology
https://blog.csdn.net/weixin_41192489/article/details/121242735
/*鼠标悬停时，让当前行显示#868686这种灰色*/
table tr:hover{
background: #868686;
}
The alternating colors between rows of data can reduce the user's reading fatigue.
table tr:nth-child(odd){
background:#fff
}
table tr:nth-child(even){
background:blue
}
| value | describe |
|---|---|
| url | URL for the custom cursor. |
| default | The default cursor (usually an arrow) |
| auto | Default. The cursor set by the browser. |
| crosshair | The cursor appears as a crosshair. |
| pointer【common】 | The cursor is rendered as a pointer (a hand) indicating a link |
| move | This cursor indicates that an object can be moved. |
| e-resize | This cursor indicates that the edge of the rectangle can be moved to the right (east). |
| ne-resize | This cursor indicates that the edge of the rectangular box can be moved up and to the right (north/east). |
| nw-resize | This cursor indicates that the edge of the rectangular box can be moved up and left (north/west). |
| n-resize | This cursor indicates that the edge of the rectangle can be moved upward (north). |
| se-resize | This cursor indicates that the edge of the rectangular box can be moved down and to the right (south/east). |
| sw-resize | This cursor indicates that the edge of the rectangular box can be moved down and left (south/west). |
| s-resize | This cursor indicates that the edge of the rectangle can be moved downward (south). |
| w-resize | This cursor indicates that the edge of the rectangular box can be moved to the left (west). |
| text | This cursor indicates text. |
| wait | This cursor indicates that the program is busy (usually a watch or hourglass). |
| help | This cursor indicates that help is available (usually a question mark or a balloon). |
cursor color caret-color
Set the color of the input box insertion cursor (not supported by IE and Edge browsers yet)
input {
caret-color: red;
}
Without the following styles that can hide elements, the elements are displayed (some are invisible only because they are covered by the stack):
display: none [Common] Hidden elements, do not occupy space, will load resources, DOM accessible (adding hidden to the html tag will change the tag's display to none)visibility: hidden Hidden elements, occupy space, load resources, DOM accessibleopacity: 0 The element is invisible, takes up space, and can be clicked and selected.clip: rect(0 0 0 0) The element is invisible, not clickable, and does not take up space, but is keyboard accessible.lower {
position: relative;
z-index: -1;
}
The position of an element on a page is determined by many styles, including positioning, display, float, margin, etc.
When position, display, and float exist at the same time, the final display effect of the element will be determined according to the logic described in the link below.
https://blog.csdn.net/weixin_41192489/article/details/119009647
https://blog.csdn.net/weixin_41192489/article/details/140242430
https://blog.csdn.net/weixin_41192489/article/details/140250775
https://blog.csdn.net/weixin_41192489/article/details/115140348
https://blog.csdn.net/weixin_41192489/article/details/140255028
https://blog.csdn.net/weixin_41192489/article/details/140297366
https://blog.csdn.net/weixin_41192489/article/details/121365831
https://blog.csdn.net/weixin_41192489/article/details/121396794
https://blog.csdn.net/weixin_41192489/article/details/126028971
https://blog.csdn.net/weixin_41192489/article/details/120999355
https://blog.csdn.net/weixin_41192489/article/details/140317369
Improve the efficiency of writing CSS
CSS preprocessor is a special programming language used to add some programming features to CSS (CSS itself is not a programming language). You don't need to consider browser compatibility issues, because the final compilation and output of CSS preprocessor is still standard CSS style. You can use basic programming skills such as variables, simple logical judgment, functions, etc. in CSS preprocessor.
The mainstream CSS preprocessors are Sass (Scss), Less and Stylus.
(SASS was renamed SCSS starting from version 3.0)
CSS Coding Standards
/* 给左侧的盒子定义的样式 */
.leftBox{
}
/* 给内部为菜单的盒子定义的样式 */
.menuBox{
}
/* 将子元素排列为一行的样式 */
.row{
display:flex
}
/* 设置颜色为红色 */
.red{
color:red
}
The three elements of CSS high-performance animation refer to absolute positioning, opacity attribute and transform attribute. Therefore, for the same animation effect, the transform attribute should be used first. For example, the element movement animation should use the transform attribute instead of the margin attribute.
I have devoted myself to the research of technology for more than 30 years. I am proficient in various languages such as Java, Linux, JavaScript, PHP, CSS, etc. I have made many contributions in the field of open source. I have established a developer documentation site to share some problems in technology development for everyone to read.
