le css est vraiment important pour le design d'une page . non pas pour just embellir la page mais en meme temp attirer la curiositer du visiteur. le choix des text, couleurs,images est vital pour un site web.
un design simple et concis fait la difference.
ce poste comporte la deuxime facon d'incorporer du css sur un site ou une page web.
ce le internal css.
<html>
<head>
<title>Text stylyng with css</title>
<style type="text/css">
body{
padding:100px;
font-family:helvetica;
}
h1{
color:purple;
}
span{
margin-left:100px;
}
a:link{
text-decoration:none;
color:orange;
}
a:hover{
text-decoration:underline;
color:red;
}
p{
color:maroon;
font-family: ;
}
div{
width:200px;height:200px;
float:left;
border:1px solid #ccc;
margin:2px;
padding:2px;
}
div:hover{
background-color:#fafafa;
}
input[type=submit]{
background-color:orange;
color:white;
}
</style>
</head>
<body>
<h1 >Philemon.com <span><a href="#1">About</a> | <a href="#2">contact</a> | <a href="#3">Blog</a></span></h1>
<br>
<p>Bienvenu sur mon site web cher visiteur<br>
sur ce site vous trouverez toutes les informations possible a mon propos<br>
ainsi que vous aurez la possibilite de me glisser un mot sur la rubrique contact<br>
en plus de cela je vous donne l'opportunites de discuter aisement <br>
avec d'autre membre de mon blog. Portez vous bien :)</p>
<div>
un contenu
</div>
<div>
une image
</div>
<div>
Login
<form>
Username:<input type="text" name="username" >
Password:<input type="text" name="password" >
<input type="submit" name="submit" value="login" >
</form>
</div>
</body>
</html>
constatez le fait que le css est toujour dans le head tag.
ReplyDeletecomme je vous l'ai dit pour donner du style a un element on le cible par son nom ensuite on definit son style. (body, a,div,p... meme input). ca s'appel css selector
si vous observer le body selector :on lui attribue la couleur du fond, et le type de fonte essayez de changer .helvetica par verdana,ou courier,ou sans-serif ou arial. il yen a plusieur.
on peut donner a toute une page une seule couleur et type de fonte dans le body selector.
on peut aussi decider de donner a chaque element en particulier sa couleur de fonte et son type.
observer le div selector: la bordure. et le p selector a sa propre couleur de fonte.
ensuite observez le h1 selector. sa propre couleur .et le span contenu dedans a un margin-left de 100px . qui signifie qu'il a besoin d'une espace de 100px a sa gauche.
duex termes se confondent souvent au debut... le margin et le padding.
le margin est la distance d'un element par rapport a l'element directement exterieur a lui .
le padding est l'espace interieur qu'on donne a un element par rapport a son contenu... le div selector l'illustre bien . changez la valeur du padding et margin pou experimenter.
ensuite le a selector.
retenez que chaque fois que vous verrez un selector suivit des deux point ca veu dire que ce qui vien appres est un attribut equivalent souvent a une action a ce selector. a:link a: hover ,div:hover permet le changement de couleur de fond quand la souris parcours le div.
observez aussi le input selector vous remarquerez une chose la je cible seulment les input qui on comme type submit. et je leur donne une couleur de fond orange.
vous pouvez changer le type=submit par type=text pour experimenter.
observez la marge que presente le corp du document c'est grace au padding:100px definit dans le body selector
ReplyDelete