CSS (Cascading Style Sheets - ) , . CSS , (HTML) (CSS). , . CSS , : , , , .
CSS HTML , , -, HTML . .
CSS - HTML XHTML, XML.
CSS HTML- :
(inline styles) style. HTML style . :
<p style="font-size: 21px; color: green;"></p>
<span style="color:red; background-color:yellow;
font-variant:small-caps"> ,
.</span>
, h, body.
, CSS.
HTML (embedded style sheet) style. CSS- style. <style> HTML- <head> </head> HTML-:
<head>
<style type="text/css">
<! -->
</style>
</head>
. , .CSS, style.css. <link>, <head>.
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
, CSS. - , .
- @import. HTML- <link> @import CSS style:
<head>
<style type=text/css>
@import "style.css";
</style>
</head>
@import . @import URL , . - , .
|
|
|
. , :
h1{ color: red } /* color is red */
, . . , , .
Selector{ Property1: value1 value2; Property2: value3 value4; Property3: value5 value6;} CSS ( HTML), , , , .. , . .
HTML,
html {color: black;}
p {color: red;}
h2 {font-size: 110 %;}
, h1:
<html>
<head>
<style type=text/css>
h1 {font-weight:bold; color:red;}
</style>
</head>
<body>
<h1> </h1>
</body>
<html>
CSS, HTML, body html.
<DOCTYPE html>
<html>
<head>
<title> css, HTML </title>
<style type="text/css">
<!-- body { color: gold; background: blue; font: bold 14px comic sans ms; text-align: justify; margin: 10px; } -->
html {color: black; }
p {color: red;}
h1{font-family: arial; font-weight: bold; font-size: 14pt; color:green;}
h2{font-family: arial; font-size: 110 %; color:black;}
</style>
Head
</head>
<body>
<h1> CSS - H1</h1>
<p>
CSS, HTML . <br>
head. body
</p>
<h2> CSS - H2</h2>
, : , <br> Comic Sans MS 14 <br> 10 .
</body>
</html>
, CSS <style> <!-- -->. , . . , , .
, : url().
. , :
h1, h2 {
font-family: arial
}
:
|
|
|
h1{font-weight:bold} h1 {font-size: 14pt}
:
h1 {font-weight: bold; font-size: 14pt;}
. , . , <p> , <b> :
<p style=color: red;> , <b> </b> .</p>
. <body>, .
, . : <body>, html, CSS , , .
CSS-
-, . . class: class="classname". :
.classname{}
:
<html>
<head>
<title> </title>
<style type="text/css">
html{color:green;}
.font1 {
color: yellow;
background: red;
}
.font2 {
color: blue;
background: yellow;
}
</style>
</head>
<body>
<span class="font1"> </span>
<span class="font2"> </span>
HTML
<table class="font2" border="2">
<tr>
<td> 1 </td>
<td> 2</td>
</tr>
</table>
</body>
</html>
font1 font2 . <span>. , , , . , font2 :
<table class="font2">
.select{color:red;}
, , . . , .
.select{ font-size: 9pt; color:green }
, :
<p class=select> </p>
, , :
_._ {}
, , , , . :
p.small { font-size: 9pt; }
<p class=small> small</p>
, , . select <span>:
<html>
<head>
<title> </title>
<style type="text/css">
span.select {color: red;}
</style>
</head>
<body>
<span class="select"> .</span>
</body>
</html>
|
|
|
class - , . :
<p class=urgent warning>! !</p>
, class urgent warning, :
.warning.urgent {font-style: italic;}
2 , , , .
? :
<p class="big">-</p>
<td class="big">-</td>
<div class="big">-</div>
<span class="big">-</span>
<div> <span>, , ( , <p>). , , <p>, .
, . :
p, td { font-size: 9pt; color:green;}
(ID-)
ID- -. ID- #:
#green {color: green;}
HTML , , id:
<p id=green>Text</p>.
# . . HTML- !
? , , . , , .
div, span link
<span> <div> , class id. <span> . , CSS, <span> .
<p> , </p>
<p> , <span class="benefit"></span>,
<span class="benefit"></span> </p>
span.benefit {
color:red;
}
. <span>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> SPAN</title>
<style type="text/css">
BODY {
font-family: Arial, sans-serif; /* */
}
.letter {
color: red; /* */
font-size: 200%; /* */
font-family: serif; /* */
position: relative; /* */
top: 5px; /* */
}
</style>
</head>
<body>
<p><span class="letter"></span> .
. .</p>
<p> </p>
</body>
</html>
<span> , <div> -. - , :
|
|
|
#democrats {
background:blue;
}
#republicans {
background:red;
}
<div id="democrats">
<ul>
<li> . </li>
<li> . </li>
<li> </li>
</ul>
</div>
<div id="republicans">
<ul>
<li> </li>
<li> </li>
<li> . </li>
</ul>
</div>
link HTML CSS :
<link rel="stylesheet" href="/s.css" type="text/css" media="all" />
link , -, . . , , head link, .
<head>
<link rel="start" href="/" />
<link rel="search" href="/Search/" />
<link rel="author" href="/About/" />
</head>
().
