current position:Home>CSS Foundation (novice friendly)

CSS Foundation (novice friendly)

2021-08-27 02:06:36 Outlying islands 121

This is my participation 8 The fourth of the yuegengwen challenge 23 God , Check out the activity details :8 Yuegengwen challenge

CSS Concept

First , What is? CSS?cascading style sheets     Chinese translation cascading style sheet ,WEB Expression standard language in standard , Performance standard language mainly controls the display of Web information in web pages , In short, how to modify the display style of Web Information .

Easy to understand , Whether the page looks good or not depends on CSS To decide ,CSS We can follow the advanced steps in our study

Use steps

First step : How to create CSS?CSS Style sheet created 3 Ways of planting ?

answer :

  1. Internal style : adopt <style></style> Label to create , Written in html Page head among
  2. External style : establish css file , adopt <link rel="stylesheet" type="text/css" href="main.css" /> Introduce , Of course, there is a second way to introduce @import url(main.css)  , So here comes the question , Which one should we use ? In the future, I recommend link The way of introduction , because import In a way that is not supported by older browsers , And in JS In operation , Cannot operate on it
  3. inline ( inline ) style : This is more people-friendly , The writing is also very easy Add... Directly inside the label style that will do .<p style="" ></p>

summary : Later, in actual development , The more recommended way is the external style . What about priorities ? The highest is inline style -》 Inside / external Look at the specific writing order

The second step : know CSS Where did you write , And specifically CSS How to write it ?

answer :1. CSS grammar : Selector {   attribute : Property value ; attribute : Property value ;  } Be careful not to lose the semicolon

CSS Selector ( Selectors )

The purpose of selectors is to help us find the elements on the page

  1. ID Selectors : stay html Add... To the label in ID , stay CSS Pass through  #ID name {  }   You can find this element . Be careful # Cannot be changed ,id Don't repeat ( Commonly used )

  2. Class Selector : Add... To the tag class,css Through the file .class name {  } , Multiple labels can use the same class, Of course, one label can also use multiple class Separate... By spaces ( Commonly used )

  3. wildcard :* An asterisk , With it, all tags on the page will take effect. This style , It is generally used to set the font size

  4. tag chooser :html Just bring your tag name directly , for example :p{  }  Of course, after you finish writing like this , All on your page p This style is applied to all tags ( Commonly used )

  5.   Group selector : A single style can no longer stop you , How to write so many , It's simple , Separated by commas OK , for example :p,a,div{  } .div1,.p1,.a1{ }( Commonly used )

  6. Offspring selector : When you want to find children under an element , You'll think of this selector , Its usage requires only a space in the middle , for example :div a{  } This is the meaning of this sentence div All of the following a Will use this you wrote CSS style , Be careful : Space is indispensable ( Commonly used )

  7. Child element selector : How to write it div > a{  } What's the difference between and future generations , It's simple , Child elements in genealogy , Just find your own children , Grandson obviously doesn't belong to it

  8. Adjacent Sibling Selectors :div + a {  } and div Of the same rank a The label will take effect , But the requirement is that you must be a brother sleeping in the upper bunk , Not even the opposite shop , Must be next to div Talent

  9. Follow up brother selector :div~a{ } This can be found as long as it is at the same level

The priority of the selector

CSS The selector has a weight , as follows :

  • css The weight is represented by four digits , The expression of weight is as follows :0,0,0,0
  • The weight of the type selector is 0001
  • class The weight of the selector is 0010
  • id The weight of the selector is 0100
  • The weight of the sub selector is 0000
  • The weight of the property selector is 0010
  • The weight of the pseudo class selector is 0010
  • The weight of the pseudo element selector is 0010
  • Contains the weight of the selector : Is the sum of the weights containing the selectors
  • The weight of the inline style is 1000
  • The weight of the inherited style is 0000

See weight priority from style selector :important > embedded style > ID > class > label | pseudo-classes | Attribute selection > Pseudo object > Inherit > wildcard .

And a little bit more ,CSS The weight of the selector , It's calculated , For example, you wrote a ID Selectors and label selectors , Then its weight is the result of adding the two

Finally, it's time to start writing CSS It's a place poof What's up there , It's all a group of mattresses

CSS Basics

Text related styles

  1. Text size font-size   The unit is px/em  Be careful ; In general PS Even numbers are used when measuring Fonts

  2. Text color color There are three ways to write colors red word   #ccccc 16 Base mode rgb(255,255,1)

  3. typeface font-family You can set multiple Fonts , Comma separated , The effect depends on the font installed on the user's computer , Pay attention to writing in quotation marks

  4. In bold :{font-weight:bolder( The coarser )/bold( In bold )/normal( routine )/100—900; but 600-900 To see the effect of bold

  5. tilt :font-style:italic( Little inclination )/oblique( A great inclination )/normal( Cancel tilt , Regular display );but Little inclination or Big and can't see

  6. Horizontal alignment text-align:left/right/center

  7. Row height { line-height:normal/value; } OK, tips , Set the row height to the same height , You can center the contents of the element vertically

  8. Text modification :text-decoration:none/underline/overline/line-through

explain :

  • none: No modification
  • underline: Add underline
  • overline: Add an overline
  • line-through: Add strikethrough
  1. All are font At the beginning ,font A short version of :

explain :font The attribute values of should be written in the following order ( The attributes are separated by spaces ) The order : font-style | font-weight | font-size / line-height | font-family for example :font:bold italic 30px " Microsoft YaHei "

10. The first line indentation :{text-indent:value;} So what's the value ? If your font size is 12px, Want to empty two spaces , then text-indent:24px; Of course, you also find it annoying to calculate like this , Although not more than 100, There's a simpler way , Change units ,em ,1em=16px=100% If you want to leave two words blank , direct writing text-indent:2em; Yo ho ho ~

11. Space between words {letter-spacing:value;} Control the spacing of English letters and Chinese characters .( English letters and Chinese characters )

  1. Word spacing {word-spacing:value;} Control the spacing of English words .( Common in English words and spacing between words ,) It doesn't work for Chinese

List related styles

  1. Define list symbol styles :list-style-type:disc( Solid round )/circle( The hollow circle )/square( Solid block )/none( Remove list symbols );

  2. Define the location of list symbols :list-style-position:outside( outside )/inside( inside );

  3. Use pictures as list symbols :list-style-image:url( The path and full name of the image used );

Background related styles

  1. The background color grammar : Selector {background-color: Color value ;}

  2. Setting of background picture   grammar :background-image:url( The path and full name of the background image );

Understand the current picture format :

  • jpg: Lossy compression format , Reduce the size of the picture by losing the quality of the picture itself , Suitable for color rich images ;( Composed of pixels , The more pixels, the clearer )
  • gif: Lossy compression format , Reduce the size of the image by losing the number of colors in the image , Support transparency , Support animation , Suitable for images with a small number of colors ;
  • png: Lossy compression format , Lose the number of colors in the picture to reduce the size of the picture , Support transparency , Animation is not supported , yes fireworks Of Source file format , Suitable for images with a small number of colors ;
  • WebP It has been used a lot by major Internet companies WebP Format , Google (google) A kind of image format designed to speed up image loading is developed . The image compression volume is about JPEG Of 2/3, And can save a lot of server bandwidth resources and data space .Facebook Ebay And other well-known websites have begun to test and use WebP Format . but WebP It's a lossy compression . Comparison code JPEG file , Code the same quality WebP Files require more computing resources .

  3. Background picture tile properties grammar : Selector {background-repeat:no-repeat/repeat/repeat-x/repeat-y }

4. Fixation of background grammar : Selector {background-attachment:scroll( rolling )/fixed( Fix );}

5. The location of the background image grammar : Selector {background-position:left/center/right/ The number      top/center/bottom/ The number ;}

Two values : The first value represents the value of the horizontal position , Second value : Indicates the vertical position . When both values are center When writing a value, it can represent the horizontal position and vertical position . explain : To the right , The downward direction is negative

  1. Background attribute abbreviation :background: Property value 1    Property value 2   Property value 3;background:url( The path and full name of the background image ) no-repeat center top;

background The order of values is background-color,background-image,background-repeat,background-attachment,background-position

Background another important application scenario is : Sprite

background-position Properties are used very frequently , A large number of websites in order to reduce http Number of requests , Will combine a large number of pictures into a sprite picture (Sprite) To use . Sprite chart is used by controlling background-position Property value to determine the location of the picture rendering , I have to say that its role is very important , Of course, except in the scene where sprite is used , This attribute is often used in some other scenarios .

CSS3 The new content

  1. Attribute selector : grammar [att*=val] Property value contains val example :[class*=“div” ]`  intend class Attribute contains div character

grammar [att^=val] The attribute value is val Start example :[class^=“div” ]  intend class Attribute to div start grammar [att$=val] The attribute value is val ending example :[class$=“div” ]  intend class Attribute to div end

  1. Pseudo class selector :
  • Find the first li:first-child{  }
  • Find the last one li:last-child{  }
  • Find the... Under the same level n individual li:nth-child(n){  }
  • Reverse to find No n individual li:nth-last-child{  }
  • Find even number li:nth-child(even){  }
  • Find odd li:nth-child(odd){  }
  1. Pseudo element selector :
  • Use a style like the first line of text of the selected element p:first-line {   }
  • Use a style like the first character of the selection element p:first-letter {   }
  • Add a new element before selecting an element p:before{   }
  • Add a new element after selecting the element p:after{   }

To sum up : These are some basic and simple CSS Style and we CSS Selectors , With these selectors, we can better find the elements on the page , Through these, we can simply restore some small effects , How is it? Does it feel so complicated , Life goes up and down like this ... Don't worry , I can't help you anyway

copyright notice
author[Outlying islands 121],Please bring the original link to reprint, thank you.

Random recommended