**-----CSS2-----**  

 

1.CSS特点简介


（1）CSS 指层叠样式表 (Cascading Style Sheets)

（2）样式定义如何显示 HTML 元素

（3）样式通常存储在样式表中

（4）把样式添加到 HTML中是为了解决内容与表现分离的问题

（5）外部样式表可以极大提高工作效率

（6）外部样式表通常存储在 CSS 文件中

（7）多个样式定义可层叠为一


2.CSS规则


   选择器+一条或多条声明。


（1）每条声明由一个属性和一个值组成。


（2）每个属性有一个值,属性和值被冒号分开。


 例：

    selector{

  property: value

            }


注：Selector选择器


    property: value=========属性值


提示：如果值为若干单词则要给值加引号或以' - '连接


3.如何创建 CSS


  插入样式表的方法有三种常用：


（1）外部样式:


<link href="css路径名/文件名" rel="stylesheet">


（2）内部样式:


<style type="text/css">


（3）标签名内部嵌入式：


<p style="属性:属性值;">


4.选择器


（1）标签名选择器


    以每个标签名为样式名将要赋予的属性写在其样式表中。

      例

      <style type="text/css">

       p{

          text-align:center;

          color:yellow;

         }

      </style>

      <p>This is example</p>


（2）类选择器class选择器


    CSS中class选择器以"."来定义。

    例

    元素属性 id="para1":

    <style type="text/css">

    .para1{

       text-align:center;

       color:red;

          }

    </style>

    <div class="para1">这是一个盒子</div>

 

     注类名的第一个字符不能使用数字


（3）id选择器


    CSS 中 id 选择器以 "#" 来定义。

     例

    元素属性 id="para1":

    <style type=“text/css”>

    #para1{

       text-align:center;

       color:red;

          }

    </style>

    <div id="para1">这是一个盒子</div>


5.id选择器与class选择器的区别


   （1）id你只能用来定义单一元素定义二个以后。页面不会出现什么问题但是W3C检测的时候认为你页面不符合标准


   （2）class是类同一个class可以定义多个元素。

注id也不能结合使用因为id属性不允许有以空格分隔的词列表     就页面效果而言两个东西的视觉效果几乎无差别。


6.CSS 伪类(Pseudo-classes)


  CSS伪类是用来添加一些选择器的特殊效果。

伪类的语法

selector:pseudo-class{

property:value;

}

例链接

<style type="text/css">

a:link{   /* 未访问的链接 */

Color:#F00

}

a:visited {  /* 已访问的链接 */

Color:#0F0;

}

a:hover{    /* 鼠标划过链接 */

Color:#00F;

{

a:active{   /* 已选中的链接 */

Color:#F0F;

}

</style>

<a href="  ">这是一个链接</a>


***--注：伪类可以与 CSS 类配合使用


a.red:visited {

color:#FF0000;

}

<a class="red" href="css.html">CSS</a>


7.Float(浮动)


（1）元素可以围绕其他元素向左或向右被推动

（2）往往是用于图像但它在布局时一样非常有用

 例：

img{

float:right;

}


8.Display(显示)与 Visibility可见性


（1）Display - 块和内联元素

    块元素是一个元素占用了全部宽度在前后都是换行符。

（2）隐藏元素 - display:none或visibility:hidden


注：display属性设置一个元素应如何显示visibility属性指定一个元素应可见还是隐藏。


注：块元素是一个元素占用了全部宽度在前后都是换行符。


9.建立一个横向导航栏


ul{

text-decoration:none;

margin:0;

padding:0;

}

li{

display:inline;/**把列表项显示为内联元素*/

}


注：内联元素只需要必要的宽度不强制换行。


10.CSS 图像透明/不透明 


   Opacity属性:透明度;

   例

img{

opacity:0.4;

 }

<img src=" 1.jpg" />


11.CSS--- Positioning(定位)

  

（1）static 定位


HTML元素的默认值即没有定位元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。


（2）fixed 定位


元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动。


（3）relative 定位


相对定位元素的定位是相对其正常位置。相对定位会按照元素的原始位置对该元素进行移动。

可以移动的相对定位元素的内容和相互重叠的元素它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。


（4）absolute 定位


用绝对定位,一个元素可以放在页面上的任何位置。

绝对定位的元素的位置相对于最近的已定位父元素如果元素没有已定位的父元素那么它的位置相对于<html>。

注 absolutely定位使元素的位置与文档流无关因此不占据空间。

     absolutely定位的元素和其他元素重叠。


12.CSS2常用属性(总结)



（1）文本Text文本排列属性是用来设置文本的水平对齐方式


text-align:center;文字居中

text-align:right;文字靠右

text-align:left;文字靠左

text-align:justify;每一行被展开为宽度相等左右外边距是对齐如杂志和报纸。

=================================================

text-decoration删除链接的下划线

text-decoration:overline;加上划线

text-decoration:line-through;加中部删除线

text-decoration:underline;加下划线

=================================================

text-transform:capitalize;首字母大写

text-transform:lowercase;全部变为小写

text-transform:uppercase;全部变为大写

=================================================

text-indent:50px;文本缩进

=================================================

text-shadow:8px 12px red;文字阴影右下左上

=================================================

=================================================


（2）字体fonts


font-family 属性设置文本的字体系列类型。

font-style:normal;字体正常

font-style:italic;斜体字显示类型

font-style:oblique;倾斜的字体与斜体相似不推荐

font-weight:指定文字粗细

     normal默认值。定义标准的字符。

     bold定义粗体字符。

     bolder定义更粗的字符。

     lighter定义更细的字符。

===============================================================


（3）背景background


background-p_w_uploadscroll/fixed(背景图像是否固定或者随着页面的其                            余部分滚动。)

background-color设置元素的背景颜色。

background-p_w_picpath把图像设置为背景。

background-position设置背景图像的起始位置。

background-repeatno-repeat/repeat-x/repeat-y/inherit(设置背景图像是否及如何重复。)

=================================================================


（4）选择器


id选择器

class选择器

伪类选择器

================================================================


（5）导航栏


*:设置不同的列表项标记为有序列表- 列表项的标记有数字或字母

**:设置不同的列表项标记为无序列表- 列表项标记用特殊图形如小黑点、小方框等

***:设置列表项标记为图像--可用图像作列表项标记。

<ul>

<li></li>

</ul>

形状可如下none不使用项目符号 

disc实心圆默认值 

circle空心圆 

square实心方块 

decimal阿拉伯数字 

lower-roman小写罗马数字 

upper-roman大写罗马数字 

lower-alpha小写英文字母 

upper-alpha大写英文字母

=========================================================================


（6）float(使元素向左或向右移动其周围的元素也会重新排          列。)


img

 {

 float:right;

 }


（7）border(边框属性)


border-style:none;------默认无边框

border-style:dotted;--------定义一个点线框

border-style:dashed;-------定义一个虚线框

border-style:solid;------定义实线边界

border-style:double;----定义两个边界。 两个边界的宽度和border-width的值相                         同


==================================================================


（8）外边距margin(margin没有背景颜色是完全透明的)


margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

=====================================================================


（9）伪类选择器添加外部表现效果如link


a:link{}

a:visited{}

a:hover{}

a:active{}

=====================================================================


（10）图像透明度(opacity)


img{

opacity:0.4;

}

==========================================================


（11）轮廓(outline)是绘制于元素周围的一条线


outline-color:轮廓颜色


outline-style:外边框的样式


none dotted dashed solid double groove ridge inset outset inherit


outline-width:外边框的宽度


              thin medium thick inherit


====================================================