CSS -- style learning (1)

obge 2020-11-09 19:10:54
css style learning

CSS Refers to cascading style sheets (Cascading Style Sheets) : Define how to display HTML Elements ( A custom suit )

grammar : Declared by selector and ( It can be one or more ) constitute ,

Declaration in braces ({}) Cover up , It consists of an attribute and a value , Each attribute has a value . Property and value are separated by colons , With a semicolon (;) end


Selectors : Add styles to specific spaces , Commonly used Element selector ( Tag name ), Class selectors (.)、id Selectors (#), Universal selector (*)

Other selectors

One 、 Reduce css Code : Group selectors and nested selectors

1、 Group selector :   There are many elements with the same style in the style sheet , To minimize code , You can use the group selector , Each selector is separated by a comma


2、 Nested selectors :  The style that applies to selectors inside selectors

/* For all class="marked" In the element p Element specifies a style */
.marked p

Two 、 Combination selector : There are four combinations

1、 Descendant selector ( Space off ): Used to select the descendant elements of an element , As long as div All elements in the tag are selected

2、 Child Selector ( Separated by a greater than sign ): Used to select An element that is a subelement of a prime , Compared to descendant selectors , Select only div Of son p label , Sun Tzu doesn't choose

3、 Adjacent Sibling Selectors ( Separated by a plus sign ): Select the element immediately after another element , And they have the same parent element

4、 Common brother selector ( Separated by dashes ): Select the adjacent sibling elements after all specified elements


3、 ... and 、 Attribute selector    [ ]

grammar : [ Custom attribute names or elements contain ] { attribute : value }

/* Yes input label The type value in is submit Add style for */
input[type=submit] {
background-color: #4CAF50;




Self defined




Be careful :IE7 and IE8 It needs to be stated that !DOCTYPE Property selector is supported !IE6 And earlier versions do not support property selectors


If you want to simplify, you can use : *=, |=, ^=, $=, *= 

 "value It's the whole word " Type comparison symbol : ~=, |= ," String concatenation " Type comparison symbol : *=, ^=, $=


Four 、 Pseudo classes and pseudo elements

1、 pseudo-classes : Add some special effects of selectors

grammar :

/* Syntax of pseudo class :
label : Pseudo class selector name { attribute : value ;}*/
selector:pseudo-class {property:value;}
/*CSS Classes can also use pseudo classes :
Tag name . Class name : Pseudo class selector name { attribute : value ;}*/
selector.class:pseudo-class {property:value;}

Xiaoliezi :

<aclass="red" href="obge.html">obge</a>

  frequently-used :

a:link {color:#FF0000;} /* Links not visited */
a:visited {color:#00FF00;} /* Links visited */
a:hover {color:#FF00FF;} /* Mouse over link */
a:active {color:#0000FF;} /* Selected links */


2、 Pseudo elements : Add some special effects to the selector

/* Syntax of pseudo elements :
label : Pseudo elements { attribute : value ;} */
selector:pseudo-element {property:value;}
/*CSS Class can also use pseudo elements :
label . Class name : Pseudo elements { attribute : value ;} */
selector.class:pseudo-element {property:value;}

Common pseudo elements :

: first-line : Pseudo elements are used to set a special style to the first line of text , Can only be used for block level elements .

:first-letter: Pseudo elements are used to set a special style to the initial of the text , Can only be used for block level elements .

:before : Pseudo elements can insert new content in front of the content of the element .

 ":after" Pseudo elements can insert new content after the content of the element .

/* Pseudo elements can be combined with CSS class : */
p.article:first-letter {color:#ff0000;}
<p class="article"> Paragraph of the article </p>
/* At every <h1> Insert a picture after the element :*/




1、 notes : /*  Start , With  */  end

/* This is a note */

2、 How it was created : External style sheets (External style sheet)、 Internal style sheets (Internal style sheet) And inline style (Inline style)

3、 Color through CSS The most frequent designation : Hexadecimal value - Such as : #FF0000、 One RGB value - Such as : RGB(255,0,0) and The name of the color - Such as : red

4、 The unit of font size setting :px,em(1em The default size is 16px, Percentages and EM Combine )

5、Display( Show ) And Visibility( visibility )

Both define :display Property sets how an element should be displayed ,visibility Attribute specifies whether an element should be visible or hidden .

(1)、 Hide an element

hold display Property is set to "none", Or a visibility Property is set to "hidden", But these two methods can produce different results .

visibility:hidden You can hide an element , But hidden elements still need to occupy the same space as before ( Although it's hidden , But it still affects the layout )

display:none You can hide an element , And hidden elements don't take up any space ( Not only is it hidden , What's more, the original space occupied by this element will disappear from the page layout )

(2)、 Change the display type of the element ( The conversion between block elements and inline elements )

 Convert block elements to inline elements
Convert inline elements to block elements , But an inline element is set to display:block It is not allowed to have nested block elements inside it
Display as inline block elements , Display as peer display and modify the width, height, inner and outer margins and other attributes


6、 location (Position) : Specifies the location type of the element , With the help of the top , Bottom , Left and right attribute positioning

position The five values of property :static,relative,fixed,absolute,sticky

satic: Static positioning ,HTML Default value of element , That is, there is no orientation , Follow normal document flow objects . Elements are not subject to top, bottom, left, right influence

fixed location : Fixed position , The location of the element is fixed relative to the browser window . Even if the window is scrolling, it will not move , It has nothing to do with document flow , So it doesn't take up space , Can overlap with other elements

relative location : Relative positioning , The orientation of an element is relative to its normal position , Move relative positioning elements , But the space it used to occupy will not change , It is often used as a container block for absolute positioning elements .

absolute location : Absolute positioning , The position of the element is relative to the nearest located parent element , If the element does not have a positioned parent , So its position is relative to <html>,absolute Positioning makes the location of the element independent of the document flow , So it doesn't take up space , Can overlap with other elements

sticky location , Viscous positioning , Based on the user's scroll position to locate . Element positioning is represented as relative positioning before crossing a specific threshold , Then it's fixed positioning . It acts like position:relative; And when the page scrolls beyond the target area , It behaves like position:fixed;, It will be fixed in the target position .

Be careful : Specific thresholds refer to top, right, bottom or left One of , Appoint top, right, bottom or left One of the four thresholds , To make the sticky positioning effective . Otherwise, its behavior is the same as its relative orientation .Internet Explorer, Edge 15 And earlier IE Version not supported sticky location . Safari Need to use -webkit- prefix

z-index :  Property specifies the stacking order of an element ( Which element should be put in front , Or behind , Elements with a higher stacking order are always in front of elements with a lower stacking order ), If two positioning elements overlap , Is not specified z - index, The final position is HTML The elements in the code will be shown at the top .

  The type of value :number( Numbers ),auto,inherit( Inherit )


7、overflow( Solve sub element overflow ) Property is used to control how content is displayed when it overflows the element box , Only works on block elements of specified height

  Property value :  When the content overflows the element box, add a scroll bar in the corresponding element interval

visible The default value is . Content will not be trimmed , It will appear outside the element box .

hidden The content will be trimmed , And the rest is invisible .

scroll The content will be trimmed , But the browser will display scroll bars to see the rest of the content .

auto If the content is trimmed , The browser will display scroll bars to view the rest of the content .

inherit Rules should be inherited from the parent element overflow The value of the property .


8、Float( float ) : Causes the element to move left or right , The elements around it will also rearrange , Often used for images , But it's also very useful in layout

Be careful : Can only move left and right, not up and down , Until its outer edge touches the border of the containing box or another floating box , Elements before floating elements will not be affected , The elements that follow will revolve around it

Possible value :left、right、none、inherit


clear attribute : Remove the floating , Specifies that floating elements cannot appear on either side of the element , After the element floats , The surrounding elements will rearrange

Possible value :left、right、both、none、inherit


9、 alignment

Center elements margin: auto;  Align an element horizontally and Center , Set the width of the element Will prevent it from spilling over to the edge of the container , By specifying the width , And distribute the space between the two sides equally

If not set  width  attribute ( Or set up 100%), Center alignment will not work

Center the picture : have access to margin: auto; And put it in block In the elements

The text is centered within the element : text-align: center

Align left and right :

Use the positioning method (position: absolute;): Absolute positioning elements are removed from the normal stream , And can overlap elements .

Use floating mode (float): Solve sub element overflow (clearfix( Remove the floating )" and   overflow: auto; ).

align vertical center :

Use the way to control the inner margin :padding  ( If you want to center both horizontally and vertically , have access to padding and text-align: center:)

Use line-height

    Use  transform: translate(-50%, -50%)


10、 Layout : It is mainly divided into Head area 、 Menu navigation area 、 Content area 、 Bottom area .

The header area is at the top of the entire page , It is usually used to set the title of a web page logo:

The menu navigation bar contains some links , You can guide users to other pages :

There are generally three forms of content areas : Mobile 、 Flat panel equipment 、PC Desktop device

The bottom area is at the bottom of the page , Generally contains copyright information and contact information .




One 、 Common properties

1、 Background properties (background)

use :  Definition HTML The background of the element

background-color ( Color ) Attribute defines the background color of the element .

background-image (url(' Address ')) Attribute describes the background image of the element , By default , The background image is tiled horizontally or vertically and displayed repeatedly , To cover the entire element entity ,

background-repeat  Set whether and how the background image is repeated , Tile horizontally ( Set the value to repeat-x), Let the background image not affect the typesetting of text no-repeat

background-position Property to change the position of the image in the background


2、 Text   text

Adjust the text in the label ,

color Set text color

text-align Sets the horizontal alignment of the text , Can be centered (center) Or to the left (left) Or right (right), full-justified (justify)

text-decoration  To set or remove the decoration of the text , Commonly used is used to delete the link underline (none), You can also adjust the position of the line , In words (overline), in (line-through), Next (underline)

text-transform Control the letters in the element , Can be used to capitalize all sentences (uppercase) Or lowercase letters (lowercase), Or capitalize the first letter of each word (capitalize)

text-indent Indent the first line of text in an element , If the first line is indented 50px(text-indent:50px;)

direction Set text direction .

letter-spacing Set character spacing

line-height Set row height

text-shadow Set text shadow

unicode-bidi Sets or returns whether the text is rewritten

vertical-align Set the vertical alignment of elements

white-space Set the way to handle whitespace in an element

word-spacing Set word spacing


3、 typeface fonts

use :  Define the font , In bold , size , Writing style .

Font type : General and specific

Universal font series - Font system combination with similar appearance ( Such as "Serif" or "Monospace")

Specific font series - A specific font family ( Such as "Times" or "Courier")

font-family Property to set the text HTTP: , Multiple word systems are separated by commas , If the browser doesn't support the first font , He will try the next font , If the name of the font family is more than one word , It has to be in quotation marks

font-style  typeface style  : There are three values normal (normal)、 Italics (italic) and Slanted text (oblique)

font-size Property to set the text size . The value of font size can be absolute or relative , The default size is the same as a normal text paragraph , yes 16 Pixels (16px=1em).

Absolute size : Set a specified size of text 、 Users are not allowed to change the text size in all browsers 、 Absolute size is useful when determining the physical size of the output

Relative size : Set the size relative to the surrounding elements 、 Allow users to change the size of text in the browser


4、 link : Different links ( state ) There can be different styles ( Such as color (color), typeface (text-decoration), background (background-color) etc. )

Four states of link :a:link( Links you haven't visited ),a:hover( When the mouse is over a link ),a:active( The moment I was hit ),a:visited( Visited )

Be careful : When set to the order of several link state styles :a:hover Must be with the a:link and a:visited Back ,a:active Must be with the a:hover Back

a:link {color:#000000;} /* No access to the link */
a:visited {color:#00FF00;} /* Visited link */
a:hover {color:#FF00FF;} /* Mouse over link */
a:active {color:#0000FF;} /* On mouse click */


5、 list ( Orderly ol, disorder ul) : Set list item tag

list-style-type  Specifies the type of list item tag

list-style-image Set the image as a list item flag .

list-style Abbreviated attribute . Used to set all the properties used for the list in one declaration

list-style-position Set the position of the list item flag in the list .


6、 Frame border

use : Specify the style and color of an element's border .

border-style Property is used to define the style of the border , You can also go to (border-top-style) Right (border-right-style) Next (border-bottom-style) Left () Set up separately , The usual value is solid  

none: Default borderless

dotted: Define a dotted line border

dashed: Define a dotted line

solid: Define solid line borders

double: Define two borders . The width of the two borders and border-width The value of is the same

groove: Definition 3D Groove frame . The effect depends on the color value of the border

ridge: Definition 3D Ridge border . The effect depends on the color value of the border

inset: Define a 3D The embedded border of . The effect depends on the color value of the border

outset: Define a 3D Highlight border . The effect depends on the color value of the border

border-width Property to specify the width of the border . There are two ways to specify the width of a border : You can specify a length value , such as 2px or 0.1em( Unit is px, pt, cm, em etc. ), Or use 3 Key words (thick 、medium( The default value is ) and thin),CSS No definition 3 Specific width of keywords , You can modify

border-color Property is used to set the color of the border , It doesn't work alone , Must use first border-style To set the border style .

// Border shorthand border-width、border-style、border-color
border:5px solid red;


7、 outline (outline): Specifies the style of the element outline 、 Color and width

Definition : Is a line drawn around an element , On the edge of the border , Can play a role in highlighting elements .

outline-color Set the color of the outline

outline-style Set the style of the outline

outline-width Set the width of the outline

8、 margin( Margin ) Attribute defines the space around the element .

margin Remove the surrounding ( The outer border ) The element region , No background color , It's completely transparent ,  You can change the top of the element alone , Next , Left , The right margin , You can also change all attributes at once

The form of value : auto( In the middle , Will depend on the browser , This is setting the browser margin )、length ( Define a fixed value , Like pixels ,pt,em etc. )、 % ( Define a margin that uses percentages ) 

Note that the order of the four values is : On (margin-top), Right (right)、 Next (botton)、 Left (left)


9、padding( padding ), fill , Define the space between the element border and the element content , That is, the inner margin between the top, bottom, left and right

When the element of padding( fill ) When the inner margin is cleared , The released area will be filled with the background color of the element .

The form of value :length ( Define a fixed value , Like pixels ,pt,em etc. )、 % ( Define a margin that uses percentages )

  Note that the order of the four values is : On (margin-top), Right (right)、 Next (botton)、 Left (left)


10、Dimension( Size ): Control the height of the element , Width , Row spacing (line-heignt)

height: Set the height of the element .

line-height : Set row height .

max-height : Set the maximum height of the element .

min-height : Set the minimum height of the element .

width : Set the width of the element .
min-width : Set the minimum width of the element .

max-width : Set the maximum width of the element .


11、 Box model (box model) : The essence is a box, It includes : Margin , Frame , fill , And the actual content , Allows us to place elements... In the space between other elements and the surrounding element borders .

When using boxes to design models, you should pay attention to :

Margin( Margin ) - Clear the area outside the border , The outer margin is transparent .

Border( Frame ) - The border around the inside margin and the outside of the content .

Padding( padding ) - Clear the area around the content , The inside margin is transparent .

Content( Content ) - The contents of the box , Show text and images

The width of the total element = Width + padding-left + Right fill + The left margin + Right margin + The left margin + The right margin

The height of the total element = Height + Top filling + Bottom filling + On the border + Under the frame + From the above + Underside


12、table form

Common properties : Frame (border), Wide and high (width,height), Text alignment , fill (padding), enjambment , Cross column

text-align Property to set the horizontal alignment , towards the left , Right , Or the center :

border-collapse Property to set whether the table's borders are folded into a single border or separated

colspan Property specifies the number of columns a cell can span , All browsers support it colspan attribute . Its value is number

rowspan Property specifies the number of rows a cell can span , All browsers support it rowspan attribute . Its value is number


13、 The navigation bar : A list of links , With the help of <ul> and <li> To deal with

Common navigation bar : There are mainly two kinds of vertical and horizontal , Turn vertical into horizontal , You can use inline (display attribute inline) Or floating (float), But want to link to the same size , You have to use the floating method

Common properties and values :

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
li a.active {
background-color: #4CAF50;
color: white;
li a:hover:not(.active) {
background-color: #555;
color: white;

<li><a class="active" href="#home"> Home page </a></li>
<li><a href="#news"> Journalism </a></li>
<li><a href="#contact"> contact </a></li>
<li><a href="#about"> About </a></li>

 list-style-type:none - Remove the small flag before the list . A navigation bar doesn't need list tags

margin,padding: Remove the browser's default settings and set margins and padding to 0

display:block - Show links to block elements , Turn the whole into a clickable link area ( It's not just text ), It allows us to specify the width

display:inline; - By default ,<li> Element is a block element . ad locum , We delete each list item before and after the line break , To show a line of


14、 The drop-down menu : The effect of the drop-down menu will be displayed after the mouse moves up .

Mainly with the help of : hover ( Mouse over trigger )display : block( Show , Hide... First none), And with the help of positioning Drop down ( relative relative) and Drop down content ( absolute absolute ) Adjust the location of the drop-down content

.dropdown:hover .dropdown-content {
display: block;


15、 Tooltip  

It's similar to a drop-down menu , You can also use visibility Two values of property (visible( Show ) and hidden hide )

The text that needs to be prompted uses  position:relative, Prompt text needs to set positioning value  position:absolute

:hover  Selectors are used to display when the mouse moves over the specified element (visible) A hint of .

 CSS3 border-radius  Property is used to add rounded corners to the prompt box .

Little arrow : use CSS Pseudo elements ::after And content Property to create a small arrow mark for the prompt tool , Arrows are made up of borders , But when combined, the prompt tool looks like a voice message box

Fade in effect : use CSS3 transition Attribute and opacity Property to achieve the fade in effect of the prompt tool


16、 transparency  opacity

Opacity Attribute value from 0.0 - 1.0. The smaller the value. , Make the elements more transparent . Such as ( opacity:1.0;

IE8 And earlier versions use filters :alpha(opacity= x). x The values that can be taken are from 0 - 100. Lower value , Make the elements more transparent . Such as (filter:alpha(opacity=100);

filter:alpha(opacity=40); /* IE8 And earlier versions */
filter:alpha(opacity=100); /* IE8 And earlier versions */


17、 Media type  @media : Set different styles for different media in the same style sheet

Usage mode :

/* The browser screen shows a 14 Pixel Verdana Font style */
@media screen
p.test {font-family:verdana,sans-serif;font-size:14px;}
/* Page printing , It will be 10 A pixel Times typeface */
@media print
p.test {font-family:times,serif;font-size:10px;}
/* Set to bold on screen and paper */
@media screen,print
p.test {font-weight:bold;}

Common types :

all: For all media devices .

print: For printers .

screen: For computer monitors .

aural: For voice and audio synthesizer .

braille: Tactile feedback device for Braille for the blind .

embossed: A Braille Printer for pagination .

handheld: For small handheld devices .

projection: For scheme presentation , Like a slide show .

tty: The density of the letters used in the grid is fixed , Such as teletypewriters and terminals .

tv: For TV type equipment .


18、 Counter : Set... By a variable , Incrementing variables according to rules

content Use ::before and ::after Pseudo elements to insert automatically generated content

counter-increment Incrementing one or more values

counter-reset Create or reset one or more counters




all For all media devices .
aural For voice and audio synthesizer .
braille Tactile feedback device for Braille for the blind .
embossed A Braille Printer for pagination .
handheld For small handheld devices .
print For printers .
projection For scheme presentation , Like a slide show .
screen For computer monitors .
tty The density of the letters used in the grid is fixed , Such as teletypewriters and terminals .
tv For TV type equipment .

  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根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  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根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  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