Du kan endda bruge min-bredde og maks-bredde for at begrænse den maksimale og minimale billedstørrelse!
Interesse. Værdier for regler i CSS - farver, funktionalitet og størrelser
Hej kære læsere af bloggen. I dag vil vi fortsætte samtalen om cascading style sheets (du kan finde materialer om dette emne i). Næsten ingen hjemmesider på internettet kan nu fungere uden denne teknologi, så det er lige så nødvendigt at lære opmærkningssproget som at studere).
Uden at forstå det grundlæggende i denne teknologi, vil du ikke være i stand til at klare dig selv mindre ændringer ind i din hjemmesideskabelon, og du vil blive tvunget til enten at affinde dig med det eller hyre tredjepartsspecialister. Hvis fx PHP er svært at lære, så vil HTML og CSS ikke være svære at mestre på brugerniveau. Under alle omstændigheder er det et forsøg værd, og så vil du se, at det løser sig selv.
Værdier for regler i CSS - farver, funktionalitet og størrelser
I den sidste artikel, vi talte om (stil og link). I dag vil vi fortsætte det emne, vi startede, og tale om nedarvning i styling og indstilling af skriftstørrelser (pixel, punkt, procent, osv.).
Generelt vil der ikke være noget kompliceret eller omfangsrigt i dag, men i den næste artikel vil vi begynde at se på vælgere - et ret omfangsrigt emne og sandsynligvis svært at mestre.
Så lad os se, hvor kan vi få oplysninger om cascading style sheets? Det ville nok være logisk at lede efter det hele på samme side, ja, eller straks gå til siden med den aktuelle CSS-specifikation. For at se alle de tilgængelige regler i denne specifikation skal du blot følge linket fra øverste menu berettiget " ejendomme" .
Værdierne for disse regler kan være nogle ord (for eksempel venstre, højre, centreret, retfærdiggøre osv.), som er kendt på forhånd og specificeret i tabellen fra denne specifikation (se figuren ovenfor - "Værdierne" kolonne). Værdier kan også blot være tal, der ikke har en dimension (for eksempel i ) eller en betegnelse (for eksempel #fff8dc).
Lad os se nærmere på indstilling af farver i CSS og hvordan dette kan implementeres:
Kan bruges som værdier for CSS-regler og såkaldte funktionaliteter. Et slående eksempel funktionaliteten er Url og indesluttet i parentes er url (images/navtabr.png). Derfor er det meget ofte specificeret i stilarter baggrundsbillede:
Nå, også i CSS meget ofte som værdier anvendte skriftstørrelser og andre ting. Hvis du husker, blev de simpelthen givet med tal fra 1 til 7. Og for eksempel blev størrelserne på billeder i attributterne blot givet ved tal uden dimensionsbetegnelse, selvom disse tal betød pixels.
Stilmarkering var oprindeligt beregnet til forskellige enheder output - ikke kun til skærme, men også for eksempel til formatering af information beregnet til udskrivning. Derfor er skriftstørrelser eller for eksempel indrykning altid specificeret i CSS med dimensionsenheder. Desuden indebærer syntaksen kontinuerlig skrivning af tal og dimensionsenheder (uden at tilføje mellemrum mellem dem).
I dette tilfælde er både relative og absolutte enheder. Absolutte er forbundet med den fysiske verden, og følgende enheder kan bruges til at angive dem:
Absolutte størrelser i CSS kan alle bruges til det samme tryk. Centimeter (cm) og millimeter (mm) er de grundlæggende enheder i det metriske system, og tommer (in) er den grundlæggende enhed, hvorfra punkter (pt) og picas (pc) ofte bruges i udskrivning.
En tomme (in) er derfor 25,4 millimeter (mm), og et punkt (pt) dannes ved at dele en tomme (in) i 72 dele. At. et punkt (pt) vil være lig med cirka en tredjedel af en millimeter (mm). Nå, en spade (pc) har en størrelse svarende til 12 point (pt). Her tror jeg, alt er klart.
Pixels, Em, Ex og procenter - relative størrelser i CSS
Så alle absolutte enheder bruges udelukkende til udskrivning. Men for at vise oplysninger på skærme skal du bruge dimensioner i relative enheder. Sagen er, at den fysiske størrelse af de prikker, der danner billeder på skærmen (de kaldes også pixels) kan variere afhængigt af typen og fysisk størrelse denne samme skærm.
Derudover kan du på enhver skærm indstille en anden opløsning end den fysiske (når pixlen er så lille, at den ikke kan skelnes), og det er muligt, at med en stor skærmdiagonal og lav opløsning, vil en pixel være synlig for det blotte øje. De der. En monitorpixel er en rent relativ værdi, og derfor bør der lægges vægt på at specificere dimensioner i relative termer.
Relative størrelser i CSS kan specificeres ved hjælp af følgende enheder:
Så lad os starte med pixels, som vi faktisk allerede har sagt alt om. De er relativ størrelse af den simple grund, at der ikke findes en sådan fysisk foranstaltning. En pixel vises på monitorskærmen som et resultat af, at videokortet behandler nogle signaler, og dens størrelse vil variere afhængigt af den anvendte skærm og afhængigt af installerede indstillinger(skærmopløsning).
Flere udspekulerede følger relative enheder skriftstørrelser brugt i CSS - Em og Ex. Først er standard skrifttypehøjden på brugerens computer, og Ex er højden af det store bogstav "x" i standardskrifttypen. Det er nok lidt uklart. Lad os se på dette lidt mere detaljeret.
Mange browsere accepterer Ex-værdien som halvdelen af Em-værdien (f.eks. IE). Hver skrifttype har en grundlinje, nogle store bogstaver og nogle specielle. små bogstaver der står for baseline(f.eks. "y"). Der er også bogstaver med diakritiske tegn, for eksempel "ё" og "й" på russisk eller nogle omlyd osv. Derfor skriftstørrelse (Em) bestemt af forlængelseselementer.
Nå, Ex er, som jeg allerede sagde, højden af det store (lille) bogstav "x" (x) i det latinske layout. Det er klart, at afhængigt af forholdet mellem små bogstaver og store bogstaver i en skrifttype kan disse Em- og Ex-værdier være relateret til hinanden på forskellige måder, snarere end blot Ex=Em/2.
Den relative størrelsesenhed Ex bruges ret sjældent i CSS; Em bruges mest (uden hensyntagen til pixels, som bruges til at angive størrelse endnu oftere). Men der er en anden måde at indstille relative størrelser på - interesse, dvs. det bliver nødt til at blive beregnet i forhold til noget.
Ikke alle CSS-regler kan specificeres med procenter. Selv på W3C-listen er dette fremhævet i en separat kolonne:
Hvis der ikke er skrevet noget ud for en regel i kolonnen "Procentsatser", så er brugen af procenter for denne regel ikke tilgængelig. For de samme stilregler, som er tilladt at bruge procentstørrelser, vil denne kolonne forklare, hvorfor dette kan bruges.
Nedarvning i CSS i henhold til specifikationen
Alle mulige værdier af reglerne og dem alle gyldige værdier beskrevet i denne specifikation og kendt på forhånd. Men der er en meget stor forskel fra HTML. Alle tilgængelige sprogtags hypertekstmarkering de understøttes og fortolkes ens i alle browsere, hvilket ikke er tilfældet med CSS.
Nogle stilegenskaber kan understøttes og fortolkes forskellige browsere anderledes. Desuden afhænger det både af browseren og dens version.
Lad os se på arv i CSS med eksempler for at forstærke materialet, så at sige. For at gøre dette, lad os skabe en slags rededukke fra tre Div-beholdere indlejret inde i hinanden og bruge dette eksempel til at se, hvordan nedarvning udføres for nogle regler og ikke for andre:
Så vi husker, at arv er tilladt for farvereglen, men ikke for baggrundsreglen. Derfor har vi følgende billede:
I det første element (ydre beholder) indstiller vi reglen "farve:rød" ved hjælp af stilattributten, som instruerer teksten, der er indesluttet i denne beholder, til at blive farvet rød. Fordi "Farve"-reglen understøtter nedarvning, hvilket betyder, at teksten i alle elementer indlejret i den ydre beholder også skal farves rød.
Det er faktisk det, der sker, med undtagelse af den inderste Div-beholder, som har sin egen "farve:blå" angivet. Naturligvis vil reglen, der er skrevet direkte til dette HTML-tag, have forrang frem for den, der er skrevet ind ydre element. Derfor vil teksten i den indre beholder være blå.
Selvom "baggrunds"-reglen ifølge CSS-specifikationen ikke understøtter nedarvning, er den... Den tredje Div-beholder er placeret inde i den anden, hvilket giver illusionen af at arve baggrundsfyldet. Men det er ikke sandt. Hvis du hypotetisk forsøger at flytte den indre beholder uden for den anden, så vil den ikke længere have en baggrund.
I den næste artikel vil vi begynde at gøre dette grundlæggende koncept V .
Held og lykke! Vi ses snart på bloggens sider
Du kan se flere videoer ved at gå til");">
Du kan være interesseret
Listestil (type, billede, position) - Css-regler for tilpasning udseende lister i HTML-kode 
Baggrund i CSS (farve, position, billede, gentagelse, vedhæftet fil) - alt for at indstille baggrundsfarven eller baggrundsbillede HTML-elementer
Prioriteter i Css og deres stigning på grund af Vigtigt, kombination og gruppering af vælgere, bruger- og forfatterstile 
Polstring, margin og kant - sat ind CSS intern Og marginer, samt rammer til alle sider (top, bund, venstre, højre) 
Højde, bredde og overløb - CSS regler at beskrive et indholdsområde i bloklayout 
Hvad er CSS til, hvordan forbinder man cascading style sheets til HTML-dokument og den grundlæggende syntaks for dette sprog
Procentnotation bruges normalt i tilfælde, hvor du skal ændre værdien i forhold til det overordnede element, eller når dimensionerne afhænger af ydre forhold. Så en tabelbredde på 100% betyder, at den tilpasser sig størrelsen på browservinduet og ændrer sig sammen med vinduesbredden.
Betegnelser
| Beskrivelse | Eksempel | |
|---|---|---|
| <тип> | Angiver typen af værdien. | <размер> |
| A && B | Værdierne skal udskrives i den angivne rækkefølge. | <размер> && <цвет> |
| A | B | Angiver, at du kun skal vælge én værdi blandt de foreslåede (A eller B). | normal | small-caps |
| A || B | Hver værdi kan bruges uafhængigt eller sammen med andre i vilkårlig rækkefølge. | bredde || tælle |
| Grupper værdier. | [ afgrøde || kryds ] | |
| * | Gentag nul eller flere gange. | [,<время>]* |
| + | Gentag en eller flere gange. | <число>+ |
| ? | Den angivne type, ord eller gruppe er valgfri. | indsat? |
| (A, B) | Gentag mindst A, men ikke mere end B gange. | <радиус>{1,4} |
| # | Gentag en eller flere gange adskilt af kommaer. | <время># |
Eksempel
| Tabel Indhold |
Specifikation
Hver specifikation gennemgår flere stadier af godkendelse.
- Anbefaling - Specifikationen er godkendt af W3C og anbefales som standard.
- Kandidatanbefaling ( Mulig anbefaling ) - den gruppe, der er ansvarlig for standarden, er overbevist om, at den opfylder sine mål, men kræver hjælp fra udviklingssamfundet til at implementere standarden.
- Foreslået anbefaling Foreslået anbefaling) - på dette stadium sendes dokumentet til W3C Advisory Council til endelig godkendelse.
- Working Draft - En mere moden version af et udkast, der er blevet diskuteret og ændret til gennemgang af fællesskabet.
- Redaktørens udkast ( Redaktionelt udkast) - et udkast til standarden efter ændringer blev foretaget af projektredaktørerne.
- Udkast ( Udkast til specifikation) - det første udkast til standarden.
Browsere
Følgende notationer bruges i browsertabellen.
- - Ejendommen er fuldt understøttet af browseren med alle gyldige værdier;
- - Ejendommen opfattes ikke af browseren og ignoreres;
- - kan forekomme under drift forskellige fejl, eller egenskaben er kun delvist understøttet, for eksempel er ikke alle gyldige værdier gyldige, eller egenskaben gælder ikke for alle elementer, der er specificeret i specifikationen.
Nummeret angiver den browserversion, hvorfra egenskaben understøttes.
En procentdel er en måleenhed for et element i forhold til dets indeholdende blok. Dette fungerer fantastisk til billeder: Her indstiller vi dimensionerne for billedet, hvis bredde altid er 50 % af beholderens bredde. Prøv at indsnævre dit browservindue for at se, hvad der sker!
artikel img ( flyder : højre ; bredde : 50 % ; )procent bredde layout
Du kan bruge en procentdel til at oprette en skabelon, men denne tilgang vil kræve mere arbejde. I dette eksempel begynder indholdet af nav-elementet at pakkes rundt på en ubehagelig måde, når browservinduet er for smalt. Det hele afhænger af, hvad der fungerer bedst med dit indhold.
nav ( float : venstre ; bredde : 25 % ; ) sektion ( margin-venstre : 25 % ; )
Når layoutet er for smalt, klemmes nav-elementet. Værre, du kan ikke bruge min-bredde på nav til at rette dette, fordi det ikke forhindrer højre kolonne i at bevæge sig fremad.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ud aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Heltal fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
13 / 19Det hævdes, at det overvældende antal brugere generelt kun ser internetmateriale, men ikke deltager aktivt i diskussionen (på fora, i online-fællesskaber osv.).
Definition
Ifølge denne regel, er andelen af internetbrugere, der skaber indhold, ikke mere end 1 % af de mennesker, der blot ser dette indhold. Så for eksempel, for hver person, der sender en besked på et forum, er der 99 personer, der ser det indlæg, men ikke reagerer på det.
Lignende mønstre
Én procent-reglen ligner Paretos lov (forholdet 80:20), som siger, at 20 % af teammedlemmerne udfører 80 % af arbejdet.
Skriv en anmeldelse om artiklen "The One Percent Rule"
Noter
Links
Uddrag, der beskriver én procent-reglen
- Se, Anisyushka, er strengene intakte eller noget på guitaren? Jeg har ikke taget det op i lang tid - det er ren march! forladt.Anisya Fedorovna gik villigt med sin lette slidbane for at udføre sin herres instruktioner og medbragte en guitar.
Onklen blæste støvet af uden at se på nogen, bankede på låget på guitaren med sine knoglede fingre, stemte den og justerede sig i stolen. Han tog (med en lidt teatralsk gestus, idet han placerede sin venstre hånds albue) guitaren over halsen og blinkede til Anisya Fedorovna, begyndte ikke Fruen, men slog en klangfuld, ren akkord og begyndte afmålt, roligt, men bestemt. at afslutte den berømte sang i et meget stille tempo: Poli og isbelægning. På samme tid, i takt med den beroligende glæde (den samme som hele Anisya Fedorovnas væsen åndede), begyndte sangens motiv at synge i Nikolai og Natasjas sjæle. Anisya Fedorovna rødmede og dækkede sig til med et lommetørklæde og forlod lokalet grinende. Onkel fortsatte med at afslutte sangen rent, flittigt og energisk og så med et ændret, inspireret blik på det sted, hvorfra Anisya Fedorovna var taget afsted. Der var bare en lille ting, der grinede i hans ansigt på den ene side, under hans grå overskæg, og han grinede især, når sangen skred videre, takten blev hurtigere, og noget gik af på steder, hvor det var for højt.
- Dejlig, dejlig, onkel; mere, mere,” skreg Natasha, så snart han var færdig. Hun sprang op fra sin plads, krammede sin onkel og kyssede ham. - Nikolenka, Nikolenka! - sagde hun og så tilbage på sin bror og som om hun spurgte ham: hvad er det her?
Nikolai kunne også rigtig godt lide sin onkels spil. Onklen spillede sangen for anden gang. Anisya Feodorovnas smilende ansigt dukkede igen op ved døren, og bag hende var der stadig andre ansigter... "Bag den kolde nøgle råber hun: pige, vent!" Onkel spillede, lavede endnu et behændigt træk, rev det af og bevægede sine skuldre.
"Nå, nå, min kære, onkel," stønnede Natasha med sådan en bedende stemme, som om hendes liv afhang af det. Onklen rejste sig, og det var, som om der var to mennesker i ham – den ene smilede alvorligt til den lystige fyr, og den glade fyr lavede en naiv og sirlig spøg inden dansen.
- Nå, niece! - råbte onklen og viftede med hånden mod Natasha og rev akkorden af.
Natasha smed halstørklædet, der var draperet over hende, løb foran sin onkel og lagde hænderne på hofterne, lavede en bevægelse med skuldrene og rejste sig.
Hvor, hvordan, hvornår sugede denne grevinde, opdraget af en fransk emigrant, ind i sig selv fra den russiske luft, som hun åndede, denne ånd, hvor fik hun disse teknikker fra, som pas de chale for længst burde være blevet fortrængt? Men disse ånder og teknikker var de samme, uforlignelige, ustuderede, russiske, som hendes onkel forventede af hende. Så snart hun rejste sig og smilede højtideligt, stolt og listigt af munterhed, gik den første frygt, der greb Nikolaj og alle tilstedeværende, frygten for, at hun ville gøre det forkerte, og de beundrede hende allerede. bordets krop er placeret. Kroppen består af rækker og kolonner. Tabellen udfyldes linje for linje.
Hvert mærke
Hvordan man laver en tabel i html
Lad os give et eksempel, html kode:
Eksempel tabel Kolonne 1 Kolonne 2
Vær opmærksom på cellen
Lad os nu se nærmere på alle tag-attributterne
| eller linjer | ||||||||||
| ... | ... |
...
2. Property background="URL" - indstiller baggrundsbilledet. I stedet for URL'en skal adressen på baggrundsbilledet skrives. Eksempel
Konverterer til følgende på siden: I eksemplet ovenfor er vores baggrundsbillede placeret i img-mappen (som er i samme mappe som html-siden), og billedet hedder fon.gif. Bemærk venligst, at i tagget tilføjede vi style="color:white;" . Da baggrunden er næsten sort, for at forhindre teksten i at blande sig i baggrunden, har vi lavet teksten hvid. 3. Egenskab bgcolor="color" - indstiller baggrundsfarven for tabellen. Du kan vælge enhver farve fra hele paletten (se koder og navne på html-farver) 4. Property border="number" - indstiller tykkelsen på bordrammen. I tidligere eksempler har vi specificeret border="1" , hvilket betyder, at kanttykkelsen er 1 pixel. 5. Egenskab bordercolor="color" - indstiller farven på kanten. Hvis border="0", vil der ikke være nogen kant, og kantfarven vil ikke have nogen betydning. 6. Egenskab cellpadding="nummer" - indrykning fra rammen til celleindholdet i pixels. 7. Egenskab cellspacing="number" - afstanden mellem celler i pixels. 8. Ejendom cols="number" - antal kolonner. Hvis du ikke indstiller det, vil browseren selv bestemme antallet af kolonner. Den eneste forskel er, at angivelse af denne parameter højst sandsynligt vil fremskynde indlæsningen af tabellen. 9. Property frame="parameter" - hvordan man viser grænser rundt om bordet. Kan tage følgende værdier:
10. Egenskab height="number" - indstiller højden på tabellen: enten i pixels eller i procenter. 11. Egenskabsregler="parameter" - hvor der skal vises grænser mellem celler. Kan tage følgende værdier:
|