CSS&JavaScript 第二章：CSS基础

CSS基础

1.CSS简介

css通过样式表来表示网页的颜色、字体、背景色、等属性；

一些列的样式组成了样式表！！

定义样式表的3种方式：

1，外部样式表文件
2，内部样式表文件
3，元素种的样式表

2.CSS基本语法

.

一。元素中的样式表：

只要在元素中应用style属性就可以了。

二。常用样式属性：

1.文字：

font-family:vardana,sans-serif;	字体名
font-size: 1em;	字体大小
font-weight:bold;	字体粗细
font-style:italic;	字体样式（normal:正常；italic:斜体）
font-variant:是否是小型的大写字母

font:(style,variant,weight,size)以上5种综合运用顺序
color:	文字颜色
。。。。

"""
以上众多样式中，font-family,font-size必须要有
"""

2.背景
用于改变背景的颜色，背景图像及其位置等。

background-color:(transparent:透明) 背景颜色
background-image:(none:没有;url:图像路径及图像名)背景图片
background-position:()位置
background-repeat:(no-repeat:不重复;repeat:重复;repeat-x/y:水平或锤子方向重复)	背景重复方式

background:(color,image,repeat,position)综合应用（顺序）

3.边框线
用于改变指定元素的边框线粗细、类型、颜色等。

border-color: 颜色定义
border-style:(none(无);dotted(点线);dashed(虚线);solid(实线);)边框线类型
border-width:(thin(细);medium(中等);thick(粗))边框线粗细定义

border:(width,style,color)综合应用顺序

4.高度和宽度
用于改变指定元素的高度和宽度.

weight:(auto(自动);百分比或长度定义)
width:(auto;百分比)

5.间距和边距
间距：padding（指的是元素中的内容与边框现的距离）
边距：margin（指的是元素之间的距离）

6.位置和布局
用于改变指定元素与其他元素之间的排列方式、显示方式等。

display:(none(不显示);inline(行显示);block(块显示);list-item(列表显示))指定元素的显示方式
position:(static(静态的);relative(相对的);absolute(绝对的))指定元素的位置坐标值

float和clear：

3.定义样式表

内部和外部样式表需要指定对象来定义样式表；

一.元素名对象

用于网页中所有的指定元素：

em{color: green}
"""
又有em元素都会变为绿色
"""

二.自定义对象

当网页中多个元素具有相同的样式时，可以自定义对象。
对象名之前为一个 ‘.’，应用时使用class属性，即class=自定义对象名；

.big{ font-size : 120%}
"""
所有class=big的元素字体都会变大
"""

三.元素名和自定义对象的结合

p.big { font-size :120%}
li.big { font-weight:bold}
"""
p元素中标有class=big的字体都会变大；li元素中标有class=big的字体都会变为粗体
"""

四.标识名对象

用于指定的标识名元素，定义时标识名前有一个#；
标识名对象的样式只可用于一个元素。

#nav {color:blue}
p#description {font-size:85%}
"""
标识名为nav的字体都是蓝色；p元素中标识名为description元素的字体都变小。
"""

4.内部样式表和外部样式表

一.内部样式表

将定义样式表的内容放在style元素中，并且设置type属性为text/css； 然后将style元素放在HTML文档的head元素中

<style type="text/css">
</style>

二.外部样式表

多个html文档使用相同的样式表定义时，用外部样式表。
将定义的内容放在一个文本文件中，一般都以.css为扩展名。
然后zaiHTML文档的head元素中插入link元素

<link rel="stylesheet" type="text/css" href="外部样式表文件.css">