css_基础教程

说到CSS就不得不提到div了，现在呀布面的布局结构不能想以前的那样用table排版了，如果还用table的话，那就太士了，你说是不是呀，现在晚了，明天继续我们web学习之路.希望大家支持黑侠客。
1、的应用
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;
}
这个只要能明白是什么意思就行了