astkhq.cc

Tēma

Biežāk izmantotās CSS īpašības ​

Šeit apkopotas biežāk lietotās CSS īpašības, kas palīdz stilizēt tekstu, tabulas, attēlus un konteinerus.

Teksta noformēšana ​

styles.css
css
p, a, h1, figcaption {
    /* Teksta izmērs */
    font-size: 12px;

    /* Fonts (burti) */
    font-family: Arial;

    /* Treknraksts  */
    font-weight: 800;

    /* Slīpraksts  */
    font-style: italic;

    /* Teksta krāsa (nosaukums vai HEX kods, piem. #2596be) */
    color: pink;

    /* Teksta izlīdzināšana: center, left, right, justify */
    text-align: center;

    /* Teksta dekorācija: overline, line-through, underline, overline underline */
    text-decoration: overline;

    /* Dekorācijas krāsa */
    text-decoration-color: red;

    /* Burtu reģistrs: uppercase, lowercase, capitalize */
    text-transform: uppercase;

    /* Atstarpe starp vārdiem */
    word-spacing: 10px;

    /* Rindu augstums */
    line-height: 1.8;
}

Papildu informācija:

CSS Text
https://www.w3schools.com/css/css_text.asp

Tabulu noformēšana ​

styles.css
css
table, th, td {
    /* Tabulas un šūnu apmales */
    border: 1px solid;

    /* Tabulas platums */
    width: 100%;
    
    /* Šūnu vai tabulas augstums */
    height: 70px;
}

Papildu informācija:

CSS Tables
https://www.w3schools.com/css/css_table.asp

Attēlu noformēšana ​

styles.css
css
img {
    /* Stūru noapaļošana */
    border-radius: 8px;

    /* Platums  */
    width: 150px;

    /* Augstums */
    height: 150px;
}

Papildu informācija:

CSS Styling Images
https://www.w3schools.com/css/css3_images.asp

Konteineru (piemēram, <div>) noformēšana ​

styles.css
css
div {
    /* Stūru noapaļošana */
    border-radius: 8px;

    /* Fona krāsa */
    background-color: pink;
    
    /* Fona attēls */
    background-image: url("paper.gif");
}