Learn web development css初步

CSS 表示Cascading Style Sheets

CSS Basics takes you through what you need to get started.

Lke HTML, CSS is not really a programming language, it is not a markup language either - it is a style sheet language.that is, it lets you apply styles selectively to elments in HTML documents.

select all the paragraph elements on an HTML on page and turn the text within them red, you'd write this CSS.

p {
    color: red;
}

Selector

The HTML element name at the start of the rule set. It selects the element(s) to be styled (in this case, p elements). To style a different element, just change the selector.

Declaration

A single rule like color: red; specifying which of the element's properties you want to style.

Properties

Ways in which you can style a given HTML element. (In this case, color is a property of the p elements.) In CSS, you choose which properties you want to affect in your rule.

Property value

To the right of the property, after the colon, we have the property value, to choose one out of many possible appearances for a given property (there are many color values besides red).

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

选择多个元素

p,li,h1 {
  color: red;
}

它提供的css文件格式

html {
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
}


h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;  
  line-height: 2;
  letter-spacing: 1px;
}


html {
  background-color: #00539F;
}

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

h1 {
  margin: 0;
  padding: 20px 0;  
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

img {
  display: block;
  margin: 0 auto;
}

最终的显示效果。