css

来源：互联网发布：淘宝嘉年华到什么时候编辑：程序博客网时间：2024/06/06 16:36

一、CSS 概述(了解)
*.CSS ： Cascading Style Sheet 层叠样式表
*.CSS 作用就是给HTML页面标签添加各种样式，将网页中的样式分离出来，完全由css来控制；
*.为什么用CSS
  HTML的缺陷： 1. 不能够适应多种设备
            2. 要求浏览器必须智能化足够庞大
      3. 数据和显示没有分开
      4. 功能不够强大
   CSS 优点：
   1.使数据和显示分开
   2.降低网络流量
   3.使整个网站视觉效果一致
   4.使开发效率提高了
二、CSS语法
p{color：red;}

选择器{属性名：属性值 ;}
     选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
     属性名和冒号之间最好不要有空格。

三、CSS和HTML的结合方式
CSS代码理论上位置是任意的，但通常写在style标签里
CSS和HTML的结合方式有3种：
  a. 行级样式表:采用style属性,范围只针对此标签适用
    <div style = "border:1px solid red ;">大家好</div>
  b. 内嵌样式表:采用<style>标签完成。范围针对此页面
  c. 外部样式表: 采用建立样式表文件。针对多个页面.
   引入样式表文件的方式:
    1):采用<link>标签
     eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
    2):采用import，必须写在<style>标签中，并且必须是第一句
     eg: @import url(a.css) ;

    两种引入方式的区别：
      外部样式表中不能写<link>标签,但是可以写import语句

总结：

css和html相结合的四种方式：
1.每一个html标签都有一个style属性：
2.当页面有多个标签有相同样式时，可以进行复用，
<style>
css代码
</style>

3.当有多个页面中的标签的样式相同时，还可以将样式单独封装成一个css文件。
通过在每个页面中定义：
<style>
@import url("1.css");
</style>
4.通过html中head标签中的link标签链接一个css文件
<link rel ="stylesheet" href ="1.css">

技巧：为了提高相同的样式的复用性以及可扩展性，可以将多个标签样式进行单独定义，并封装成css文件。
p.css div.css....
在一个css文件中使用css的import将多个标签样式文件导入。
然后在html页面上，使用link标签导入这个总的css文件即可；

1.css
@import url("p.css");
@import url("div.css");

四、CSS选择器
选择器分为两大类:
1.基本选择器
     a.标签选择器:指的就是选择器的名字代表html页面上的标签
   p{
    color:red ;
    border:1px dashed green;
   }

  b.类选择器：规定用圆点.来定义
   优点：灵活
   eg: .one{background-color:#ff0099; }

  c. ID选择器：规定用#来定义
   eg: #one{cursor:hand; }
      区别：标签选择器针对的是页面上的一类标签.
    类选择器可以供多种标签使用.
    ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。

  d:通用选择器：用*定义,代表页面上的所有标签。
   *{
     font-size:30px;
     margin-left:0px;
     margin-top:0px;
   }

2.扩展选择器
a. 组合选择器:采用逗号隔开
   eg: p,h1,h2,.one,#two{color:red ; }
b. 关联选择器(后代选择器): 采用空格隔开
   eg: h4 span i{color:red ; }
   表示h4标签中的span标签中的i标签的样式
   h4和span和i标签不一定是紧挨着的。
c. 伪类选择器
   1) :静态伪类：规定是用:来定义.只有两个.只能用于超链接.
        :link表示超链接点击之前的颜色
        :visited表示链接点击之后的颜色

      eg:a:link{color:red ;}
         a:visited{color:yellow;}
    注意： a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)
        a{}定义的样式针对所有的超链接(包括锚)
   2) :动态伪类 : 针对所有的标签都适用
     :hover : 是移动到某个标签上的时候
     :focus : 是某个标签获得焦点的时候
     :active : 点击某个标签没有放松鼠标时
     eg: label:hover{color:#00ff00; }
      input:focus{
        background-color:#ff9999;
        border:1px solid red;
       }
      a:active{
        color:blue;
       }

简单总结：

选择器的基本分类：
1.标签选择器：其实就是html中的每一个标签名；
2.类选择器：其实就是每一个标签中的class属性，用.形式标示；
3.id选择器：其实就是每一个标签的id属性，但是要保证id唯一性。用#来标示
id不仅可以被css所使用，还可以被JavaScript所使用

选择器优先级。id》class》标签
扩展选择器：
1.关联选择器：其实就是对标签中的标签进行定义样式定义。选择器选择器。。。
2.组合选择器：对多个选择器进行相同样式的定义。将多个选择器通过，隔开的形式
3.伪元素选择器：其实就是元素的一种状态。
a:link :超链接被点击前状态
a:vistted:超链接被点击后状态
a:hover:悬停在超链接上
a:actived:点击超链接时。
在定义这些状态时，有一个顺序：LV HA

P:first-letter:
p:first-line:
:focus:很遗憾，ie6不支持。但ff支持
css滤镜：其实通过一些代码完成丰富的样式

当使用到css更多属性时，还需要查阅css api

网页设计的时候：div+css
div:行级区域
span：块级区域
p：行级区域

五、CSS各种选择器的冲突(掌握)
  CSS样式的冲突:
   1.ID选择器 > 类选择器 > 标签选择器
   2.行级样式表 > 内嵌样式表 > 外部样式表
   外部样式表的ID选择器 > 内嵌样式表的标签选择器

原则：就近原则

六、CSS的各种属性(掌握)
? CSS中尺度单位的介绍
   CSS的单位:
  a. 绝对单位 1in=2.54cm=25.4mm=72pt=6pc , pt是点或者磅，pc是派卡
  b. 相对单位：px, em(印刷单位相当于12个点), %(相对周围的文字)

  *字体设置
     p{
    font-size:50px;    /*字体大小*/
    font-style:italic ; /*斜体*/
    font-weight:bold; /*粗体*/
    font-family:幼圆; /*字体类型*/
    font-variant:small-caps; /*小写变大写*/
   }
  *文本设置
     p{
    letter-spacing:0.5cm ; /*字母间距*/
    word-spacing:1cm;   /*单词间距*/
    text-align:center;   /*在所包含容器的中间*/
    text-decoration:overline; /*字体修饰 underline下划线 line-through中划线 overline上划线*/
    text-transform:lowercase; /*单词字体大小写*/
    color:red ;
   }

  *背景设置
   body{
     background-color:#ff99ff ; /*背景颜色*/
     background-image:url(images/2.gif) ; /*背景图片*/
     background-repeat: no-repeat; /*no-repeat不要平铺，repeat-x,横向平铺，repeat-y 纵向平铺*/
     background-position:center right; /*背景位置*/
     background-attachment: scroll ;           /*背景的移动 ,fixed跟着滚动条一起移动，scroll 不动*/
    }
  *列表设置
   ul li{
    list-style:none;    /*列表前样式*/
    list-style-image:url(images/2.gif) ; /*列表项前图片*/
    margin-left:80px;
    }

  *盒子模型(border margin padding)
    padding:是内容到边的距离
    border: 是边的粗细
    margin:是控件到控件的距离

  *定位设置(position,float,clear,z-index)
   #d{
    position: absolute;    /*
        1.绝对定位: 定义横纵坐标 .脱离了本身的顺序流
        2.相对定位: 相对的是自己在顺序流中原来的位置
       */

    left:100px;    /*横坐标*/
    top:100px;     /*纵坐标*/
    border:1px solid red ;
    width:100px;
    height:100px;
    background-color:#ff66ff;
     }

   #d1{
    position: relative;    /*相对位置*/
    left:100px;
    top:100px;
    border:1px solid green ;
    width:100px;
    height:100px;
    background-color:#339900;
     }

   span{
    position: relative;
    left:20px;
    top:20px;
    }
           z-index:值任意，值越大离我们越近
     float : 浮动
     overflow: 超出范围怎么办
鼠标样式设置(cursor)

举例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>畅销书排行榜</title><style>.title{background-color:green;width:300px;height:30px;color:white;padding-top:10px;padding-left:20px;background-image:url('image/bang.gif') ;background-repeat:no-repeat;background-position-x:100px;background-position-y:6px;}li{margin-left:25px;}a{text-decoration: none;padding-top:2px;font-size:15px;line-height:27px;}a:link{color: RGB(100,100,255);}.num01{list-style-image:url('image/book_no01.gif');}.num02{list-style-image:url('image/book_no02.gif');}.num03{list-style-image:url('image/book_no03.gif');}.num04{list-style-image:url('image/book_no04.gif');}.num05{list-style-image:url('image/book_no05.gif');}.num06{list-style-image:url('image/book_no06.gif');}.num07{list-style-image:url('image/book_no07.gif');}.num08{list-style-image:url('image/book_no08.gif');}.num09{list-style-image:url('image/book_no09.gif');}.num10{list-style-image:url('image/book_no10.gif');}</style></head><body><div class="book">  <div class="title">畅销书排行</div>  <ul>    <li class="num01"><a href="#" target=_blank>不抱怨的世界(畅...</a></li>    <li class="num02"><a href="#" target=_blank>遇见未知的自己...</a></li>    <li class="num03"><a href="#" target=_blank>活法（季羡林、...</a></li>    <li class="num04"><a href="#" target=_blank>高效能人士的七个习惯</a></li>    <li class="num05"><a href="#" target=_blank>被迫强大（北外女生香奈儿...</a></li>    <li class="num06"><a href="#" target=_blank>遇见心想事成的自己（《遇...</a></li>    <li class="num07"><a href="#" target=_blank>世界上最伟大的推销员（插...</a></li>    <li class="num08"><a href="#" target=_blank>我的成功可以复制（唐骏亲...</a></li>    <li class="num09"><a href="#" target=_blank>少有人走的路：心智成熟的...</a></li>    <li class="num10"><a href="#" target=_blank>活出全新的自己——唤醒...</a></li>  </ul></div></body></html>

七、滤镜(了解)

0 0