css question and summary

Heard it for 13 years, i have gone through all of it, after 3 days. How many 3 days past, in the pasting 13 years?

Thanks to xiaoli.li, thanks to Xinshengdaxue.

2016.7.9

responsive website

1. use framework w3.css
2. use framework Bootstrap.
3. the temps are amazing .

@media

1. @media screen and (min-width: 480px) is often used.

flex

1. display:flex
2. justify-content:space-around/space-between is cool.
3. use flex to implementing the responsive website.

box-sizing

not really understand the meanin of box-sizing: border-box;. if this is true, what’s the meaning of padding ? margin?

CSS3 Multiple Columns

1. syntax: keyword?
2. frequent used methods?
3. amazing things?
4. questions?

too young to be used widely.

Button

1. 3 methods of button. <a> <input type="button" <button >
2. just one transition-duration: 0.4s; makes the :hover animatedly.
3. ul.breadcrumb li+li:before this is cool.

   filter

4. image filter, fucking amazing.

animation

1. keyframes hold the centain style of elements at certain times;
2. animation changes nothing, but show the process. what to do if change the property when animation finished.
3. :hover + transition:0.3 change the box-shadow animatedly.
4. in this example,, i don’t understand the transform:translate(-50%,-50%)

transition

1. the transition is nice and easily use in H5.

transform 2D / 3D

1. tanslate()
2. rotation(20deg)
3. transform: scale(2, 3);
4. a little silly of the parameter sequence of matrix() matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()):
5. rotateZ() and rotate() have the same effect.

   font

6. speficy the font used from net.

   @font-face {
      font-family: myFirstFont;
      src: url(sansation_light.woff);
   }

7. the bold font can be specified separately.

   @font-face {
      font-family: myFirstFont;
      src: url(sansation_bold.woff);
      font-weight: bold;
   }

word wrap

1. word-wrap:break-work;

   shadow!!

2. text-shadow: 0 0 3px #FF0000; red neon shadow

   gradient

3. to right to left to bottom left this syntax is cool.
4. linear-gradient + angle is confused for me??? 180deg equals to bottom.
5. the rainbowl!!! background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet);

   background image

6. center fixed is amazing.
7. background-origin+coutent-box/border-box/
8. background-clip+ coutent-box/border-box/
9. contain means stretching the image until the long side fits the viewport, short side is not cover all the space of course.
10. cover means stretching the image until the short side fits the viewport, long side is not all showed.

CSS3

1. CSS3 is latest. backward compatible.
2. eclipse corner 50px/15px what does it mean?
3. border-radius:25px

CSS counter

1. increase before use or after use, is the same effect. Because it’s an interpreted language.

   h2::before {
       content: "Section " counter(section) ": ";
       counter-increment: section;
   }

   h2::before {
       counter-increment: section;  
       content: "Section " counter(section) ": ";
   }

2. this example is confusing for me.

   li::before {
       counter-increment: section;
       content: counters(section,".") " ";
   }

CSS attribute selector

1. a[target] selects every <a>element which has target attribute.
2. a[target=_blank] the condition attribute has a value _blank
3. This is a example of lots of CSS @selectors.

4. *= and ~= the latter has the limit space-separated while the former is arbitary match.

5. the defaulted blue border of <input type="text"> looks really beautiful when correctly configured.

6. this animation is really cool.

    -webkit-transition: width 0.4s ease-in-out;
   transition: width 0.4s ease-in-out;

spirit

1. fucking easy!!! implement such a tech!!!!
2. to the right one, need add -47px,0 .

css tooltip

1. people are crazy. css draw a bubble via border-color:black transparent transparent transparent transparent . Then a arrow towards bottom is created.!!! Amazing~~~
2. border property type should not be bland. must be specified.
3. the content to generate the arrown should be empty "". I use " ", black transparent trick doesn’t work!!!
4. opacity: 0; transition: opacity 1s; works. But transition:visibility 1s does not work.

dropdown

1. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); is a CSS3 property. Giving shadows.
2. How to make a dropdown menu?

   Define dropdown and dropdownContent two classes. dropdown need to respond to :hoverstate, then dropdownContent set display:block to make the effect dropdown.

2016.7.8

dropdown

1. i can do dropdown btn;
2. who can explain this for me

   .dropdown:hover .dropdown-content  
   {
   
   }

It defines a css pseudo class：class dropdown with a state hover, then search the .dropdown-conten ‘s child.

1. what happen if descripe an element twice? seems no matter.
2. body{margin:0} hide the scroll bar white apperance.
3. how to implement a drop down menu in a navbar

   opaque/transparency

4. if div is somewhat transparent, the text in it still opaque. Of course not.

   pseudo element

5. really crazy. select the first line of p?? yes, that’s true. p::first-line{color:red;}
6. How to store every blog’s style?
7. this spicity can only be used on block element.
8. ::before, seems violates ghe style philosophy. because, it insert data.
9. selection is easily implemented.

pseudo class

1. pseudo class can be combined with class
2. hover and show hidden
3. p:first-child first p.
4. CSS Pseudo Elements is confused, cause there is no description.

CSS Combinators

1. descendant, not class relationship,but element contained in.
2. adjacent sibling is just look at the next, not the previous.
3. OK general sibling is next’ next, not the previous either.

align

1. inline-block is funny, it’s for convenient, and i don’t see any design philosophy.
2. inline-block can make 3 a looks like navigation bar.
3. the philosophy is 实用主义。
4. margin has an auto value.

float

1. for an horizonal list, display:inline has the same effect with float:left;
2. float+margin is cool and convenient than position+left/right.

position

1. static makes an element can’’t be adjusted by left, margin.
2. absolute is stupid, it’ relative to the nearest element.
3. element default position is relative, i think.
4. z-index is empty, exist in imagination.
5. z-index + position, can do the overlap.
6. overflow:auto means asking the browser to scroll it ? then what’s the difference?
7. cursor can be changed. just by cursor:crosshair
8. text-align have effect on all the elements, even it’s an image.
9. always declare the !DOCTYPE html

2016.7.7

1. selector of css can be element id
2. html elements can refer to more than one class, for example <div class="dropdown right"> div refers to two class, dropdown right.
3. css could use the fucking familiar slash + star things.
4. link rel=”stylesheet” type=”text/css” href=”mystyle.css”
5. background:red fixed right top url(“xx.jpg”); order seems not matter. but documets say order matters. color img repeat attachment position
6. border’s width color type could all be specified.
7. margin generates space around the elements.
8. margin collapse
9. powderblue is a nice color.
10. we practice our self to implements designs.
11. text-decoration often used to remove the underline of a link.
12. oh, text-indent is just first line??? oh, yeah, if all need indent, just set the parent element.
13. what’s the unit of line-height? unit of standard.
14. unicode-bidi + direction == multiple languages?
15. oblique is more slasher than italic.
16. font family variant small-cap
17. Do u know hot pink?
18. tr has an state it’s hover
19. overflow-x:auto; make a scroll table.
20. display:none; visibility:hidden are different;

2016.7.2

1. css start in style tag. css describes all the elements tags, that means
2. the same tag,has the same looks.
3. so it’s an convenient methods to control all the appearances of the html document.