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">