You will notice the benefits more on large tables. The reason this
makes tables load faster is because with traditional HTML, the browser
had to calculate every cell before finally rendering the table. When you
set the table-layout algorithm to fixed however, it only needs
to look at the first row before rendering the whole table. This means
that your table will need to have fixed column widths and row heights.
This will be used to make any particular color transparent and
usually it is used with images. You can use it with scrollbars
also.Following are the parameters which can be used in this filter:
This will be used to create a shadow of your object at the specified X (horizontal) and Y (vertical) offset and color.
. Following are the parameters which can be used in this filter:
Parameter
Description
color
The color, in #RRGGBB format, of the dropshadow.
offX
Number of pixels the drop shadow is offset from
the visual object, along the x-axis. Positive integers move the drop
shadow to the right, negative integers move the drop shadow to the left.
offY
Number of pixels the drop shadow is offset from
the visual object, along the y-axis. Positive integers move the drop
shadow down, negative integers move the drop shadow up.
positive
If true, all opaque pixels of the object have a
dropshadow. If false, all transparent pixels have a dropshadow. The
default is true.
This will be used to create a glow around the object. If it is a
transparent image then glow is created around the opaque pixels of it.
Following are the parameters which can be used in this filter:
This will be used to map the colors of the object to their opposite
value in the color spectrum ie. to create a negative image. Following
are the parameters which can be used in this filter:
Parameter
Description
Invert
Maps the colors of the object to their opposite value in the color spectrum.
This will be used to turn transparent pixels to a specified color and
makes opaque pixels transparent. Following are the parameters which can
be used in this filter:
This will be used to create an attenuated shadow in the direction and
color specified. This is a filter lies in between Dropshadow and a
Glow. Following are the parameters which can be used in this filter:
Parameter
Description
color
The color that you want the shadow to be.
direction
The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left).
0 = Top
45 = Top right
90 = Right
135 = Bottom right
180 = Bottom
225 = Bottom left
270 = Left
315 = Top left
Use this element to add special styles to the first line of the text in a selector.
:first-letter
Use this element to add special style to the first letter of the text in a selector.
:before
Use this element to insert some content before an element.
:after
Use this element to insert some content after an element.
The :first-line pseudo-element
Following is the example which demonstrates how to use :first-line element to add special effect to the first line of elements in the document .
<style type="text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
<p class="noline"> This line would not have any underline
because this belongs to nline class.</p>
<p>The first line of this paragraph will be underlined
as defined in the CSS rule above. Rest of the lines in this
paragraph will remain normal. This example shows how to use
:first-line pseduo element to give effect to the first line
of any HTML element.</p>
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
The :first-letter pseudo-element
Following is the example which demonstrates how to use :first-letter element to add special effect to the first letter of elements in the document .
<style type="text/css">
p:first-letter { font-size: 3em; text-color:red; }
p.normal:first-letter { font-size: 10px; }
</style>
<p class="normal"> First character of this paragraph will
be normal and will have font size 10 px;</p>
<p>The first character of this paragraph will be 3em big
and in red color as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example
shows how to use :first-letter pseduo element to give effect to
the first characters of any HTML element.</p>
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
The :before pseudo-element
Following is the example which demonstrates how to use :before element to add some content before any element .
<style type="text/css">
p:before
{
content: url(/images/bullet.gif)
}
</style>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
The :after pseudo-element
Following is the example which demonstrates how to use :after element to add some content after any element .
<style type="text/css">
p:after
{
content: url(/images/bullet.gif)
}
</style>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
Allows the content to overflow the borders of its containing element.
hidden
The content of the nested element is simply cut off at the border of the containing element and no scrollbars is visible.
scroll
The size of the containing element does not change, but the scrollbars are added to allow the user to scroll to see the content.
auto
The purpose is the same as scroll, but the scrollbar will be shown only if the content does overflow.
๋ค์ ์์ ๋ฅผ ๋ณด์ค๊น์.
<style type="text/css">
.scroll{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
<p>Example of scroll value:</p>
<div class="scroll">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.
</div>
The height and width properties allow you to set the
height and width for boxes. They can take values of a length, a
percentage, or the keyword auto.
๋ค์ ์์ ๋ฅผ ๋ณด์์ฃ .
<p style="width:400px; height:100px;border:1px solid red;
padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This paragraph is 400pixels wide and 100 pixels high
The line-height Property:
The line-height property allows you to increase the space
between lines of text. The value of the line-height property can be a
number, a length, or a percentage.
๋ค์ ์์ ๋ฅผ ๋ณด์์ฃ .
<p style="width:400px; height:100px;border:1px solid red;
padding:5px; margin:10px;line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high
and here line height is 30pixels.This paragraph is 400 pixels
wide and 100 pixels high and here line height is 30pixels.
</p>
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This paragraph is 400pixels wide and 100 pixels high
and here line height is 30pixels.This paragraph is 400 pixels
wide and 100 pixels high and here line height is 30pixels.
The max-height Property:
The max-height property allows you to specify maximum height
of a box. The value of the max-height property can be a number, a
length, or a percentage.
NOTE: This property does not work in either Netscape 7 or IE 6.
๋ค์ ์์ ๋ฅผ ๋ณด์์ฃ .
<p style="width:400px; max-height:10px;border:1px solid red;
padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
The min-height Property:
The min-height property allows you to specify minimum height
of a box. The value of the min-height property can be a number, a
length, or a percentage.
NOTE: This property does not work in either Netscape 7 or IE 6.
๋ค์ ์์ ๋ฅผ ๋ณด์์ฃ .
<p style="width:400px; min-height:200px;border:1px solid red;
padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
The max-width Property:
The max-width property allows you to specify maximum width of a
box. The value of the max-width property can be a number, a length, or a
percentage.
NOTE: This property does not work in either Netscape 7 or IE 6.
๋ค์ ์์ ๋ฅผ ๋ณด์์ฃ .
<p style="max-width:100px; height:200px;border:1px solid red;
padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
The min-width Property:
The min-width property allows you to specify minimum width of a
box. The value of the min-width property can be a number, a length, or a
percentage.
NOTE: This property does not work in either Netscape 7 or IE 6.
๋ค์ ์์ ๋ฅผ ๋ณด์์ฃ .
<p style="min-width:400px; height:100px;border:1px solid red;
padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
The outline-width property specifies the width of the outline to be added to the box. Its value should be a length or one of the values thin, medium, or thick . just like the border-width attribute
A width of zero pixels means no outline.
๋ค์ ์์ ๋ฅผ ํ๋ฒ ๋ณด์์ฃ .
<p style="outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />
<p style="outline-width:thick; outline-style:solid;">
This text is having thick outline.
</p>
<br />
<p style="outline-width:5px; outline-style:solid;">
This text is having 5x outline.
</p>
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This text is having thin outline.
This text is having thick outline.
This text is having 5x outline.
The outline-style Property:
The outline-style property specifies the style for the line
(solid, dotted, or dashed) that goes around an element. It can take one
of the following values:
none: No border. (Equivalent of outline-width:0;)
solid: Outline is a single solid line.
dotted: Outline is a series of dots.
dashed: Outline is a series of short lines.
double: Outline is two solid lines.
groove: Outline looks as though it is carved into the page.
ridge: Outline looks the opposite of groove.
inset: Outline makes the box look like it is embedded in the page.
outset: Outline makes the box look like it is coming out of the canvas.
hidden: Same as none.
๋ค์ ์์ ๋ฅผ ํ๋ฒ ๋ณด์์ฃ .
<p style="outline-width:thin; outline-style:solid;">
This text is having thin solid outline.
</p>
<br />
<p style="outline-width:thick; outline-style:dashed;">
This text is having thick dashed outline.
</p>
<br />
<p style="outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
</p>
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This text is having thin solid outline.
This text is having thick dashed outline.
This text is having 5x dotted outline.
The outline-color Property:
The outline-color property allows you to specify the color of
the outline. Its value should either be a color name, a hex color, or an
RGB value, as with the color and border-color properties.
๋ค์ ์์ ๋ฅผ ํ๋ฒ ๋ณด์์ฃ .
<p style="outline-width:thin; outline-style:solid;
outline-color:red">
This text is having thin solid red outline.
</p>
<br />
<p style="outline-width:thick; outline-style:dashed;
outline-color:#009900">
This text is having thick dashed green outline.
</p>
<br />
<p style="outline-width:5px;outline-style:dotted;
outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
</p>
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This text is having thin solid red outline.
This text is having thick dashed green outline.
This text is having 5x dotted blue outline.
The outline Property:
The outline property is a shorthand property that allows you
to specify values for any of the three properties discussed previously
in any order but in a single statement.
๋ค์ ์์ ๋ฅผ ํ๋ฒ ๋ณด์์ฃ .
<p style="outline:thin solid red;">
This text is having thin solid red outline.
</p>
<br />
<p style="outline:thick dashed #009900;">
This text is having thick dashed green outline.
</p>
<br />
<p style="outline:5px dotted rgb(13,33,232);">
This text is having 5x dotted blue outline.
</p>
๊ทธ๋ผ ์ด์ ๊ฐ ์์ฑ์ ๋ํ ์์ ๋ฅผ ๋ณด๋ฌ ๊ฐ ๋ด ์๋ค~~~ Go Go Go ~
The padding-bottom Property:
The padding-bottom property sets the bottom padding (space) of an element. This can take a value in terms of length of %.
๋ค์ ์์ ๋ฅผ ํ๋ฒ ๋ณผ๊น์.
<p style="padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style="padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This is a paragraph with a specified bottom padding
This is another paragraph with a specified bottom padding in percent
The padding-top Property:
The padding-top property sets the top padding (space) of an element. This can take a value in terms of length of %.
๋ค์ ์์ ํ๋ฒ ๋ณผ๊น์.
<p style="padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style="padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This is a paragraph with a specified top padding
This is another paragraph with a specified top padding in percent
The padding-left Property:
The padding-left property sets the left padding (space) of an element. This can take a value in terms of length of %.
๋ค์ ์์ ๋ฅผ ํ๋ฒ ๋ณผ๊น์.
<p style="padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style="padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This is a paragraph with a specified left padding
This is another paragraph with a specified left padding in percent
The padding-right Property:
The padding-right property sets the right padding (space) of an element. This can take a value in terms of length of %.
๋ค์ ์์ ๋ฅผ ํ๋ฒ ๋ณผ๊น์.
<p style="padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style="padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This is a paragraph with a specified right padding
This is another paragraph with a specified right padding in percent
The padding Property:
The padding property sets the left, right, top and bottom padding (space) of an element. This can take a value in terms of length of %.
๋ค์ ์์ ๋ฅผ ํ๋ฒ ๋ณผ๊น์.
<p style="padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style="padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right padding will be 2% of the total width of the document.
</p>
<p style="padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style="padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of the total width of
the document, bottom padding and top padding will be 10px
</p>
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
all four paddings will be 15px
top and bottom paddings will be 10px, left and right paddings will be 2% of the total width of the document.
top padding will be 10px, left and right padding will be 2% of the total width of the document, bottom padding will be 10px
top
padding will be 10px, right padding will be 2% of the total width of the
document, bottom padding and top padding will be 10px
If the text goes onto a second line, the text
will wrap underneath the marker. It will also appear indented to where
the text would have started if the list had a value of outside.
outside
If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).
<style type="text/css">
p {margin: 15px}
all four margins will be 15px
p {margin: 10px 2%}
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
p {margin: 10px 2% -10px}
top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px
p {margin: 10px 2% -10px auto}
top margin will be 10px, right margin will be 2% of the total width of
the document, bottom margin will be -10px, left margin will be set by
the browser
</style>
์์ ๋ฅผ ํ๋ฒ ๋ณด์์ฃ .
<p style="margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
<p style="margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
</p>
<p style="margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px
</p>
<p style="margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total width of
the document, bottom margin will be -10px, left margin will be set by
the browser
</p>
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
all four margins will be 10px
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px
top margin will be 10px, right margin will be 2% of the total width of
the document, bottom margin will be -10px, left margin will be set by
the browser
<style type="text/css">
p.example1{
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2{
border:1px solid;
border-color:#009900; /* Green */
}
</style>
<p class="example1">
This example is showing all borders in different colors.
</p>
<p class="example2">
This example is showing all borders in green color only.
</p>
<p style="border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style="border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style="border-width:4px; border-style:dashed;">
This is a dahsed border.
</p>
<p style="border-width:4px; border-style:double;">
This is a double border.
</p>
<p style="border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style="border-width:4px; border-style:ridge">
This is aridge border.
</p>
<p style="border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style="border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style="border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style="border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
<p style="border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style="border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style="border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style="border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style="border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style="border-bottom-width:4px;
border-top-width:10px;
border-left-width: 2px;
border-right-width:15px;
border-style:solid;">
This is a a border with four different width.
</p>
<style type="text/css">
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>
Following is the example which demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible value could be any color name in any valid format.
The height property of an image is used to set the height of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.
The width property of an image is used to set the width of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.
