Apprendre le CSS: cours, tutoriels, selecteurs, ...

Écrit par Benske. Posted in Extras - Astuces

CSS Rounded Corners: Dreamweaver TutorialCSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à  décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. (Wikipedia)

Nous vous proposons des sites qui vous apprennent et cela tout à  fait gratuitement à  maîtriser le langage CSS pour embellir vos pages xHTML - HTML. Le meilleur, est le plus officiel va-t-on dire, et celui de W3C. Il est très facile à  comprendre. Le seul hic: c'est en anglais, mais je vous rassure, vous ne devez pas être un super doué en anglais pour comprendre.

Vous vous y connaissez déjà  en CSS mais vous n'avez pas trop d'imagination? Rien de plus normal. Pour ceci, je vous propose de visiter ces sites qui réunissent les plus beaux sites made in CSS. Il y a des chefs d'oeuvres!

CSS DESIGNS
http://www.cssimport.com/
http://cssmania.com/
http://www.unmatchedstyle.com/
http://www.webcreme.com/
http://www.csselite.com/

 

Voici tous les codes CSS possibles (source: W3C):

 

PropertyDescriptionCSS

backgroundSets all the background properties in one declaration1

background-attachmentSets whether a background image is fixed or scrolls with the rest of the page1

background-colorSets the background color of an element1

background-imageSets the background image for an element1

background-positionSets the starting position of a background image1

background-repeatSets how a background image will be repeated1

Border and Outline Properties

 

PropertyDescriptionCSS

border Sets all the border properties in one declaration1

border-bottomSets all the bottom border properties in one declaration1

border-bottom-colorSets the color of the bottom border2

border-bottom-styleSets the style of the bottom border2

border-bottom-widthSets the width of the bottom border1

border-colorSets the color of the four borders1

border-leftSets all the left border properties in one declaration1

border-left-colorSets the color of the left border2

border-left-styleSets the style of the left border2

border-left-widthSets the width of the left border1

border-rightSets all the right border properties in one declaration1

border-right-colorSets the color of the right border2

border-right-styleSets the style of the right border2

border-right-widthSets the width of the right border1

border-styleSets the style of the four borders1

border-topSets all the top border properties in one declaration1

border-top-colorSets the color of the top border2

border-top-styleSets the style of the top border2

border-top-widthSets the width of the top border1

border-widthSets the width of the four borders1

outlineSets all the outline properties in one declaration2

outline-colorSets the color of an outline2

outline-styleSets the style of an outline2

outline-widthSets the width of an outline2

Dimension Properties

 

PropertyDescriptionCSS

heightSets the height of an element1

max-heightSets the maximum height of an element2

max-widthSets the maximum width of an element2

min-heightSets the minimum height of an element2

min-widthSets the minimum width of an element2

widthSets the width of an element1

Font Properties

 

PropertyDescriptionCSS

font

Sets all the font properties in one declaration1

font-family

Specifies the font family for text1

font-size

Specifies the font size of text1

font-style

Specifies the font style for text1

font-variant

Specifies whether or not a text should be displayed in a small-caps font1

font-weight

Specifies the weight of a font1

Generated Content Properties

 

PropertyDescriptionCSS

contentUsed with the :before and :after pseudo-elements, to insert generated content2

counter-incrementIncrements one or more counters2

counter-resetCreates or resets one or more counters2

quotesSets the type of quotation marks for embedded quotations2

List Properties

 

PropertyDescriptionCSS

list-styleSets all the properties for a list in one declaration1

list-style-imageSpecifies an image as the list-item marker1

list-style-positionSpecifies where to place the list-item marker1

list-style-typeSpecifies the type of list-item marker1

Margin Properties

 

PropertyDescriptionCSS

marginSets all the margin properties in one declaration1

margin-bottomSets the bottom margin of an element1

margin-leftSets the left margin of an element1

margin-rightSets the right margin of an element1

margin-topSets the top margin of an element1

Padding Properties

 

PropertyDescriptionCSS

paddingSets all the padding properties in one declaration1

padding-bottomSets the bottom padding of an element1

padding-leftSets the left padding of an element1

padding-rightSets the right padding of an element1

padding-topSets the top padding of an element1

Positioning Properties

 

PropertyDescriptionCSS

bottomSets the bottom margin edge for a positioned box2

clearSpecifies which sides of an element where other floating elements are not allowed1

clipClips an absolutely positioned element2

cursorSpecifies the type of cursor to be displayed2

displaySpecifies the type of box an element should generate1

floatSpecifies whether or not a box should float1

leftSets the left margin edge for a positioned box2

overflow

Specifies what happens if content overflows an element's box2

positionSpecifies the type of positioning for an element2

rightSets the right margin edge for a positioned box2

topSets the top margin edge for a positioned box2

visibilitySpecifies whether or not an element is visible2

z-indexSets the stack order of an element2

Print Properties

 

PropertyDescriptionCSS

orphansSets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element2

page-break-afterSets the page-breaking behavior after an element2

page-break-before Sets the page-breaking behavior before an element2

page-break-insideSets the page-breaking behavior inside an element2

widowsSets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element2

Table Properties

 

PropertyDescriptionCSS

border-collapseSpecifies whether or not table borders should be collapsed2

border-spacingSpecifies the distance between the borders of adjacent cells2

caption-side Specifies the placement of a table caption 2

empty-cells Specifies whether or not to display borders and background on empty cells in a table 2

table-layout Sets the layout algorithm to be used for a table 2

Text Properties

 

PropertyDescriptionCSS

colorSets the color of text1

directionSpecifies the text direction/writing direction2

letter-spacingIncreases or decreases the space between characters in a text1

line-heightSets the line height1

text-alignSpecifies the horizontal alignment of text1

text-decorationSpecifies the decoration added to text1

text-indentSpecifies the indentation of the first line in a text-block1

text-shadowSpecifies the shadow effect added to text2

text-transformControls the capitalization of text1

unicode-bidi 2

vertical-alignSets the vertical alignment of an element1

white-spaceSpecifies how white-space inside an element is handled1

word-spacingIncreases or decreases the space between words in a text1

CSS Pseudo-classes/elements

 

PropertyDescriptionCSS

:activeAdds a style to an element that is activated1

:afterAdds content after an element2

:beforeAdds content before an element2

:first-childAdds a style to an element that is the first child of another element2

:first-letterAdds a style to the first character of a text1

:first-lineAdds a style to the first line of a text1

:focusAdds a style to an element that has keyboard input focus2

:hoverAdds a style to an element when you mouse over it1

:langAdds a style to an element with a specific lang attribute2

:linkAdds a style to an unvisited link1

:visitedAdds a style to a visited link1

 

Google+

Suivez Mess-Land sur Google+ et restez informé sur la musique, l'actualité, les sports et le multimédia.

Et Facebook

Articles similaires