CSS - HackMD

--- title: CSS tags: Web Directory description: Note for CSS --- {%hackmd U6g0skbVTIyVdJhvWCgo2Q %}  <style> #online-editor{ display: none; } #show-editor:hover #online-editor{ display: block; } </style> <aside> show online Edditor <iframe style="position: fixed; bottom: 0; right: 0; border: 5px outset aqua; width: 20%; height: 80%;" src="https://onecompiler.com/html" id="online-editor"></iframe> </aside> # Contents ### CSS Application to web - cascadiing order ### [Selectors](https://www.w3schools.com/css/css_selectors.asp) - Simple selector 1. `element` selectors 2. `class` selectors 3. `id` selectors 4. `grouping` selectors - Complex selector 1. `Combinators` selectors 1. `Pseudo-class` selectors 2. [`Pseudo-elements` selectors](https://www.w3schools.com/css/css_pseudo_elements.asp) 3. `Attribute` selectors ### Attributes - [Text](https://www.w3schools.com/css/css_text.asp) 1. color 2. others - Fonts 1. font 2. font-style 3. font-weight 4. font-size 5. font-family - [Background](https://www.w3schools.com/css/css_background.asp) 1. backgroud-color 2. background-image 3. background-position 4. background-repeat 5. background-attachment 6. `background` - [List](https://www.w3schools.com/css/css_list.asp) 1. list-style-type 2. list-style-image 3. list-style-position 4. list-syle -> shorthand - Table - border-collapse - Max-width and Min-width - improve viewable in small windows - Cursor - set different cursor style ### Box Model - padding - border - margin - outline and border ### Layout - Overflow - Float & Clear - Position # CSS Application to Web ## [Using CSS in HTML file](https://www.w3schools.com/css/css_howto.asp) - inside element ```htmlembedded= <sapn style="color:red;"></sapn> ``` - inside tag ```htmlembedded= <script> span#front-intro{ color:red; fonrt-size:2.5em; } </script> ``` - external CSS file - use `link` to apply ```htmlembedded= <link rel="stylesheet" href="styles/index.css"> ``` - use import in \<script> tag ```htmlembedded= <script> @import url(styles/index.css); @import "styles/index.css"; </script> ``` ## Cascading Order ```htmlembedded= <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> body {background-color: linen !important;} </style> </head> <body style="background-color: lavender"> <h1>Multiple Styles Will Cascade into One</h1> Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS. the order is: 1. Inline style (inside an HTML element) 2. External and internal style sheets (in the head section) 3. Browser default </body> </html> ``` > `!important` can break the order rule # Selectors ## Simple Selectors 1. `element` selectors -> use selector name 2. `class` selectors -> `.` 3. `id` selectors -> `#` 4. `grouping` selectors - select multiple eles at the same time ## Complex Selectors 1. `Combinators` selectors ```css= p.to-earth{ color: aqua; font-size: 1.2em; } ``` - combination two conditions together 2. [`Pseudo-class` selectors](https://www.w3schools.com/css/css_pseudo_classes.asp) 3. [`Pseudo-elements` selectors](https://www.w3schools.com/css/css_pseudo_elements.asp) 4. `Attrbute` selectors ### [`Pseudo-class` selectors](https://www.w3schools.com/css/css_pseudo_classes.asp) ```css= a:link { color: red; } a: visited { color: red; } ``` - associative with status of element - status 1. link 2. visited 3. hover 4. active ### [`Pseudo-elements` selectors](https://www.w3schools.com/css/css_pseudo_elements.asp) - associsate with specific part of a tag - `::after` & `::before` - can use to attach img to element ```css= p::after{ content: url(media/image/hello.png); } ``` - `::first-letter` - `::first-line` - `::marker` - select markers of list items - `::selection` ### Attrbute Selectors ```css= /*Select tag with specific attribute*/ a[target] { background-color: yellow; } /*Example*/ a[to_google] { background-color:aqua; font-size:24px; } a[to_google="yes"] { background-color:aqua; font-size:24px; } ``` > can also specify value of attribute ```htmlembedded= <a to_google="yes" href="https://www.google.com">Click Me to Google</a> ``` # Attributes - [Text](https://www.w3schools.com/css/css_text.asp) 1. color 2. others - [Fonts](https://www.w3schools.com/css/css_font.asp) 1. font -> shorthand 2. font-style 3. font-weight - 400: normal, 700: bold 4. font-size - px (pixel) - em (times of basic size: normal: 16px) - vw (view port) -> will follow the browser window 6. font-family - set font family like: 微軟正黑體 - [Background](https://www.w3schools.com/css/css_background.asp) 1. backgroud-color 2. background-image 3. background-position 4. background-repeat 5. background-attachment 6. `background` - [List](https://www.w3schools.com/css/css_list.asp) 1. list-style-type 2. list-style-image 3. list-style-position 4. list-syle -> shorthand - Table - border-collapse ## Text - `color`: can set text color - `text-decoration` - underline - overline - linethrough - Shadow and Blur - text-transform to uppercase ### Spacing ```css= p.small { line-height: 0.8; } /*Affect Spavce Between Letters*/ h1 { letter-spacing: 3px; } h2 { word-spacing: 2px; } /*specify the indentation of the first line of a text*/ p { text-indent: 20px; } ``` ## [Font](https://www.w3schools.com/css/css_font.asp) 1. font -> shorthand 2. font-style 3. font-weight - 400: normal, 700: bold 4. font-variant 4. font-size - px (pixel) - em (times of basic size: normal: 16px) - vw (view port) -> will follow the browser window 6. font-family - set font family like: 微軟正黑體 ### Font Style - can set `normal`, `italic` ```css= font-weight: bold; /*Actual: 700*/ font-weight: 400; ``` - can set font weight of text - 400: normal - 700: bold ```css= font-variant: small-caps; ``` - Small caps let lowercase to uppercase, but the text ony have half height. ### Font Size - `em` is good to use - can set base (ansector) text-size to apply `em` use ```css= html { font-size: 20px; } p { font-size: 1.5em; } ``` ## Background 1. backgroud-color 2. background-image ```css= background-image: url(test.png); ``` 4. background-position 5. background-repeat - repeat direction - default - x, y - no-repeat 6. background-attachment - `fixed` - `scroll` 7. `background` ### Use background image can easily replace and set image - Use background image can easily replace and set image - with pseudo-class selector can have more affective - example (a CSS file in hackMD) ```css= li.google-material-list-item::before{ content: ''; display: inline-block; height: 1em; width: 1em; background-color: aqua; background-image: url(https://drive.google.com/uc?export=download&id=1hlbDCCHXdWxSb2EM4qwdTxwMG3ppi-5v); background-size: 80%; background-repeat: no-repeat; background-position: bottom; margin-right: 10px; border-radius: 5px; } ``` ### Color - rgb - value ```#RRGGBB``` - fucntion ```rgb(0, 0, 255)``` - rgba - `a` -> alpha, transparent 0~1 - name ### Shorthand: use `background` ```css= body { background: #ffffff url("img_tree.png") no-repeat right top; } ``` - When using the shorthand property the order of the property values is: 1. background-color 2. background-image 3. background-repeat 4. background-attachment 5. background-position # Box Model ![](https://i.imgur.com/mCJgm8b.png) - Introduction - depict the view of element - affect actual width and height on view - Component - `content`: including text and image - `width` and `height` to set content aria - to calculate actual width and height, need to add border, margin and padding - `padding`: space between border - `border`: can set style and width aboudt border - `margin`: space between outside and inside - When using, making good use on **percentage**! ## Padding and Margin ```css= a { /*set order: top right left bottom*/ padding: 10px 20px 14px 12px; /* padding-top: 10px; * padding-right: 20px; * ... */ } ``` - set padding and margin - divided into four direction -> top, bottom, left, right - have shorthand property - `margin` - `padding` - if not actual set - top = bottom - left = right ## [Border](https://www.w3schools.com/css/css_border.asp) ```css= p.one { border-style: solid; border-width: 5px; } p.two { border-right-style: solid; border-left-style: dotted; border-width: 5px; border-radius: 10px; } /*Complex Example*/ #un-list, #or-list{ width: 500px; padding: 10px; border-width: 5px; border-radius: 10px; border-top-style: dotted; border-bottom-style: dotted; border-left-style: solid; border-right-style: solid; border-color: burlywood; } ``` - can set folowing - by sides - `style` - `color` - `width` - `border-radius` - shorthand: `border` ## Outline and Border ```css= outline: white dotted 5px; ``` - outline is outside the border - will be shown if we set outline attribute - shorthand: `outline` - Also, outline will show when element got **focused** # Layout ## [Position](https://www.w3schools.com/css/css_positioning.asp) <img src="https://i.imgur.com/hdZIt3A.jpg" style="width:50%; float: right; margin: 3%;" /> - Steps - set position `mode` - set `offset` - we usually put a container to include those element need to be positioned ### Position Offset - Mode need to work with offset to get proper position - Every offset work differently in different mode - Including - `top`, `bottom`, `left`, `right` <div style="clear: both"></div> ### Example ```css= div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; } ``` ### Position Mode 1. `static` - default, normal flow 2. `relative` - work as normal flow, can set offset 3. `absolute` - follow the first non-static ancestor to set offset 4. `fixed` - fixed position compared with viewport 5. `sticky` - `relative` + `fixed` - relative when positioned in showlable place, fixed when scrolled over it. ### Overlapping Order - with position setted, we can set `z-index` to decide overlapping order ## [Float & Clear](https://www.w3schools.com/css/css_float.asp) ### Float - Float can let elemet **floating** on its container - if the element taller than container, it needs clearfix ### Clear ```css= p { clear: both; } ``` - Clear can forbidden element floating - Use `pseudo-element` selector to apply ==clearfix== after `float` used. ## Display and Visibility ```css= p#import{ display: inline; } ``` - Both display and visibility can control visible of an element - `display`: will be hidden from page - `visibility`: space will be preserved in page ### `display` - none - invisible - block - inline - inline-block -> inline but width and height are settable ### `visibility` - visible - hidden # Reference - [Blog](https://blog.csdn.net/weixin_43331963/article/details/106784229) - [WSC -- CSS](https://www.w3schools.com/css/) ## use Google Matirial Icons ```htmlembedded= <head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body>  rawing </body> ```