css学习笔记:常用样式

CSS

1.CSS概述

  层叠样式表

  作用：控制页面的显示效果，最终用HTML去展示页面内容，用CSS样式去控制页面内容的显示效果

      注释用/*    */

2.CSS和HTML结合的方式

1.属性style结合方式(行内样式)

在标签中写style属性.

   style="属性：值"

2.style标签结合(内嵌方式)

<style>

code....

</style>

3.Link标签进行结合(最常用的)

1.先定义外部样式文件

2. 引入<link rel="stylesheet" type="text/css" href="divstyle.css" />

4.import来进行导入

  @import url(css文件位置);

3.CSS样式优先级和代码规范

由外到内，由上到下 级别逐步增高(就近原则)

书写规范：

属性：属性值;属性1：属性值1

属性：属性值1 属性值2; 如 border:1px solid blue;中间没有逗号

4.CSS三种常用选择器

html标签名选择器。使用的就是html的标签名

 class选择器。其实使用的标签中的class属性

1.用.开头进行定义

2.可以使得相同的标签具有不同的显示效果

3.可以使得不同的标签具有相同的显示效果

 id选择器。其实使用的是标签的中的id属性。

1.用#进行定义，在标签中用id属性进行引入

2.在使用时，最好保持id唯一

 

5.CSS三种扩展选择器

  1.关联选择器

          p,div{color:red} div和p 并列中间用逗号隔开，可以一次性写多个html标签

      2.组合选择器

          div p{color:red}  div中套有p标签 中间用空格隔开

  3.伪元素选择器

    a:link  超链接未点击状态。

a:visited 被访问后的状态。

a:hover 光标移到超链接上的状态（未点击）

a:active 点击超链接时的状态

a:link{

color:blue;

text-decoration:none;

}

a:hover{

color:red;

text-decoration:underline;

}

a:active{

color:green;

text-decoration:none;

}

a:visited{

color:yellow;

text-decoration:underline;

}

6.CSS的常见操作

1.CSS中尺度单位的介绍

1in = 2.54cm = 25.4 mm = 72pt = 6pc

    pt (point，磅)：pt=1/72(英寸), 是一个物理长度单位

     px(像素)=1/dpi(英寸):指定精度DPI(Dots Per Inch，每英寸像素数)Windows系统默认是96dpi，Apple系统默认是72dpi。

    em=16px。

以Windows下的96dpi来计算，pt=px*72/96=px*3/4

 

2.字体设置

font : italic bold 42 “宋体”; 注意顺序

或:  font-style:italic

            font-weight:bold

         font-size:42

font-family:”宋体”

 

 3.文本设置

    text-align 设置文本对齐方式

    text-indent:2em;设置缩进(取值可正可负,默认为0)

        text-decoration:设置文本装饰 常用属性值underline overline(上划线) none

 4.背景设置

background-color:red;背影色

background-image:url("photo-3.jpg");背景图片

background-repeat:no-repeat;有没有重复repeat-y(在y方向重复)repeat-x

background-position:30px 30px;背景图片出现的位置（leftposition,topposition）

     5.边框

       border: (border width) (border style) (border color);

       Style:solid;dish;

 

 5盒子模型(border margin padding)

border边框

margin外补丁

padding内补丁

  margin:20px; 上右下左 20px

  margin:40px 10px;上下20px

  margin:10px 40px 50px; 上10px 左右40px 下50px

          

     6定位设置(position,float,clear)

         position: static (默认);absolute(定位叠层);fixed(4.0不支持);relative(对象不层叠)

  absolute:始终相对于父块(或body) 使用上右下左,遵循z-index

          定位后,后面的块会发生变化(使后面的元素向前提)

  Relative:相对于为浮动前左上角的位置 使用上右下左

          定位后.后面的块不发生变化

  z-index:z方向上的位置,0层在最底层,z越大越向外.

          通过z可以调层次       

          top;right;bottom;left

        float:漂浮位置

left center right

        clear:清除左边或右边的内容(类似于另起一行,但不完全相同)

            left right both

        设置块大小:

width:100px;

height:100px

 

 

     7.列表设置

list-style列表样式

list-style-image列表图片

 

  

 8.鼠标样式设置(cursor)