Show pageOld revisionsBacklinksBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== 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:value1;attr2:value2;attr3:value3;} /* comment */ </code> * name type (selector type) * class : embed into any tag (must be started with ".") <code css> .myText{}</code> * tag : for html predefined tag (must be a html tag name) <code css>h1{} </code> * advanced : for id, pseudo-class selector (must begin with "#") <code css> a:link{}</code> Learn css property by demo: * [[http://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=none|display: inline; block; list-item; none;]] * display: none/inline/block/inline-block example: https://stackoverflow.com/questions/3099030/displayinline-vs-displayblock * 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://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet|reset CSS script?]] <code css> *{ margin:0; padding:0; border-width:0; } </code> - CSS with "[[https://addons.mozilla.org/en-us/firefox/addon/web-developer/|Web Developer Toolbar]]" ====== Example and ready-to-use ====== pre-defined color table in CSS: http://www.w3schools.com/cssref/css_colornames.asp ===== css override example ===== * clear background-color set by other css <code css> .main-header-bar { background-color: transparent !important ; } </code> ===== form style ===== * input style <code css> input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } /* class "in" special change overide */ input[type="text"].in { background-color:red; } /* under id "col-4", class "in" special change override*/ .col-4 input[type="text"].in { width: 150px !important; } input[type="button"] { width:120px; margin-left:35px; display:block; } </code> ===== table style ===== Here is a interactive style play tool: http://www.somacon.com/p141.php * border <code css>table, th, td { border: 1px solid black; } /* or */ table{ border-collapse:collapse; empty-cells:show; } td{ border-width: 1px; padding: 1px; border-style: inset; border-color: gray; } </code> ref: http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ * show empty cell <code css> table{ border-collapse:separate; empty-cells:show; } </code> ===== flex layout for elements ===== * https://css-tricks.com/almanac/properties/j/justify-content/ * https://www.w3docs.com/learn-css/the-ultimate-guide-to-flexbox.html * https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox * https://stackoverflow.com/questions/33192745/center-align-container-and-left-align-child-elements?noredirect=1&lq=1 * https://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items ===== Page Layout ===== * top bottom main + panel <code html> <head> <?php include("e_header.htm"); ?> <?php include("e_javascript.htm"); ?> </head> <body> <div id="wrap"> <div id="header"> <?php include("e_menu.htm"); ?> </div> <div id="main"> </div> <div id="sidebar"> </div> <div id="footer"> <? include("e_footer.htm"); ?> </div> </div> </body> </code> <code html> <link rel=StyleSheet href="style.css" type="text/css" media=screen> </code> <code css> body, html { margin:0; padding:0; color:#000; background:#FFFFFF; } p{ font-size:14px; } /* layout */ #wrap { width:750px; margin:0 auto; background:#FFF; } #header { padding:50px 10px; color:#FFF; background:#FFF; background-image:url('image/banner.png') ; background-repeat:no-repeat; background-position:right; } #main { float:left; width:480px; padding:10px; background:#fff; } #sidebar { float:right; width:210px;/*230*/ padding:10px; background:#fff; border-width:2px; border-style:solid; } #footer { clear:both; padding:5px 10px; background:#ddd; } #footer p { margin:0; } * html #footer { height:1px; } /* element */ h1 { margin:0; } h2 { margin:0 0 1em; } #nav { padding:5px 10px; background:#ddd; } #nav ul { margin:0; padding:0; list-style:none; } #nav li { display:inline; margin:0; padding:0; } /*My Style*/ TD{font-family: Arial; font-size: 8pt;} </code> ===== text background color bar strike through ===== * gradient method * gradient tool: https://cssgradient.io/ * <code> // gradient with half transparent way to half BG <p><span='colorHalfBG'>Text</span></p> span.colorHalfBG{ padding-left: 5px; padding-right: 5px; background: linear-gradient(0deg, rgba(241,90,34,1) 0%, rgba(241,90,34,1) 50%, rgba(241,90,34,0) 50%); } </code> * :before in absolute position to draw a block behind method * ref: https://codepen.io/OxyDesign/pen/eHAac * <code> .colorHalfBG:before { display: block; content:''; position:absolute; width:100%; bottom:0; left:0; background:#f66; z-index:-1; height:50%; } </code> ===== Real CSS tricks ===== * google doodle animation : http://devlup.com/javascript/jim-henson-puppetry-doodle-how-did-they-do/2574/ * map demo : http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/ ====== CSS template ====== **Table Style** * [[http://stefanoverna.com/blog/2009/01/create-astonishing-ical-like-calendars-with-jquery.html|iCal table style]] * [[http://www.duoh.com/csstutorials/csstables/|clean blue light style table]] ====== CSS3 ====== ===== css3 animation ===== * animation video 1-3: * https://www.youtube.com/watch?v=f1WMjDx4snI devwiki/css.txt Last modified: 2023/06/22 08:23by ying