Avant de commencer à écrire votre feuille de style, vous aurez envie de mettre en place la structure de base pour votre site web. Pour ce faire, copier et coller la structure suivante dans un document vide du Bloc:
&# 9-
&# 9-&# 9-Tutoriel CSS de base
&# 9-
&# 9-
&# 9-
&# 9- Une fois que vous avez copié et collé le texte, enregistrez le fichier en tant que "index.html" dans un nouveau dossier appelé "CSS Site." Lors de l'enregistrement, assurez-vous que le type de fichier est ".html".
Ouvrez un nouveau document dans votre éditeur de texte et au sommet, écrivez ce qui suit:
/ * Simple CSS Site
Maître Stylesheet
Auteur: Your Name Here
* /
Ce début de votre feuille de style déclare le titre de la feuille de style et de l'auteur. Bien que pas essentiel, il est une bonne pratique et devrait être inclus dans la partie supérieure de chaque fichier CSS.
Une fois que vous avez écrit le texte, enregistrez ce fichier en tant que "style.css" dans votre dossier étiqueté "CSS Site". Assurez-vous de changer le type de fichier à partir de ".html" à "Css". Ceci est absolument nécessaire, en tant que votre feuille de style ne fonctionnera pas correctement sans le "Css" l'extension.
Maintenant que vous avez vos documents HTML et CSS, vous devez les lier. Pour ce faire, ajoutez quelques espaces sous la ligne "
CSS Site Web de base" et d'écrire le texte suivant:Une fois que vous avez fait cela, votre feuille de style et de balisage seront liés. Vous pouvez maintenant commencer à construire votre site en utilisant le CSS.
La première chose que nous ferons avec CSS est de créer une mise en page de base. Dans votre "index.html" entre le
balises, écrivent ce qui suit:
&# 9-&# 9-
&# 9-&# 9-&# 9-
&# 9-&# 9-&# 9-
&# 9-&# 9-&# 9-
&# 9-&# 9-&# 9-
&# 9-&# 9-&# 9-
&# 9-&# 9-
Ce code crée éléments appelés "DIV," qui est l'abréviation de divisions. Ces boîtes invisibles enveloppent le contenu de votre site. Avec votre feuille de style, vous pouvez dire à ces boîtes où apparaîtra sur la page.
Maintenant, nous allons faire quelques choses apparaissent. Dans votre feuille de style marqué style.css, écrivez ce qui suit ci-dessous votre déclaration:
body {
margin: 0
GO
padding: 0
GO
}
récipient {
largeur: 960px
GO
margin: auto
GO
}
tête {
background: # 000
GO
hauteur: 250px
GO
}
Nous avons ajouté beaucoup ici, donc nous allons briser ce que nous avons fait. Tout d'abord, nous avons fixé les frontières et le rembourrage de la fenêtre du navigateur à 0. Cela garantit que notre site est alignée avec la fenêtre du navigateur et ne pas ajouter l'espacement inutile.
Ensuite, nous avons donné notre div conteneur une largeur et mis sa marge à l'auto. Vous remarquerez que la DIV conteneur contient tous les éléments sur une page. En fixant la marge de l'automobile, nous disons à cette boîte et son contenu à centrer dans la fenêtre du navigateur. La largeur, 960px, raconte comment la boîte de large soit. Ceci peut être changé, cependant, garder à l'esprit que l'utilisateur moyen a une largeur de 1024px de l'écran.
Enfin, nous avons ajouté un peu de style à la tête DIV. Nous avons mis sa couleur de fond en noir (en utilisant le code hexadécimal # 000) et lui a donné une hauteur de 250px.
Lorsque vous visualisez votre "index.html" déposer dans un navigateur, vous devriez maintenant voir une boîte noire qui est 250px de hauteur et de niveau avec le haut de la fenêtre.
Ensuite, nous allons terminer coiffer le reste des boîtes de contenu. Ecrire la suivante dans votre fichier style.css:
column1 {
float: left
GO
clair: droite
GO
background: # 0099FF
GO
largeur: 480px
GO
hauteur: 350px
GO
}
column2 {
float: right
GO
background: # 999
GO
largeur: 480px
GO
hauteur: 350px
GO
}
footer {
clear: both
GO
background: # 555
GO
hauteur: 50px
GO
}
Vous remarquerez que, dans plus de changer l'arrière-plan de ces boîtes, nous avons également ajouté quelques éléments supplémentaires: flotteur, claire, et la largeur. L'élément flotteur raconte la boîte de quel côté aller. Dans cet exemple, nous disons la boîte de column1 de flotter ou de se déplacer vers la gauche et la boîte de column2 de flotter ou de se déplacer vers la droite. L'élément clair sur la première colonne, permet pour la deuxième boîte à comparaître directement à côté de lui. La propriété width ajouté à ces deux colonnes est de déterminer comment ils remplissent la boîte. Par défaut, (vide) flottaient boîtes ne seront pas afficher moins donné une largeur.
Maintenant que vous pouvez voir vos quatre boîtes, il est temps de commencer à ajouter et le style de notre contenu. Dans votre "Index.html" fichier, écrire ce qui suit:
1.) Entre le
tags, écrivent:Tutoriel CSS de base
.2.) Entre le
tags, écrivent:Ceci est un tutoriel de base sur l'utilisation de Cascading Style Sheets.
.3.) Entre le
tags, écrivent:Ce tutoriel a été créé par l'auteur et suivie par moi.
.4.) Entre le
tags, écrivent:&# 169- 200X moi. Tous droits réservés.
.Ce que nous avons fait est ajouté un texte à notre site qui est prêt pour le style. Maintenant, retournez à votre "style.css" dossier et nous allons le style de notre texte.
Avec votre "style.css" Ouvrir un fichier, écrire ce qui suit sous les propriétés existantes:
tête p {
font-family: Arial, Helvetica, sans-serif
GO
font-size: 30px
GO
text-align: top
GO
couleur: #fff
GO
text-transform: uppercase
GO
}
column1 p {
font-family: Arial, Helvetica, sans-serif
GO
font-size: 18px
GO
couleur: #fff
GO
text-transform: capitaliser
GO
}
column2 p {
font-family: Arial, Helvetica, sans-serif
GO
font-size: 18px
GO
couleur: #fff
GO
}
footer p {
font-family: Arial, Helvetica, sans-serif
GO
font-size: 14px
GO
couleur: #fff
GO
}
Nous avons fait beaucoup, nous allons donc jeter un oeil à ce qui a été ajouté. Tout d'abord, tout le texte a été donné trois propriétés similaires: font-family, font-size, et de couleur. La propriété font-family définit ce que la police le texte sera affiché dans. Font-size définit la taille du texte et la couleur définit la couleur. Une autre propriété ajouté à l'en-tête et de la colonne 1 texte est: text-transform. Cela vous permet de contrôler la capitalisation de votre texte. Pour l'en-tête, nous avons mis tout le texte en majuscules et dans la colonne 1, la première lettre de chaque mot est en majuscule.