CSS cascading rules for html controls -


why css rules not cascade down automatically html controls input or select , style display of text in them?

for ex: have css class applied on body tag renders text in red. due cascading rules, text in html document rendered in red (unless overridden). if have textbox control in document, style not cascade textbox render text in in red.

could point me reference document talks that??

the reason default css styles determined browser.

  • input , select have default colors/sizes/padding etc.
  • most other elements use inherit color , size.
  • another example font-size of table fixed , not inherited default, , must overridden developer.

try example html:

<html>  <style type="text/css"> body { color:red; font-size:36px; } </style>  <body> hello <input type="text" value="test value"/> <table><tr><td>cell value</td></tr></table> </body> </html>

you see font-size , color not inherited input. also, cell value stayed @ default font size. add following css style block:

input { color:inherit; font-size:inherit; } table { font-size:inherit; }

you'll see inherit expected now.

what want use reset stylesheet. tables 1 element has default style attached isn't desirable many developers, , every browser might different. why many make use of reset css stylesheets. these stylesheets reset elements uniform sizes , 0 margins, padding, etc. more extreme others. see http://meyerweb.com/eric/tools/css/reset/ or google example.

since reset stylesheets don't make colors of input , select inherit (most developers don't want them inherit , instead want explicitly set size/color), should set them in stylesheet:

input, select { ... }

be careful * { ... } any purpose (as suggested other answer). breaks "cascading" part of css , cause rules not cascade expect in nested elements. if use * { color:red; } , have following html:

<h1 style="color:green;">hello <i>world</i></h1>

you end green hello , red world. (because <i> matches *. new element reset style red, , color no longer cascades @ all!)


Comments

Post a Comment

Popular posts from this blog

asp.net - repeatedly call AddImageUrl(url) to assemble pdf document -

i'm using abcpdf , i'm curious if can recursively call addimageurl() function assemble pdf document compile multiple urls? something like: int pagecount = 0; int theid = thedoc.addimageurl("http://stackoverflow.com/search?q=abcpdf+footer+page+x+out+of+", true, 0, true); //assemble document while (thedoc.chainable(theid)) { thedoc.page = thedoc.addpage(); theid = thedoc.addimagetochain(theid); } pagecount = thedoc.pagecount; console.writeline("1 document page count:" + pagecount); //flatten document (int = 1; <= pagecount; i++) { thedoc.pagenumber = i; thedoc.flatten(); } //now try again theid = thedoc.addimageurl("http://stackoverflow.com/questions/1980890/pdf-report-generation", true, 0, true); //assemble document while (thedoc.chainable(theid)) { thedoc.page = thedoc.addpage(); theid = thedoc.addimagetoc...
Read more

java - Android recognize cell phone with keyboard or not? -

in android app, want detect user's device if device has keyboard(like motorola milestone) , show corresponding user interface. guys know how that? ! regards justicepenny http://developer.android.com/reference/android/content/res/configuration.html public int keyboard the kind of keyboard attached device. 1 of: keyboard_nokeys, keyboard_qwerty, keyboard_12key. that's it!
Read more

iphone - How would you achieve a LED Scrolling effect? -

how achieve led scrolling effect example below? led sign - led ticker emulator iphone , ipad http://img.skitch.com/20101201-rsfh4p1bajb1wp94k466pdpiuj.preview.jpg sometimes remunerates comment in other posts :) have put code you, should implement font '8pin matrix' realistic feeling. uilabel *label; - (void)viewdidload { [super viewdidload]; label = [[uilabel alloc]initwithframe:cgrectmake(10, 50, 300, 20)]; label.font = [uifont fontwithname:@"courier-bold" size:16.0]; label.backgroundcolor = [uicolor blackcolor]; label.textcolor = [uicolor greencolor]; label.linebreakmode = uilinebreakmodecharacterwrap; // otherwise "…" label.text = @"this led text scrolled "; // blanks space between [self.view addsubview:label]; [nstimer scheduledtimerwithtimeinterval:0.12f target:self selector:@selector(scrolllabel) use...
Read more