Eszközök a webhelyen


css_nyelv

Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

Összehasonlító nézet linkje

css_nyelv [2017/10/02 19:30] (aktuális)
Sor 1: Sor 1:
 +[[munka|<​ Munka]]
 +
 +====== CSS nyelv ======
 +
 +===== Alapok =====
 +
 +==== A CSS tananyagról ====
 +
 +Minden rész tartalmaz egy megtanulandó anyagrészt,​ és minden rész végén
 +található egy kérdéssor.
 +
 +
 +==== CSS bevezetés ====
 +
 +
 +Feltétel a HTML/XHTML ismeret.
 +
 +  * A CSS a Cascading Style Sheets betűszavakból alkotott betűszó. ​
 +  * A CSS segítségével definiáljuk hogyan jelenjen meg egy HTML oldal
 +
 +==== A HTML kezdetben ====
 +
 +Kezdetben nincs CSS...
 +
 +
 +==== Szintaktika ====
 +
 +Példa:
 +<code html>
 +<DOCTYPE html>
 +<​html>​
 +<​head>​
 +
 +<​style>​
 +body {background-color:​orange;​}
 +h1   ​{color:​ red;}
 +p    {color:​navy;​}
 +</​style>​
 +
 +</​head>​
 +
 +<​body>​
 +
 +<​h1>​Fejezetcím</​h1>​
 +
 +<​p>​Bekezdés</​p> ​
 +
 +</​body>​
 +</​html>​
 +</​code>​
 +
 +
 +A CSS utasítások két részből állnak, egy szelektorból és egy deklarációból. ​
 +A szelektor megmondja milyen elemre vonatkozik a beállításunk,​ a deklaráció
 +leírja milyen beállításokat szeretnénk. ​
 +<​html>​
 +<​style>​
 +#sel {
 +  background-color:​ green;
 +  display: inline;
 +  padding: 10px;
 +  font-size: 32px;
 +  border-radius:​ 20px;
 +  color: white;
 +  font-family:​ sans;
 +}
 +</​style>​
 +<div id="​sel">​h1</​div>​
 +<div id="​sel">​{background-color:​ orange; color: blue;​}</​div>​
 +</​html>​
 +
 +Egy beállítás két részből áll. A **tulajdonság** és az **érték**. ​
 +
 +<​html>​
 +<​style>​
 +#sel {
 +  background-color:​ green;
 +  display: inline;
 +  padding: 10px;
 +  font-size: 32px;
 +  border-radius:​ 20px;
 +  color: white;
 +  font-family:​ sans;
 +}
 +</​style>​
 +<div id="​sel">​background-color:​ orange;</​div>​
 +</​html>​
 +
 +Minden tulajdonság után kettőspont jön, azt követi az érték, majd egy pontosvesszővel zárjuk. ​
 +
 +
 +Megjegyzések:​
 +
 +<code css>
 +/* Több 
 +        soros 
 +             ​megjegyzés */
 +h1 {
 +   ​color:​ navy;
 +/* Megjegyzés a beállítások között */
 +   ​background-color:​ white;
 +}
 +</​code>​
 +
 +==== A CSS azonosító és osztály ====
 +
 +
 +Az id ...
 +
 +Az class...
 +
 +
 +==== A CSS használata ====
 +
 +  * inline
 +  * internal
 +  * external
 +
 +
 +...
 +
 +===== CSS stílus =====
 +
 +==== Háttér ====
 +
 +
 +  * background-color
 +  * background-image
 +  * ...
 +
 +==== CSS szöveg ====
 +=== Szín ===
 +
 +A szöveg színét a color tulajdonsággal állítjuk.
 +
 +Három módon adhatunk meg színeket. ​
 +
 +  * hexadecimális RGB értékekkel:​ #0000ff
 +  * RGB kóddal: rgb(0,​0,​255)
 +  * a szín nevével: blue
 +
 +
 +Példák:
 +...
 +
 +
 +=== Igazítás ===
 +
 +Vízszintes igazítást a text-align tulajdonsággal adhatunk meg.
 +
 +<​code>​
 +h1 {text-align:​center;​}
 +p.date {text-align:​right;​}
 +p.main {text-align:​justify;​} ​
 +</​code>​
 +
 +
 +
 +=== Szövegdekoráció ===
 +
 +text-decoration
 +
 +<​code>​
 +h1 {text-decoration:​overline;​}
 +h2 {text-decoration:​line-through;​}
 +h3 {text-decoration:​underline;​}
 +h4 {text-decoration:​blink;​}
 +</​code>​
 +
 +
 +=== Szöveg átalakítása ===
 +
 +text-transform tulajdonság
 +
 +...
 +
 +kisbetűs-nagybetűs
 +
 +<​code>​
 +p.uppercase {text-transform:​uppercase;​}
 +p.lowercase {text-transform:​lowercase;​}
 +p.capitalize {text-transform:​capitalize;​}
 +</​code>​
 +
 +
 +
 +
 +=== Szöveg behúzása ===
 +
 +A bekezdés első sorának behúzása
 +
 +text-indentation
 +
 +<​code>​
 +p {text-indent:​60px;​}
 +</​code>​
 +
 +
 +
 +=== All CSS Text Properties ===
 +
 +Property Description
 +color Sets the color of text
 +direction Specifies the text direction/​writing direction
 +letter-spacing Increases or decreases the space between characters in a text
 +line-height Sets the line height
 +text-align Specifies the horizontal alignment of text
 +text-decoration Specifies the decoration added to text
 +text-indent Specifies the indentation of the first line in a text-block
 +text-shadow Specifies the shadow effect added to text
 +text-transform Controls the capitalization of text
 +unicode-bidi  
 +vertical-align Sets the vertical alignment of an element
 +white-space Specifies how white-space inside an element is handled
 +word-spacing Increases or decreases the space between words in a text
 +
 +
 +==== CSS Fontok ====
 +
 +=== CSS Font családok ===
 +
 +
 +In CSS, there are two types of font family names:
 +
 +    generic family - a group of font families with a similar look (like "​Serif"​ or "​Monospace"​)
 +    font family - a specific font family (like "Times New Roman" or "​Arial"​)
 +
 +
 +
 +^  Elsődleges család ​ ^  Fontcsalád ​ ^  Leírás ​ ^
 +| Serif  |  Times New Roman \\ Georgia ​ | Serif fonts have small lines at the ends on some characters ​ |
 +| Sans-serif ​ |  Arial  \\ Verdana ​ | "​Sans"​ means without - these fonts do not have the lines at the ends of characters |
 +| Monospace ​ |  Courier New  \\ Lucida Console ​ | All monospace characters have the same width |
 +
 +
 +=== Font stílus ===
 +
 +<​code>​
 +p.normal {font-style:​normal;​}
 +p.italic {font-style:​italic;​}
 +p.oblique {font-style:​oblique;​}
 +</​code>​
 +
 +
 +=== Font méret ===
 +
 +<​code>​
 +h1 {font-size:​40px;​}
 +h2 {font-size:​30px;​}
 +p {font-size:​14px;​}
 +</​code>​
 +
 +
 +
 +=== All CSS Font Properties ===
 +
 +Property Description
 +font Sets all the font properties in one declaration
 +font-family Specifies the font family for text
 +font-size Specifies the font size of text
 +font-style Specifies the font style for text
 +font-variant Specifies whether or not a text should be displayed in a small-caps font
 +font-weight Specifies the weight of a font
 +
 +
 +==== Linkek stílusa ====
 +
 +
 +==== Listák stílusa ====
 +
 +
 +==== Táblázatok stílusa ====
 +
 +===== Dobozmodel =====
 +
 +==== Dobozmodell ====
 +
 +
 +==== Szegély ====
 +
 +
 +==== Körvonal ====
 +
 +
 +==== Margó ====
 +
 +
 +==== Belső margő ====
 +
 +
 +===== CSS haladó =====
 +
 +==== CSS csoportok/​beépített ====
 +
  
css_nyelv.txt · Utolsó módosítás: 2017/10/02 19:30 (külső szerkesztés)