CSS?
(Cascading Style Sheets, CSS) , . HTML , .
, . : , , , , .
, .
-. , , : , , , . (inheritance), , , . , <div>, .
.
Cascading Style Sheets http://www.w3.org/Style/CSS/
(), . (. 1):
. 1. CSS
- (Selector). , . , .
- (Property). . : , , , ..
- (Value). , .
- (Declaration). .
- (Rule). ( + ).
, , , . :
[, [,...]] {: ;}
, .
CSS
, HTML. :
- , 30px, () Serif, ( ) 14px:
2.
3. p {
4. text-align: justify;
5. text-indent: 30px;
6. font-family: Serif;
7. font-size: 14px;
|
|
8. }
<p>.
- :
10.h1, h2, h3 {
11. color: blue; /* , #0000FF */
12.}
- :
table, img {border: none;}
- :
li a {text-decoration: none;}
- (<div>), 10px :
16.div, th, td {
17. padding-left: 10px;
18. padding-right: 10px;
19. background-color: yellow;
20.}
- , , ( a:hover).
22.a {color: black; font-weight: bold;}
23.p a, li a {font-weight: normal; text-decoration: none;}
24.p a:hover, li a:hover {
25. color: #00FF00; text-decoration: underline;
26. }
CSS . , , : ?
, , . , :
p {margin-left: 0;}
p.warn {margin-left: 40px; color: #FF00;}
class :
<p class=warn> </p>
:
._ {}
, , .
:
:
.solid_blue {color: blue;}
:
<p class=solid_blue> </p>
<li class=solid_blue> </li>
:
h1.bigsans {font-family: Sans; font-size: 1.5em;}
h1.smallserif {font-family: Serif; font-size:.84em;}
:
<h1 class=bigsans>, </h1>
<h1 class=smallserif>, </h1>
, id. , , # (). :
div#content {
position: absolute;
top: 10px;
left: 10%;
right: 10%;
border: solid 1px silver;
}
...
<div id="content"></div>
, .
(grouping) . , . , :
div {
margin-left: 10px;
margin-top: 5px;
margin-right: 40px;
margin-bottom: 15px;
}
:
|
|
div {margin: 5px 40px 15px 10px;} /*: top right bottom left*/
.
, padding, font, border, background (. CSS)
-
HTML:
- (Inline). HTML.
- (Embedded). .
- (Linked External). , .
-. HTML style :
<p style="font: 12pt Courier"> 12 Courier</P>
:
<div style="font-family: Garamond; font-size: 18 pt;>"
18 Garamond.
<span style="color:#ff3300;">
.</span>
</div>
, -.
<style>, HTML- (<head>...</head>):
<html>
<head>
...
<style>
CSS
</style>
...
</head>
<body>
...
1.
(linked), (external) , . (, , .css). <link> , , :
<link rel=stylesheet href="sample.css" type="text/css">
, , , sample.css. , -, href .
. , , / . (, ), , .
-- HTML , , . . - , . , : -> ->
-
(, , , ..). , :
@media print {/* */
BODY { font-size: 10pt; }
}
@media screen { /* */
BODY { font-size: 12pt; }
}
@media screen, print {
BODY { line-height: 1.2; }
}
@media all {
|
|
BODY { margin: 1pt; }
}
, , @media, , , .
, <link>:
<link rel=stylesheet href="sample.css" type="text/css" media=screen >
CSS
.1 CSS .
1. CSS
background | [background-color || background-image || background-repeat || background-attachment || background-position] | inherit | |
background-color | <color> | transparent | inherit | |
background-image | <uri> | none | inherit | |
background-position | [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit | |
background-repeat | repeat | repeat-x | repeat-y | no-repeat | inherit | |
border | [ border-width || border-style || <color> ] | inherit | |
border-collapse | collapse | separate | inherit | / |
border-color | <color>{1,4} | transparent | inherit | |
border-style | <border-style>{1,4} | inherit | |
border-top border-right border-bottom border-left | [ border-top-width || border-style || <color> ] | inherit | |
border-width | <border-width>{1,4} | inherit | |
bottom | <length> | <percentage> | auto | inherit | |
clear | none | left | right | both | inherit | |
clip | <shape> | auto | inherit | |
color | <color> | inherit | |
cursor | [ [<uri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit | |
display | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit | |
empty-cells | show | hide | inherit | |
float | left | right | none | inherit | |
font | [ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit | |
font-family | [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit | |
font-size | <absolute-size> | <relative-size> | <length> | <percentage> | inherit | |
font-style | normal | italic | oblique | inherit | |
font-variant | normal | small-caps | inherit | |
font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | |
height | <length> | <percentage> | auto | inherit | |
left | <length> | <percentage> | auto | inherit | |
line-height | normal | <number> | <length> | <percentage> | inherit | |
list-style | [ list-style-type || list-style-position || list-style-image ] | inherit | |
margin | <margin-width>{1,4} | inherit | |
margin-top margin-right margin-bottom margin-left | <margin-width> | inherit | |
padding | <padding-width>{1,4} | inherit | |
padding-top padding-right padding-bottom padding-left | <padding-width> | inherit | |
position | static | relative | absolute | fixed | inherit | |
right | <length> | <percentage> | auto | inherit | |
text-align | left | right | center | justify | <string> | inherit | |
text-decoration | none | [ underline || overline || line-through || blink ] | inherit | |
text-indent | <length> | <percentage> | inherit | |
text-transform | capitalize | uppercase | lowercase | none | inherit | |
top | <length> | <percentage> | auto | inherit | |
vertical-align | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit | |
visibility | visible | hidden | collapse | inherit | |
white-space | normal | pre | nowrap | inherit | |
width | <length> | <percentage> | auto | inherit | |
z-index | auto | <integer> | inherit | Tab |
|
|