CSS Handledning
Komma igång med CSS
Sök…
Anmärkningar
Stilar kan författas på flera sätt, vilket möjliggör olika grader av återanvändning och omfattning när de anges i ett käll-HTML-dokument. Externa stilsidor kan återanvändas i HTML-dokument. Inbyggda formatmallar gäller hela dokumentet där de anges. Inlineformat gäller bara för det enskilda HTML-elementet som de anges på.
versioner
Externt formatark
Ett externt CSS-formatmall kan tillämpas på valfritt antal HTML-dokument genom att placera ett <link> -element i varje HTML-dokument.
Attributet rel för <link> -taggen måste ställas in på "stylesheet" och href attributet till den relativa eller absoluta sökvägen till formatmallen. Även om användning av relativa URL-vägar generellt anses vara god praxis, kan absoluta vägar också användas. I HTML5 den type attribut kan uteslutas .
Det rekommenderas att <link> -taggen placeras i HTML-filens <head> -tagg så att stilarna laddas före elementen de formaterar. Annars kommer användare att se en blixt av ostylat innehåll .
Exempel
hello-world.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello world!</h1>
<p>I ♥ CSS</p>
</body>
</html>
style.css
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
Se till att du inkluderar rätt sökväg till din CSS-fil i href. Om CSS-filen finns i samma mapp som din HTML-fil krävs ingen sökväg (som exemplet ovan) men om den är sparad i en mapp, ange den så här href="foldername/style.css" .
<link rel="stylesheet" type="text/css" href="foldername/style.css">
Externa stilark anses vara det bästa sättet att hantera ditt CSS. Det finns ett mycket enkelt skäl till detta: när du hanterar en webbplats på, till exempel, 100 sidor, alla kontrollerade av ett enda stilark, och du vill ändra dina länkfärger från blått till grönt, är det mycket lättare att göra ändringen i din CSS-fil och låt ändringarna "kaskad" på alla 100 sidor än det är att gå in i 100 separata sidor och göra samma ändring 100 gånger. Återigen, om du vill ändra utseendet på din webbplats behöver du bara uppdatera den här filen.
Du kan ladda så många CSS-filer på din HTML-sida efter behov.
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">
CSS-regler tillämpas med vissa grundläggande regler, och ordning spelar ingen roll. Om du till exempel har en main.css-fil med en kod i den:
p.green { color: #00FF00; }
Alla dina stycken med den "gröna" klassen kommer att skrivas i ljusgrönt, men du kan åsidosätta detta med en annan .css-fil bara genom att inkludera den efter main.css. Du kan ha åsidosättande.css med följande kod följ main.css, till exempel:
p.green { color: #006600; }
Nu kommer alla dina stycken med den "gröna" klassen skrivas i mörkare grönt snarare än ljusgrönt.
Andra principer är tillämpliga, till exempel "viktiga" regel, specificitet och arv.
När någon först besöker din webbplats laddar webbläsaren HTML för den aktuella sidan plus den länkade CSS-filen. När de sedan navigerar till en annan sida behöver deras webbläsare bara ladda ner HTML: n på den sidan; CSS-filen är cache, så den behöver inte laddas ner igen. Eftersom webbläsare cachar det externa formatmallen laddas dina sidor snabbare.
Interna stilar
CSS inneslutet i <style></style> -taggar i ett HTML-dokument fungerar som ett externt formatmall, förutom att det lever i HTML-dokumentet som det format i stället för i en separat fil, och därför endast kan tillämpas på det dokument där det finns lever. Observera att detta element måste finnas i <head> -elementet för HTML-validering (även om det fungerar i alla aktuella webbläsare om det placeras i body ).
<head>
<style>
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>I ♥ CSS</p>
</body>
Inline Styles
Använd inlineformat för att tillämpa styling på ett specifikt element. Observera att detta inte är optimalt. Att upprätta stilregler i en <style> -tagg eller extern CSS-fil uppmuntras för att upprätthålla en åtskillnad mellan innehåll och presentation.
Inlineformat åsidosätter alla CSS i en <style> -tagg eller ett externt formatmall. Även om detta kan vara användbart under vissa omständigheter, minskar detta faktum ofta än inte projektets underhåll.
Stilarna i följande exempel gäller direkt på elementen som de är kopplade till.
<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>
Inline-stilar är i allmänhet det säkraste sättet att säkerställa renderingskompatibilitet mellan olika e-postklienter, program och enheter, men kan vara tidskrävande att skriva och lite utmanande att hantera.
CSS @importregel (en av CSS-regeln)
@Import CSS at-regel används för att importera stilregler från andra formatmallar. Dessa regler måste föregå alla andra typer av regler, utom @charset-regler; eftersom det inte är ett kapslat uttalande kan @import inte användas i villkorade gruppat-regler. @import .
Hur man använder @import
Du kan använda @import-regeln på följande sätt:
A. Med intern stil-tagg
<style>
@import url('/css/styles.css');
</style>
B. Med externt formatmall
Följande rad importerar en CSS-fil med namnet additional-styles.css i rotkatalogen till CSS-filen där den visas:
@import '/additional-styles.css';
Det är också möjligt att importera extern CSS. Ett vanligt fall är typsnittsfiler.
@import 'https://fonts.googleapis.com/css?family=Lato';
Ett valfritt andra argument till @import regeln är en lista med medieförfrågningar:
@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);
Ändra CSS med JavaScript
Ren JavaScript
Det är möjligt att lägga till, ta bort eller ändra CSS fastighetsvärden med JavaScript genom ett elements style egendom.
var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';
Observera att stilegenskaper benämns i lägre kamelstil. I exemplet ser du att css-egenskapen font-family fontFamily blir fontFamily i javascript.
Som ett alternativ till att arbeta direkt på element kan du skapa ett <style> eller <link> -element i JavaScript och lägga till det på <body> eller <head> i HTML-dokumentet.
jQuery
Att ändra CSS-egenskaper med jQuery är ännu enklare.
$('#element').css('margin', '5px');
Om du behöver ändra mer än en stilregel:
$('#element').css({
margin: "5px",
padding: "10px",
color: "black"
});
jQuery innehåller två sätt att ändra css-regler som har bindestreck i dem (dvs font-size ). Du kan sätta dem i citat eller kamell-stil namn på stilregeln.
$('.example-class').css({
"background-color": "blue",
fontSize: "10px"
});
Se även
Stylinglistor med CSS
Det finns tre olika egenskaper för styling av listobjekt: list-style-type , list-style-image och list-style-position , som bör deklareras i den ordningen. Standardvärdena är skivan, utanför respektive ingen. Varje fastighet kan redovisas separat, eller med hjälp av list-style stenografi egendom.
list-style-type definierar formen eller typen av punktpunkt som används för varje listobjekt.
Några av de acceptabla värdena för list-style-type :
- skiva
- cirkel
- fyrkant
- decimal
- lägre-roman
- övre-roman
- ingen
(För en uttömmande lista, se W3C-specifikationen wiki )
Om du vill använda fyrkantiga punktpunkter för varje listobjekt, till exempel, använder du följande egenskapsvärde-par:
li {
list-style-type: square;
}
Egenskapen listformat list-style-image avgör om listobjektikonen är inställd på en bild och accepterar ett värde på none eller en URL som pekar på en bild.
li {
list-style-image: url(images/bullet.png);
}
Egenskapen list-style-position definierar var listobjektmarkören ska placeras, och den accepterar ett av två värden: "inuti" eller "utanför".
li {
list-style-position: inside;
}