CSS(一)

1、CSS(Cascading Style Sheet)叠层样式表。

  用于控制网页样式并允许样式信息与网页内容分离的一种标记性语言。

2、CSS引入方式

1)行内样式   

  直接在标签后面加上 style,并设置CSS属性及属性值   <p style="color:red;">你好</p>

2)内嵌式   

  在<head></head>中间 加入   <style="type/css"> </style>

3)链接式(推荐使用)

  <link rel="stylesheet" type="text/css" href="CSS/demo.css">

4)导入样式 (基本不用)  

  <style>     @import url(1.css)   </style>

3、CSS选择器

1)标签选择器

   P{ font-size:12px; background-color:#00FFFF; color:#FF0033; }

2)类别选择器

   .demoClass{ font-size:12px; background-color:#900; color:090; }

3)ID选择器

   #demoID{ font-size:30px; background-color:#0099FF; color:#FFFF00; }

选择器优先级:ID选择器>类别选择器>标签选择器

4、CSS文字效果

1)字体:font-family

2)文字大小:font-size

3)文字颜色: color

4)文字粗细: font-weight

5)文字

  下划线:text-decoration:underline;  

  删除线:text-decoration:overline;   

  定划线:text-decoration:line-through;

6) 英文字母大小写   

  单词首字母大写:text-transform:capitalize;   

  单词全部大写:text-transform:uppercase;   

  单词全部小写:text-transform:lowercase;

7)文字间距 letter-spacing 默认为 normal;

8)对齐方式 text-align    

  水平居中 text-align:center;

9)行间距 line-height   

  垂直居中 line-height:容器高度;

5、图片效果

1)图片边框 border

   边框类型border-style  dotted 点划线  dashed虚线  solid实线

     边框颜色border-color

     边框宽度border-width

2)图文混排

     设置浮动float

3)背景

     背景颜色:background-color

     背景图片:background-image

     图片重复

       水平方向重复 background-repeat:repeat-x;

     垂直方向重复 background-repeat:repeat-y;

       不重复 background-repeat:no-repeat;

     图片位置 background-position

     固定背景图片:background-attachment:fixed;

  

 

posted @ 2015-12-03 19:50  清光丶  阅读(218)  评论(0编辑  收藏  举报