devwiki:css

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: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
 +