css基础巩固

一、与html的整合

                  方式1:内联样式表 通过标签的style属性设置样式

                  方式2:内部样式表 在当前页面中使用的样式

                          通过head标签的style子标签导入

                          例如:

                                   <style type="text/css">

                                            #divId2{

                                                     background-color:#0f0;

                                            }

                                   </style>                             

                  方式3:外部样式表 有独立的css文件

                          通过head标签的link子标签导入

                          例如:

                                   <link rel="stylesheet" type="text/css" href="xxx.css" />(h5 中省略 type="text/css")

二、选择器:

                  1.id选择器

                          要求:

                                   html元素必须有id属性且有值  <xxx id="id1"></xxx>

                                   css中通过"#"引入,后面加上id的值 #id1{...}

                  2.class选择器

                          要求:

                                   html元素必须有class属性且有值 <xxx class="cls1"/>

                                   css中通过"."引入,后面加上class的值  .cls1{...}

                  3.元素选择器

                          直接用元素(标签)名即可  xxx{...}          

                  4.属性选择器

                          要求:

                                   html元素必须有一个属性不论属性是什么且有值 <xxx nihao="wohenhao"/>

                                   css中通过下面的方式使用

                                            标签名[属性="属性值"]{....}

                                            例如:

                                                     xxx[nihao="wohenhao"]{....}

                  5.后代选择器

                          选择器  后代选择器{...}         在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式 

                   6. 锚伪类选择器

                          a:link {color:#FF0000}   /* 未访问的链接 */

                          a:visited {color:#00FF00}      /* 已访问的链接 */

                          a:hover {color:#FF00FF}        /* 鼠标移动到链接上 */

                          a:active {color:#0000FF}       /* 选定的链接 */

 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

三、属性

         1.字体:

                  font-family:设置字体(隶书) 设置字体家族

                  font-size:设置字体大小

                  font-style:设置字体风格

         2.文本:改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进

                  color:文本颜色

                  line-height:设置行高

                  text-decoration: 向文本添加修饰。 none(比如超链接没有下划线)

                  text-align:对齐文本

         3.列表:

                  list-style-type:设置列表项的类型 例如:a 1  实心圆

                  list-style-image:设置图片最为列表项类型 使用的时候使用 url函数 url("/i/arrow.gif");

         4.背景:

                  background-color:设置背景颜色

                  background-image:设置图片作为背景 url

         5.尺寸:

                  width:

                  height:

         6.浮动:

                  float: 可选值 left right

         7.分类:

                  clear:设置元素的两边是否有其他的浮动元素，若值为:both 两边都不允许有浮动元素

                  display:设置是否及如何显示元素。

                        none 此元素不会被显示。 

                          block 此元素将显示为块级元素，此元素前后会带有换行符。

                          inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

四、框模型

         一个元素外面有padding(内边距) border(边框) margin(外边距)

          padding:元素和边框的距离

          margin:元素最外层的空白

                  若设置大小的时候 四个值:顺序：上右下左 。上下为一对,左右为另一对

                          padding:10px 10px 10px10px

                          若只写一个的话 padding:10px(10px 10px 10px)

                          若只写两个个的话 padding:10px 20px(10px 20px)

                          若只写三个个的话 padding:10px 20px 30px(20px)

           border

                  属性:

                          border:宽度 风格 颜色; 

                          border:5px solid red;

                          solid:实线

                          dashed:虚线

                          double:双实线