css_基础教程

说到CSS就不得不提到div了，现在呀布面的布局结构不能想以前的那样用table排版了，如果还用table的话，那就太士了，你说是不是呀，现在晚了，明天继续我们web学习之路.希望大家支持黑侠客。
1、css的应用
      1、行内样式：如

sdfasfdasdf

      2、页面嵌入式：如   
      3、导入外部
2、css的选择器，属性和值
    HTML有标签，CSS有选择器。选择器是给内部和外部样式里面的样式命名。
　　每个选择器都有属性在{}里面，比如简单点像color,font-weight或background-color。
　　值在冒号（不是等号）后面，分号分离属性。如：

body {
    font-size: 0.8em;
    color: navy;
}
上面的意思是为body选择器设置font-size字体大小和color字体颜色。所以基本的，当它作用与HTML页面时，在body标签（整个窗口中的内容）之间的文字颜色是navy字体大小是0.8ems。
3、css的颜色设置
   color和background-color两者，两者可以在任何绝大部分html元素，包括body上使用，只要在标签中设置color字体的颜色和background-color背景颜色即可。

h1 {
    color: yellow;
    background-color: blue;
}
4、css的文本字体设置
   字体的设置:font-family;
   字体的大小:font-size;
   字体是否加粗:font-weight;
   字体是否斜体:font-style;
   英文的字体是否大小写font-transform;
   字体是否要下划线:font-decoration;
   中文和字母之间的间距:letter-spacing和word-spacing;
   行高：line-height;
   元素的位置： text-align;

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 0.8em;
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.5em;
}
a {
    text-decoration: none;
}
strong {
    font-style: italic;
    text-transform: uppercase;
}
p {
    letter-spacing: 0.5em;
    word-spacing: 2em;
    line-height: 1.5;
    text-align: center;
}
5、说到下面的东西先说一下盒子模型
   
                             CSS盒子模式
     这个里面涉及到margin padding border及中间内容部分的width,height.下面先分别说一下，再总结一下.
6、margin和padding的设置
   两者都是隔开间距的，margin是隔开元素与外边的间距，也就是外边距，而padding是隔开元素内的间距,也就是内边距。他们都有上下左右四个方向的设置。元素四边可以设置的属性：margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left ;

h2 {
    font-size: 1.5em;
    background-color: #ccc;
    margin: 1em;
    padding: 3em;
}
7、css的border的设置
  它总共有border-width || border-style || border-color分别表示宽度,样式，颜色。 每个又分为 上下左右四个方向.

h2 {
    border-style: dashed;
    border-
    border-left-
    border-right-
    border-color: red;
}
8、CSS属性结合起来使用

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 80%;
    color: black;
    background-color: #ffc;
    margin: 1em;
    padding: 0;
}

/* By the way, this is a comment */

p {
    line-height: 1.5em;
}

h1 {
    color: #ffc;
    background-color: #900;
    font-size: 2em;
    margin: 0;
    margin-bottom: 0.5em;
    padding: 0.25em;
    font-style: italic;
    text-align: center;
    letter-spacing: 0.5em;
    border-bottom-style: solid;
    border-bottom-width: 0.5em;
    border-bottom-color: #c00;
}

h2 {
    color: white;
    background-color: #090;
    font-size: 1.5em;
    margin: 0;
    padding: 0.1em;
    padding-left: 1em;
}

h3 {
    color: #999;
    font-size: 1.25em;
}

img {
    border-style: dashed;
    border-
    border-color: #ccc;
}

a {
    text-decoration: none;
}

strong {
    font-style: italic;
    text-transform: uppercase;
}

li {
    color: #900;
    font-style: italic;
}

table {
    background-color: #ccc;
}
这个只要能明白是什么意思就行了