CSS样式

使用CSS的三种方式：

          1、行内样式：style=";;;"

          2、内部样式：<style type="text/css"></style>

          3、外部样式：<link rel="stylesheet" style="text/css" href="css文件路径">

                优先级：行内>内部>外部

选择器：

         1、标签选择器：通过标签名选择

         2、类选择器：通过（.类名）选择

         3、ID选择器：通过（#id）选择

         4、并集选择器：减少重复代码，多个之间用逗号隔开

         5、交集选择器：层次选择，多个之间加空格

         6、通用选择器：使用*号，全部选择

         7、伪类选择器：作用于不同状态下的样式

               标签存在四种状态：<1>  :link    初始     <2>  :hover   鼠标经过    <3>  :active   鼠标按住  

                                                 <4>  :visited   按下松开            （顺序：link、visited <-- hover <-- active）

常用属性：

           1、背景

                 background-color:red

                 background-image:url("文件名")              背景图

                 background-repeat:no-repeat                   背景图片重复

                 background-position:top center              第一个为哪个位置开始显示，第二个为放在标签的哪个位置

                 简写：background:red url("") no-repeat top center

         

          2、文本

                 color:red

                 text-decoration:none                              修饰（underline下划线、上划线）

                 word-spacing:30px                                 单词间隔

                 letter-spacing:10px                                 字符间隔

                 text-align:center                                      居中

          3、字体

                font-size:30px 

                font-family:"宋体"                       类型

                font-style:italic                            样式

                font-weight:bold                          加粗

         4、列表

               list-style-type:none                       类型

               list-style-image:url("图片")          类型为图片

 

         5、表格

               border-collapse:collapse              边框合并

               border-color:red                             设置边框颜色

         6、边框

               border-方向-属性    （简写：border:width color style）

               方向：top、bottom、left、right

               属性：style、color、width

               无方向：border-color:red

               无方向规则：

                             默认顺序为上右下左；当前方向没有值，则取对面的值；只有一个值，则四个方向都取这个值

盒子模式：

              把html页面上的一个标签看做是一个盒子（属性-方向：大小px）

              属性： 宽高、边框（border）、内边框（padding）、外边框（margin）

定位：

              属性：position       （position:relative;left:10px;top:10px;）

               relative      相对定位，相对于原位置

               absolute    绝对定位，相对于父标签

               fixed           固定定位，相对于浏览器