css review

1. There’s a way to tell IE 8 to stop all this nonsense and just be IE 8.

<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

2 how to link a css style sheet

for html

<link rel=”stylesheet” type=”text/css” href=”css/global.css”>

for xhtml

<link rel=”stylesheet” type=”text/css” href=”css/global.css”/>

or

<style type=”text/css”>
@import url(css/global.css);
</style>

3. selector

1). class selector

.special {
color:#FF0000;
font-family:”Monotype Corsiva”;
}

2). id selector

#banner {
background: #CC0000;
height: 300px;
width: 720px;
}

3). group selector

h1, h2, h3, h4, h5, h6 { color: #F1CD33; }

4) pseudo selector

a:hover, a:visited , :before, :first-child, :focus

5) attribute selector

a[href=”http://www.cosmofarmer.com”]{ color:red; font-weight:bold; }

input[type=”text”]

4. what is css inheritance

CSS properties applied to
one tag are passed on to nested tags.

5. limits of inheritance

Many CSS properties don’t pass down to descen-dent tags at all. For example, theborderproperty (which lets you draw a box
around an element) isn’t inherited, and with good reason.

1) As a general rule, properties that affect the placement of elements on the page
or the margins, background colors, and borders of elements aren’t inherited.

2).

Web browsers use their own inherent styles to format various tags: Headings
are big and bold, links are blue, and so on. When you define a font-size for the
text on a page and apply it to the <body> tag, headings still appear larger than
paragraphs, and <h1> tags are still larger than <h2> tags. It’s the same when
you apply a font color to the <body>; the links on the page still appear in good
old-fashioned, web-browser blue.

6. cascading rule

1) nearest ancestor wins

2) The Directly Applied Style Wins

3). last style wins

6. what is em

em – percentage of bse text size. related to browser settings.

7. inline box vs block box

block box would have a break before or after this box. For ex, <p>

inline box won’t create a break, it will appear on the same line. like <span>, you can not give it a height, but you could give it a line-height.

when it comes to margins and padding, browsers treat inline boxes differently.
While you can add space to the left or right of an inline element using either left or
right padding or left or right margins, you can’t increase the height of the inline
element with top or bottom padding or margins.

8. what overflow does

When the content inside a styled tag is larger than the style’s defined width and
height, some weird things happen. you could use overflow to give it a scroll bar

overflow : visible; scroll; auto; hidden

9. what ‘float’ property does

Thefloatproperty moves an element to either the left or right.

In some
cases, this just means that the element moves to the left or right edge of the
browser window. However if you float an element that’s inside another tag with a
set width or position on a web page, then the float will go to the left or right edge
of that tag—the floated element’s “container.”

You can even use thefloatproperty with an inline element, such as the <img> tag.
In fact, floating a photo to the left or right using CSS is a very common use of the
float property. A web browser treats a floated inline element just like a block-level
element, so you don’t run into the problems with padding and margin that nor-mally trouble inline elements

10. how to remove ‘float’

clear : both; left; right; none;

11. background image

body {
background-image: url(bg_page.jpg);
background-repeat: no-repeat;
background-position: center center;
}

12 some list related css style

1). vertical navigation bar

Display the link as a block

ul.nav a {
display: block;
}

2) horizontal navigation bar

Display the link as inline

ul.nav li { display: inline; }

then

Adding a left float to the <li> tags removes them from the normal top-down
flow of elements:

ul.nav li { float: left; }

Links are inlin elements, so width values (as well as top and bottom padding
and margins) don’t apply to them. Making a browser display the links as block
elements lets you set an exact width for the button and add a comfortable
amount of white space above and below each link:

ul.nav a { display: block; }

 

12. web page layout

1). Fixed Width

2).Liquid.Sometimes it’s easier to roll with the tide instead of fighting it. A liquid
design adjusts to fit the browser’s width—whatever it may be.

3). Elastic An elastic design is really just a fixed-width design with a twist—type
size flexibility.

At this point in the evolution of CSS, layout comes in two flavors—floatsandabsolute
positioning.

Advertisements
This entry was posted in Uncategorized and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s