A demo learning CSS

Tencent Data Architect 2020-11-13 07:17:51
demo learning css

Share a friend's AI tutorial . Zero basis ! Easy to understand ! Humor and wit humor ! And with the yellow lines ! You can see if it helps you : Click on the open

docker/kubernetes Getting started video tutorial

Full stack engineer development manual ( author : Luan Peng )

One demo Learn to css
css Total solution of selector
css Operation grammar

To study the css The authoritative guide to this book , I like to write while learning demo, So I wrote this article , Contains most of css Programming knowledge . Let's get you one demo master css Programming , If you have any questions, please leave a message .

css There are mainly two parts to the knowledge of :1、 Selected style ,2、 Set the style . Corresponding css The grammar is 1、css Selectors ,2、css Style parameters

css Total solution of selector :

Selectors always parse from left to right , Don't add () Priority operation

Basic selector

h2{ /* Label selection */
p,h1{ /* Use commas to implement element aggregation */
div h1,div h2{ /* Use spaces to implement descendant elements ( Child elements and descendant elements ) Inquire about , Express div The offspring element of h1,h1 and div A collection of , Look for descendant elements from the set h2, The last query is h2 list */
background-color: #2b542c;
p>h1{ /* > Denotes a direct child element */
p+h1{ /* + Represents the sibling element that follows , choice h1 Elements */
html>body table+ul{ /* stay html Element to query the direct child element body, stay body Query descendant elements in table, stay table The sibling element is queried after the element ul, The last choice is ul list */
body *{ /* * Wildcard selector , Match all elements , Represents a match body All descendant elements of */
p.class1.class2{ /* . Express class Class selectors ,p Label , Write together , Indicates multiple filters , An element can have multiple styles */
#id1{ /* #id Selectors , An element can only have one id, Of all elements id Cannot be the same */

Attribute selector

p[attribute1][attribute2]{ /* [] Attribute selector , Represents all elements that have some attribute , Multiple parameters mean having multiple attributes at the same time ,class It can also be used as an attribute filter */
a[href="http://www.123.com"]{ /* = Having an attribute , All elements whose attribute value is equal to the specified value */
div[class~="class1"]{ /* ~= Having an attribute , And the attribute value contains all elements of the specified value */
input[title^="title1"]{ /* ^= Specifies that the value of the property starts with the specified string */
input[title$="title1"]{ /* $= Specifies that the value of the property ends with the specified string */
input[title*="title1"]{ /* *= The value of the specified property contains the specified string */
input[title|="title1"]{ /* |= The value of the specified property is equal to title1 Or with title1- start */

Pseudo class selector : Represents a pseudo class

a:link{ /* link Represents a hyperlink that has not been visited */
a:visited{ /* visited Indicates a hyperlink that has been visited */
input:focus{ /* focus Represents the element that currently has focus */
div:hover{ /* hover Represents the element where the mouse pointer stays */
a:active{ /* active Represents the element activated by user input */
div:first-child{ /* first-child Represents the first element , This sentence means the first div Elements */
div :first-child{ /* Spaces represent descendant elements , This sentence means div The first descendant of the element */

Pseudo element selector

p:first-letter{ /* first-letter In line element initials */
p:first-line{ /* first-line The first line of an in line element */
p:before{ /* before Insert the content before the element */
color: #2b542c;
p:after{ /* after Insert content after the element */
content: "AAAAAAAAAAAA";
color: #2b542c;

CSS Style setting grammar :

Style priority

1、 !important The style of the mark > inline style (style attribute ) >id Select style (# obtain ) > Attribute selection ([title=“da”]) > Label selection div p > wildcard *
2、 The same level of priority has superposition .div p Is greater than p. Same priority , The later you set the style, the higher the priority
3、 Most styles are inherited from the parent element to the child element , Inherited styles have no precedence , The lowest level
4、 The reader's statement of importance > An important statement from the creators > The normal statement of the Creator > Reader's normal statement > User agent statement

color: #111111; !important; /* Use !important For each important style */
background-color: #111111; !important;

Values and units

/* Color */
color: #111111; /* With six 16 Hexadecimal said */
color: red; /* Keyword representation */
color: rgb(255,255,255); /* Three place rgb value , Per person 0-255 */
color: rgb(50%,50%,50%); /* Three place rgb value , Per person 0-100%*/
/* length */
margin: 10%; /* Percentage length , Relative to the parent element width for */
padding: inherit; /* Keyword representation inherit Represents the inheritance element attribute ,auto Automatically adjust according to rules */
height: 10px; /* px Integer pixels ,cm centimeter =0.394in in Inch =72px mm mm =0.0394in pc pica =12px */
width: 10em; /* em Relative size ,1em Represents the font size of the current element ,word The size of a character in , If you use em Set the font size of the current element ,1em Equivalent to the font size of the parent element */
/* URL */
background-image: url("images/aa.jpg"); /* relative url,url and () There must be no space between them Here url Is relative to css The location of the file , It's not relative to html Relative position of */


font-family: sans-serif,Arial; /* Set the font Set two fonts so that if one cannot be used , Will apply another */
font-weight: bold; /* The font size bold In bold bolder More thick lighter Fine body 100,inherit Inherit the parent element */
font-size: large; /* 7 Key words indicate , The numerical representation is as follows 12px The percentage is expressed as follows 120% */
font-style: italic; /* italic Italics oblique tilt normal normal inhert Inherit the parent element */
font-variant: small-caps; /* Font deformation small-caps It means that lower case becomes small capital , Capital to large capital */
font-stretch: extra-condensed; /* Font stretch */
font: lighter large Arial; /* Font attribute abbreviation ,style,weight,variant,size,family The first three are in any order , The last two have to be in order */

Text attribute

text-indent: 4em; /* The first line indentation 4 Characters */
text-align: center; /* Horizontal alignment , left、right、center、justify full-justified */
line-height: 1.2; /* Minimum row height , It's not necessarily the distance , All elements have this attribute , But only the in line elements are affected ,float The type parameter value represents the scale relative to the font , Because it will inherit , So try to use proportional control , The default is font size 1.2 times .em、ex、 Percentages are relative to the size of the element */
vertical-align: baseline; /* vertical-align Only apply with in line elements and replacement elements ,baseline Indicates baseline alignment ,sub Subscript ,super Superscript ,bottom Align the bottom of the row box ,text-bottom Align the bottom of the line text ,middle In the middle ,top Top alignment ,text-top Align top of line text */
vertical-align: -100%; /* percentage : Calculated element line-height Multiply by percentage , Raise the element baseline relative to the parent element baseline . Positive elements rise , Negative elements decrease */
word-spacing: 10px; /* Word spacing , Word spacing */
letter-spacing: 10px; /* Letter spacing */
text-transform: uppercase; /* Text conversion ,uppercase All capitals ,lowercase All lowercase ,capitalize title case */
text-decoration: underline; /* Text decoration underline Underline ,overline Top line ,line-through The transverse line ,blink Flashing text , No inheritance */
text-shadow: green 5px 0.5em 1px,1px 1px 1px black; /* Shadow four parameters : Color , Right deviation , Down shift , Blur radius . Multiple shadows are separated by commas */
white-space: pre; /* Text whitespace processing mode ,pre-line Merge blanks , Keep wrapping , Allow word wrap .normal Merge blanks , Ignore line breaks , Allow word wrap .nowrap Merge blanks , Ignore line breaks , No word wrap is allowed .pre Leave blank , Keep wrapping , No word wrap is allowed ,pre-wrap Leave blank , Keep wrapping , Allow word wrap */
direction: ltr; /* The direction of text reading ltr Read left to right rtl Read right to left */
unicode-bidi: embed; /* Dealing with writing directions */

Replacement elements , Content placeholder , The specific display is controlled by others ,img Controlled by specific pictures ,input from type Type control
Non replaceable elements , The element content is displayed directly in the document
Block-level elements , Line feed is generated before and after the box , The paragraph p, title h1,div Equal elements ,display:block Tags generate elements into block level boxes
Inline elements , There is no line break before and after the box , Is a descendant of a block level element ,strong、span、a、img Equal elements ,display:inline Generate elements into inline boxes

Block level non replacement elements

All properties default to auto Of

margin-left: -10px; /* Margin , It can be positive or negative , It can be for auto, The background color is transparent by default */
border: 1px dashed black; /* Frame ( Width , style , Sample color ), The default color is the element background color */
margin-top: auto; /* The upper and lower margins are set as long as auto, Just customize it as 0, It's different from the left and right margins , The vertical outer margins between elements are automatically merged (1、 Is merging -> Take the largest absolute value 2、 Negative merger -> Take the largest absolute value 3、 Positive and negative combination -> Take the sum of positive and negative values ) */
padding: 10px 10px; /* padding , The content background is also applied to the inner margin , It can only be positive , Not for auto */
height: 10%; /* The percentage is relative to the parent element content area , If the parent element content area width is not explicitly declared ( Not set or set for auto), Then the percentage of child elements is reset to auto. When the height of the element content is greater than the height of the element box , Performance depends on the parent element's overflow */
width: 50%; /* The width and height are the distance between the inner boundaries , No inner margins , Frame , Margin . It can be set to auto Or positive . The content area of a general subelement (width)+ The inner margin of the element + Frame + Child element margin = The content area of the parent element (width) */
/* All margins of child elements always occupy the content area of the parent element , Sub element content area 、 The outer margin can be set to auto. When three distances ( Width , Left outer margin , Right outer margin ) Are not as auto, The system will automatically margin-right Set to auto */
/* In the direction of the horizontal axis : When you have one auto, Then automatically adjust to fill the parent element content area . When the left and right margins are auto, Adjust to equal length , Fill the parent element content area . When the width and an outer margin are auto, Then the outer margin is reduced to 0, Full automatic width adjustment . When all three are auto, Then the two outer margins are 0, The width is full */

Block level replacement elements

width: auto; /* The use of block level replacement elements is the same as non replacement elements , It's just width Set to auto The size of the content of the replacement element will be automatically set when . If the width is set to a fixed size , Then the height changes with the proportion , Unless the height is also set to a fixed value */

In line non replacement elements

With span strong em Mainly .

  1. In line boxes for each element =(line-height subtract font-size)/2 Add to both sides of the content area , It's the same with negative numbers , The row box of a row element is the top of the highest inner row box and the bottom of the lowest inner row box . The text is always in the middle of the in line box , Of an element font-size Greater than line-height, It will exceed the travel high display , It's like margin It's a negative number
  2. vertical-align Apply to inline elements , Keep the alignment of in line boxes and row boxes ,vertical-align Set to number , Is similar to the block element padding, It will increase the row height . In line non replacement elements padding Do not increase row height , It doesn't affect the position of the text , Affects the area of the background color of the elements in the row
  3. Multiple alignments , Anonymous text ( A line of non inline element text ) Takes the first replacement element ( If there is no replacement element, take the first non replacement element ) The alignment of
  4. About alignment , First of all, according to the lines inside the box , Calculate the row box , According to their own vertical-align Layout , When not set , The default is bottom alignment

In line substitution elements

With img input Mainly

  1. The replacement element affects the height of the row box , In line elements increase the inner margin , Frame , The outer margin affects the distribution , Add in line box , But it doesn't affect the elements line-height, And then it doesn't affect vertical-align In the case of percentages
  2. The bottom of the in line substitution element is aligned with the baseline of the text line by default , When the replacement element is set to vertical-align Alignment mode , Then the in line non replacement element vertical-align Will automatically change to the alignment of the replacement element
  3. In line replacement elements padding Increase row height , Because it can be like the location of words , It also affects the area of the background color of the elements in the line

Element display display

div a{
display: block; /* block Represent elements as block elements , But it doesn't change the nature of the elements , The element is still the original in line or block element . A block element cannot be a descendant of an in line element */
display: inline; /* inline In line element display */
display: inline-block; /* inline-block Inline block element , Put the block element in the line as a replacement element , Don't wrap ,inline-block The element is determined by the attributes of the original block element */
display: run-in; /* run-in Inline block element , Convert block elements to inline elements , With the following block elements , Side by side in a row . If it's followed by an in line element , be run-in Keep the element as a block element */

Margin Frame

margin: 10% 10% 0.5em 10px; /* On Right Next Left . The left is the same as the right , By default, it is the same as above , The right default is the same as above , Percentages are relative to the parent element width */
margin-top: 10px; /* Set only one outer margin , Other defaults are 0, By default , The top and bottom margins are merged automatically . The top and bottom margins of in line non replacement elements have no effect , And it doesn't change the height of the elements */
padding: 10% 10% 0.5em 10px; /* The background extends to the inner margin , Percentages are relative to the parent element width, Inner margins affect the distribution of in line substitution or block elements , Affects the background color area of all elements */
padding-bottom: 10px; /* Set only one inner margin , Other defaults are 0 */
border-style: solid dashed dotted double; /* Set up four borders solid Solid line ,dashed Dotted line dotted Dotted line double Double line inset Inner groove outset The outer convex frame groove groove ridge Ridge border */
border-bottom-style: inset; /* Set side border separately , Borders default to none, The default width is 0. You have to change both to show the border */
border-width: 10px 0.1em thick 0; /* thick > medium > thin Not necessarily how much width */
border-color: black rgb(25%,25%,25%) #0d0d0d silver; /* The default border color is the element color ,color Will inherit */
border-bottom: thick solid gray; /* Border merge abbreviation , Set one side border at a time style color width It can be out of order */
border-style: dashed solid double; /* Border merge abbreviation , Set one property at a time , The right border will automatically be the same as the left border */
border: medium green; /* Border merge abbreviation Set all properties of four borders at a time , No settings style, The default is none No display */

Color background

color:#0d0d0d; /* The default foreground color is black , Color will inherit , Border text color , Default to foreground color */
background-color: transparent; /* transparent It means transparent color */
background-image: url("images/aa.jpg"); /* Set the background image */
background-repeat: repeat; /* repeat Repeat tiling the background image , No stretching ,repeat-x Repeat the horizontal axis , Don't stretch horizontally and vertically ,repeat-y The vertical axis is tiled , No stretching ,no-repeat It's not tiled either horizontally or vertically , No stretching */
background-position: top right; /* Initialize the position of the background image , keyword center top Or numerical value 50px 50px Or percentage 10% 10%( Percentage of picture center position ) Fine .*/
background-attachment: fixed; /* Background scrolling with elements ,fixed Indicates that the background image does not scroll ( The position of the picture is determined by the visual area , It's not determined by the elements ),scroll Show background scrolling */
background: white url("images/aa.jpg") top right repeat-x fixed;/* Attribute shorthand . Background color Background image Background location Background tiling Whether the background scrolls . All can be omitted */


float: left; /* float , The position of the current element relative to the parent element ( Unless the margin is negative ), Cannot go beyond the scope of the parent element , Floating elements will generate block level boxes , Act like a block level element , The outer margins of floating elements are not merged , Multiple floating elements do not overlap ( Except for negative margins ) */
/* Floating elements , Agree to treat as block level elements , The floating side direction must be maintained , Use space as much as possible The floating element is tiled from the outer edge of the previous floating element at the same floating boundary , If there is enough space inside , Then start a different line */
/* Block elements take up a line , It's not the point of reality , Block level div Regardless of the size , A place holder in a document , Always in the line . */
/* By default : Floating elements do not affect the normal reality of block level elements ,( Subsequent block level elements , Immediately after the previous block level element, it shows , Just like floating elements don't exist ), Because the floating element is a new display layer */
clear: left; /* Floating or non floating elements , There is no floating element layer on the left ( That is, if the floating element is on the left, it will be applied to the current normal flow display layer , Line feed display ), To ensure that it does not overlap with the floating element on the left */


position: absolute; /* fix Same as absolute, It's just fix The containing block of is the window */
/* relative The offset of is relative to the undefined offset in normal flow , In the document placeholder , remain unchanged , Show after using offset on the display , therefore relative Keep the original space , Keep the element shape , Does not affect the subsequent distribution of , Just change your distribution . You need to use width and height +top、left Achieve layout */
/* absolute Delete the original space , Generate a new block level box , Determine that the location element does not affect the distribution of other elements ,absolute Contains fast for the most recent position Values are not for static Ancestor elements of , Generally, you need to manually set the block elements that you want position by relative, Not the parent element itself */
top: 20px; /* The offset Use offset to determine element size when there is no width or height , If the offset is set to auto, It's to keep the position attribute before positioning */
left:10%; /* If the element has width and height , The layout also depends on the left offset 、 Up shift */
right: -20px; /* There are elements wide and high ,right,bottom Invalid settings , Negative numbers can cause the element to shift out of the contain fast */
bottom:10%; /* The vertical percentage in positioning is relative to that of the containing block height for , The horizontal percentage is relative to the containing block width for */
min-width: 10em; /* max min Set the size limit of the element . To mix different units , If the size is 10% But the requirement is not less than 10em */
/* overflow */
overflow: hidden; /* Overflow handling method hidden hide scroll rolling auto The browser does it by itself ( It's usually rolling ) visible( Default ) The element display is beyond the element box , But the shape of the element box doesn't change */
/* tailoring */
clip:rect(50px,100px,100px,50px); /* clip Content tailoring , The section shown in the content area , Mask makes parts of the area show . On Right Next Left , It's all relative to the top left coordinates . You can only set values or auto, Percentage cannot be used , The crop area is beyond the content area , The content will also show */
/* visibility */
visibility: visible; /* hidden hide .visible Show collapse For table elements */
/* z Axis stacking */
z-index: 1; /* All positioning elements have this attribute , The bigger, the higher , It can be negative */

Table layout

The table will be inserted automatically , The table contains rows , Row group ( Or column , Line up ). The row contains the properties of cells
The representation of the table contains 6 Layers , From top to bottom : Cell - That's ok - Row group - Column - Line up - form

margin: 10px; /* Tables can have margins , But there is no inner margin */
caption-side: bottom; /* Table title position ,top Top bottom Bottom */
border-collapse: collapse; /* Table cell borders collapse Merge border mode separate Split border mode */
border-spacing:1px 2px; /* Border spacing , Horizontal distance - Vertical distance . This property can only be applied to a table */
empty-cells: hide; /* Empty cell processing ,show Show hide hide */
table-layout: fixed; /* Table width layout fixed Fixed width layout ,auto Automatic width layout Height is always automatically arranged */
height: 500px; /* Minimum table height ,auto The form will calculate itself */
/* Fixed width layout , The column width is auto The column of , The column width is set according to the width of the first row of cells or the remaining controllable width of the whole list . If the sum of column widths is greater than the table width , The table width is automatically changed . If the table width is greater than the column width and , Then the extra table width is divided equally into each column width */
/* Fixed width layout : The column width is controlled by the first row of cells , Other cells width invalid , If there are too many cells , according to overflow Control display */
/* Automatic layout :width:auto It's also possible to trigger . When the column width is a percentage , It's calculated relative to the table width */


table td{
border-style: hidden; /* Border style , Merge border mode ,hidden The highest priority ,none( Default ) The lowest priority , Wide borders are better than narrow borders , Border style priority (double>solid>dashed>dotted>ridge>outset>groove>inset) */


list-style-type: disc; /* List item front end flag disc Solid round , There are many inheritable */
list-style-image: url("images/aa.jpg"); /* Image as front-end flag for list items , If you can't load it, you will use list-style-type Show */
list-style-position: outside; /* The location of the list mark ,outside Default , The logo is in a separate column , Does not affect the layout of other elements , Equivalent to the absolute positioning of the flag relative to the list item */
list-style:url("images/aa.jpg") disc outside; /* Logo style merge abbreviation , No sequence requirements */
/* There's something about counting */

System font color

send web Applications are more like part of an operating system

font:icon; /* caption The font style of the Title Control , Button drop down style .icon The font style of the icon , Driver , Folder , File Icon .menu Menu list text style .message-box Dialog text style status-bar Text style in window status bar */
color:ActiveBorder; /* ActiveBorder Active window border color ActiveCaption Active window title background color , AppWorkspace Apply background color to the document ,Background Desktop background color ButtonFace Three dimensional buttons “ Noodles ” On the background color */


cursor: e-resize; /* Set cursor style : Indicates and selects class cursor styles :pointer The pointer ,hand Hand type . Move the class cursor :e-resize,ne-resize,sw-resize; Wait for the forward class cursor ;wait,progress; Provide help class cursor :help Graphic cursor url(xxx.cur) */


outline-style:dotted; /* The outline doesn't distinguish between top, bottom, left and right , Because the outline is irregular . The outline does not affect the layout of other elements , On the outside of the border . */
outline-width: medium; /* Contour width */
outline-color: invert; /* Outline color , You can use normal color settings , Can also be set to invert( The default value is ), It means to reverse the color behind the outline */
outline: green medium dotted; /* Outline attribute abbreviation */

Limit the media and device size of the style application

@media screen and (max-device-width: 1700px){ /* screen The screen print The printer projection Projection speech( Sound media ,aural obsolete ) braille braille handheld Handheld media */
本文为[Tencent Data Architect]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple