正文

Incorrect CSS

(2024-01-25 03:05:44) 下一个

1.

.class {
padding-left: 3px;
margin-right: 6px;
padding-top: 10px;
padding-right: 9px;
margin-left: 6px;
background-image: url('images/happy.jpg');
background-position: bottom;
background-repeat: repeat-x;
background-color: #E2CCCC;
}
-------------------------------
CSS Shorthand is used to turn many CSS properties into one to make the file size smaller 
and a cleaner document.  The above should be:

.class {
padding: 10px 9px 0 3px;
margin: 0 6px;
background: url('images/happy.jpg') repeat-x #E2CCCC bottom;

2.
  
a {color: #FF0;}
a:visited {color: #F00;}

<a name="myAnchor">don't like linking here</a>
<a name="myAnchor1" href="#">do like linking here</a>
-------------------------------------------
Users don't like linking to myAnchor, so should use pseudo-class :link:
a:link {color: #FF0;}

3.

p:first-child {font-weight: bold;}

<div>
<p>Hello</p>
<p>Here I need font-weight bold</p>
</div>
-------------------------------------------
The common error is to assume that a selector like p:first-child will select the first child of a p element.
p:first-child means p as first-child.
(IE6 doesn't support :first-child)

4.

body {font-size: 12px;}
h1 {font: bold italic 1.2/200% sans-serif; }

<body>
       <h1>Welcome</h1>
</body>
------------------------------------------
The common error is to put line-height (1.2) before font-size (200%). Should be
h1 {font: bold italic 200%/1.2 sans-serif; }

5.

body {font-size: 10px;}
div {line-height: 1em; }  /* computed value */
p {font-size: 20px;}

<div>
<p>The computed line-height value of 10px was inherited by the paragraph from its parent div. 
This paragraph's font-size is 20px.  This may cause the lines of text to overlap each other.
</p>
</div>
--------------------------------------------
The computed line-height value of 10px was inherited by the paragraph from its parent div. 
This paragraph's font-size is 20px.  This may cause the lineof text to overlap each other.
Setting it a scaling factor will fix this problem because the scaling factor is an inherited value: 

div {line-height: 1; } /* inherited value */

It's better to set line-height using scaling factor in most cases.

6.

<p>This paragraph has &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;many &nbsp;&nbsp;&nbsp;&nbsp;spaces in it.</p>
------------------------------------
Should use:
p {white-space: pre;}
<p>This paragraph has       many     spaces in it.</p>

Or:
<pre>This paragraph has       many     spaces in it.</pre>

7.

<a href="http://www.mysite.com" style="display: block>
<p style="display: inline;">change display to be inline inside anchor</p>
</a>
---------------------------------------
A link cannot be wrapped around a paragraph.

8. 

You can t simply use { float: center; } to achieve that centered effect on block-level elements. 
You need to use
{ margin: 0 auto; }

9.

Inline Styles (Embedded CSS)   this would be a fast way to add CSS to your HTML documents, 
by adding your styles directly into your HTML tags. (i.e. <h1 style= color: #F00; >Welcome!</h1>)

But, It doesn't separate content from presentation; It causes more maintenance headaches;
It makes your pages bigger.

10.

#selector { margin: 20px 0px; }
---------------------------------------
There s no need to include the px after 0.

11.

{ color: red; }
-----------------------------------
You should make sure it s the same color displayed across all browsers. 
Use Hexadecimal Instead of Color Names.

12.

#selector {
  font-family: Helvetica;
}
----------------------------------
Not Providing Fallback Fonts.  Should be:

#selector {
  font-family: Helvetica, Arial, sans-serif;
}

For background-image, we also need to specify a background-color (in case the image fails
 to load for some reason).

13.

div#nav ul.myList li a.navLink {
/* Styles go here */
}
---------------------------------------------------
Overly specific CSS selectors don't do anyone any good. They take the browser longer to run.
Should be

#nav li a {
/* Styles go here */
}

[ 打印 ]
阅读 ()评论 (0)
评论
目前还没有任何评论
登录后才可评论.