Differences
This shows you the differences between two versions of the page.
Previous revision | |||
— | devwiki:css [2023/06/22 08:23] (current) – [flex layout for elements] ying | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== CSS integration ====== | ||
+ | * in head tag | ||
+ | * only usable in the single page containing the code | ||
+ | * inline | ||
+ | * external link file | ||
+ | * import | ||
+ | |||
+ | ====== CSS components ====== | ||
+ | * style | ||
+ | * placement | ||
+ | * cascading method | ||
+ | |||
+ | ====== CSS language structure ====== | ||
+ | |||
+ | terms and concepts | ||
+ | |||
+ | * syntax: <code css>Name {attr1: | ||
+ | /* comment */ | ||
+ | </ | ||
+ | * name type (selector type) | ||
+ | * class : embed into any tag (must be started with " | ||
+ | * tag : for html predefined tag (must be a html tag name) <code css>h1{} </ | ||
+ | * advanced : for id, pseudo-class selector (must begin with "#" | ||
+ | |||
+ | Learn css property by demo: | ||
+ | * [[http:// | ||
+ | * display: none/ | ||
+ | * examples of block level elements include: div, h1, p, and hr | ||
+ | * (takes the entire row(100%)of the screen ,it is always 100%of the screen size) | ||
+ | * examples of inline level elements include: a, span, strong, em, b, and i, canvas | ||
+ | ====== The Selectors ====== | ||
+ | - Class | ||
+ | * Easy to use and wide applicable | ||
+ | * use it when it will be applied very general | ||
+ | - tag | ||
+ | * redefine the default properties of html | ||
+ | - ID (pseudo-class) | ||
+ | * use it when it will be applied only to one element or one location, with special purpose; (like navigation bar, content area) | ||
+ | * for structure setup | ||
+ | |||
+ | ====== Benefit of CSS in external file ====== | ||
+ | * make editing separated and easy | ||
+ | * make it dynamically switchable | ||
+ | * make style reusable crossing multiple pages | ||
+ | |||
+ | ====== Common Question and Misunderstanding ====== | ||
+ | |||
+ | * Div Tag vs Table tag | ||
+ | * table are always aligned, and placed horizontally and vertically | ||
+ | * div can be positioned any where in the web with its attributes | ||
+ | |||
+ | |||
+ | |||
+ | ====== Advanced - CSS Workflow ====== | ||
+ | |||
+ | - [[http:// | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | border-width: | ||
+ | } | ||
+ | </ | ||
+ | - CSS with " | ||
+ | |||
+ | ====== Example and ready-to-use ====== | ||
+ | |||
+ | pre-defined color table in CSS: http:// | ||
+ | |||
+ | ===== css override example ===== | ||
+ | |||
+ | * clear background-color set by other css <code css> | ||
+ | .main-header-bar { | ||
+ | background-color: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== form style ===== | ||
+ | |||
+ | * input style <code css> | ||
+ | input[type=" | ||
+ | { | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | /* class " | ||
+ | input[type=" | ||
+ | background-color: | ||
+ | } | ||
+ | /* under id " | ||
+ | .col-4 input[type=" | ||
+ | width: 150px !important; | ||
+ | } | ||
+ | |||
+ | | ||
+ | { | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ===== table style ===== | ||
+ | |||
+ | Here is a interactive style play tool: http:// | ||
+ | |||
+ | * border <code css> | ||
+ | { | ||
+ | border: 1px solid black; | ||
+ | } | ||
+ | /* or */ | ||
+ | table{ | ||
+ | border-collapse: | ||
+ | empty-cells: | ||
+ | } | ||
+ | td{ | ||
+ | border-width: | ||
+ | padding: 1px; | ||
+ | border-style: | ||
+ | border-color: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ref: http:// | ||
+ | |||
+ | * show empty cell <code css> | ||
+ | table{ | ||
+ | border-collapse: | ||
+ | empty-cells: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== flex layout for elements ===== | ||
+ | |||
+ | * https:// | ||
+ | * https:// | ||
+ | * https:// | ||
+ | * https:// | ||
+ | * https:// | ||
+ | * https:// | ||
+ | |||
+ | ===== Page Layout ===== | ||
+ | |||
+ | * top bottom main + panel <code html> | ||
+ | < | ||
+ | <?php include(" | ||
+ | <?php include(" | ||
+ | </ | ||
+ | < | ||
+ | <div id=" | ||
+ | <div id=" | ||
+ | <?php include(" | ||
+ | </ | ||
+ | <div id=" | ||
+ | </ | ||
+ | <div id=" | ||
+ | </ | ||
+ | <div id=" | ||
+ | <? include(" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | <link rel=StyleSheet href=" | ||
+ | </ | ||
+ | body, | ||
+ | html { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | color:# | ||
+ | background:# | ||
+ | } | ||
+ | p{ | ||
+ | font-size: | ||
+ | } | ||
+ | |||
+ | /* layout */ | ||
+ | #wrap { | ||
+ | width: | ||
+ | margin:0 auto; | ||
+ | background:# | ||
+ | } | ||
+ | #header { | ||
+ | padding: | ||
+ | color:# | ||
+ | background:# | ||
+ | background-image: | ||
+ | background-repeat: | ||
+ | background-position: | ||
+ | } | ||
+ | #main { | ||
+ | float: | ||
+ | width: | ||
+ | padding: | ||
+ | background:# | ||
+ | } | ||
+ | #sidebar { | ||
+ | float: | ||
+ | width: | ||
+ | padding: | ||
+ | background:# | ||
+ | border-width: | ||
+ | border-style: | ||
+ | |||
+ | } | ||
+ | #footer { | ||
+ | clear: | ||
+ | padding: | ||
+ | background:# | ||
+ | } | ||
+ | #footer p { | ||
+ | margin:0; | ||
+ | } | ||
+ | * html #footer { | ||
+ | height: | ||
+ | } | ||
+ | |||
+ | /* element */ | ||
+ | h1 { | ||
+ | margin:0; | ||
+ | } | ||
+ | h2 { | ||
+ | margin:0 0 1em; | ||
+ | } | ||
+ | |||
+ | #nav { | ||
+ | padding: | ||
+ | background:# | ||
+ | } | ||
+ | #nav ul { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | list-style: | ||
+ | } | ||
+ | #nav li { | ||
+ | display: | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | /*My Style*/ | ||
+ | |||
+ | TD{font-family: | ||
+ | </ | ||
+ | |||
+ | ===== text background color bar strike through ===== | ||
+ | |||
+ | * gradient method | ||
+ | * gradient tool: https:// | ||
+ | * < | ||
+ | // gradient with half transparent way to half BG | ||
+ | < | ||
+ | span.colorHalfBG{ | ||
+ | padding-left: | ||
+ | padding-right: | ||
+ | background: linear-gradient(0deg, | ||
+ | } | ||
+ | </ | ||
+ | * :before in absolute position to draw a block behind method | ||
+ | * ref: https:// | ||
+ | * < | ||
+ | .colorHalfBG: | ||
+ | display: block; | ||
+ | content:''; | ||
+ | position: | ||
+ | width:100%; | ||
+ | bottom:0; | ||
+ | left:0; | ||
+ | background:# | ||
+ | z-index:-1; | ||
+ | height:50%; | ||
+ | } | ||
+ | </ | ||
+ | ===== Real CSS tricks ===== | ||
+ | |||
+ | * google doodle animation : http:// | ||
+ | * map demo : http:// | ||
+ | |||
+ | ====== CSS template ====== | ||
+ | |||
+ | **Table Style** | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | |||
+ | |||
+ | ====== CSS3 ====== | ||
+ | |||
+ | ===== css3 animation ===== | ||
+ | |||
+ | * animation video 1-3: | ||
+ | * https:// | ||
+ | |||