Styling af elementer med CSS
Du kan med viden om CSS style forskellige elementers indhold. Det kan gøres globalt, på side og element niveau på bestemte elementers indhold. Der er en prioritering af styling, og den er som følger:
1. Systemets opsætning
Denne kan du justere i Design menuen, fx tekst, farver og størrelser i brugervenlig format. Det er ikke alt der kan justeres, så derfor nedenstående mere avancerede muligheder.
2. Den globale CSS opsætning
Justeres med CSS kode under Design menuen, og vil prioritere over punkt 1. Hvis du vil ændre noget på alle sider på en gang.
3. Den enkelte sides opsætning
Justeres med CSS kode under Sidens Egenskaber, og vil prioritere over punkt 2+1. Hvis du kun vil ændre noget på én side.
4. Elementets opsætning
Justeres med CSS kode der indsættes i en DIVs STYLE tag, der er indsat lige før indholdet, og vil prioriterer over punkt 1+2+3. Ikke alle elementer har deres egen CSS, følgende har:
- tekst-element
- grafik-element
- produkt-element
5. Tekstens opsætning
Justeres med CSS kode på tekst niveau. Det prioriteres over alle andre punkter. Bruges hvis man vil noget specielt med med fx enkelte ord som ikke kan lade sig gøre med de almindelige teksteffekter. Man skal bruge følgende:
Rotation er cirkulærtCODE =
< div class="fa-spin" style="width: 100%; font-size: 50px;" >
CODE /
[ center ][ orange ][ hrb2 ]Rotation er cirkulært[ hrb2 ][ /orange ][ /center ]
CODE =
< /div >
CODE /
3 af dem laver dette, lige oven i alt det andet:
Rotation er cirkulærtRotation er cirkulærtRotation er cirkulærtDer er altid en standard opsætning, punkt 1. Er der opsat noget i punkt 2 har det prioritet over punkt 1. Er der noget i punkt 3 har det prioritet over punkt 2+1. Punkt 4 har prioritet over punkt 3+2+1 hvis det har indhold. Punkter kan springes over således at noget i punkt 4 vil prioritere over punkt 1 hvis der ikke er indhold i punkt 2+3.
- Globalt.text-title{}
.text-subtitle{}
.text-content{}
Forklaring
Disse 3 skaleres af systemet så man ikke skal definere for alle responsive breakpoints. Man skal blot definere 1 størrelse, og resten udregnes. Dette virker generelt rigtig godt. Vil man manuelt definere tekst størrelser i alle breakpoints, kan det selvfølgelig gøres via CSS. - menu-element.menuelement-mainmenutitle{}
.menuelement-submenutitle{} - tekst-element.textelement-headline{}
.textelement[elementID]-headline{}
.textelement-content{}
.textelement[elementID]-content{}
.textelement-h0{}
Forklaring
textelement-headline - alle tekst elementers overskrift, hvis aktiveret.
textelement[elementID]-headline - et bestemt elements overskrift.
textelement-content - alle tekst elementers indhold.
textelement[elementID]-content - et bestemt tekst elements indhold.
textelement-h0 - tekster markeret med størrelsen h0 i tekst effekter.
textelement-h[n] - specifik styling af h0, h1, h2, h3, h4, h5, h6, h7, h8, h9. - fil-element.fileelement-container{}
.fileelement-file-container{}
.fileelement-counter{}
.fileelement-file-icon{}
.fileelement-filename{}
.fileelement-description{}
.fileelement-info{} - slideshow-element.slideshowelement-text-layer{}
- produkt-element.productelement-utilities-container-init{}
.productelement-search-container{}
.productelement-search-field{}
.productelement-search-button{}
.productelement-search-result{}
.productelement-selector-container{}
.productelement-selector-info{}
.productelement-selector-field{}
.productelement-tags-container{}
.productelement-tag-info{background:#aa8;color:#fff;}
.productelement-tag-info:before{border-left-color:#aa8;}
.productelement-tag a{background:#8a8;color:#fff;}
.productelement-tag a:before{border-right-color:#8a8;}
.productelement-tag a:hover{background:#8f8;}
.productelement-tag a:hover:before{border-right-color:#8f8;}
.productelement-product-container{}
.productelement-headline{}
.productelement-content{}
.productelement-price{}
.productelement-image{}
.productelement-gallery-image{}
.producttablehover{}
.productelement-button-buy{} før: button-addtobasket
.productelement-button-buy:hover{} før: button-addtobasket:hover - input-element.inputelement-container{}
.inputelement-description{}
.inputelement-input-container{}
.inputelement-input-headline{}
.inputelement-input-description{} - kurv-element.basketelement-container{}
.basket{}
.basket:hover{}
.basket i{}
.basket-table{}
.basket-table:hover{}
.basket-table tr:hover{}
.basket-table tr:nth-child(odd) {}
.basket-table i{}
.basket-table i:hover{}
.basket-table i[data-> .basket-table i:hover[data-> .basket-table i:hover[data-> .basket-product{}
.basket-product-item{}
.basket-product-item-price{}
.basket-product-price-total{}
.basket-headline{}
.basket-head-info{} - list bullet.u-list-bullet>li:before{color:red;} Sæt farven på bullet til rød.
- booking-element.bookingelement-container[elementID]{}
.bookingelement-calendar{}
.bookingelement-calendar-navigator{}
.bookingelement-calendar-monthname{}
.bookingelement-calendar-navigator-arrowleft a{}
.bookingelement-calendar-navigator-arrowleft a:hover{}
.bookingelement-calendar-navigator-arrowright a{}
.bookingelement-calendar-navigator-arrowright a:hover{}
.bookingelement-calendar-daynameblock{}
.bookingelement-calendar-dayname{}
.bookingelement-calendar-weekendname{}
.bookingelement-calendar-weekday{}
.bookingelement-calendar-weekday:focus{}
.bookingelement-calendar-weekday:hover{}
.bookingelement-calendar-weekdayoff{}
.bookingelement-calendar-weekdayoff:hover{}
.bookingelement-calendar-weekendcontainer{}
.bookingelement-calendar-weekend{}
.bookingelement-calendar-weekendoff{}
.bookingelement-calendar-weekendoff:hover{}
.bookingelement-calendar-weekend:focus{}
.bookingelement-calendar-weekend:hover{}
.bookingelement-calendar-week-number{}
.bookingelement-calendar-special-day{}
.bookingelement-calendar-indicate-today{}
.bookingelement-timeslot-month-day-number{}
.bookingelement-timeslot-header{}
.bookingelement-timeslot-blocks{}
.bookingelement-timeslot-hour{}
.bookingelement-timeslot{}
.bookingelement-timeslot-slice{}
.bookingelement-timeslot-slice:focus{}
.bookingelement-timeslot-slice:hover{}
.bookingelement-timeslot-minute-disabled{}
.bookingelement-thankyou{}
.bookingelement-thankyou-date{}
.bookingelement-thankyou-time{}
CONTENT NOT FOUND IN CACHE DB! Edit content and save.
3. maj 2024 03:31:54Eksempel på styling af ét elements overskrift
Herunder styles et bestemt tekst elements overskrift (nummer 42) med skrifttype fra Googles web fonts.
<link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet' type='text/css'>
<style>
#textelement-headline42{
font-family: 'Marcellus SC', sans-serif;
font-weight: 400;
font-size: 22px;
text-shadow: 0px 1px #00ffff;
}
</style>Kunde
Partner
Copyright ©2009-2024 WEB U. Alle rettigheder forbeholdes. Materialet på hjemmesiden må ikke gengives uden tilladelse, jævnfør lov om ophavsret.
WEB U er CMS delen af neoHYPIA
WEB U er CMS delen af neoHYPIA