码迷,mamicode.com
首页 > Web开发 > 详细

CSS

时间:2015-01-09 01:27:56      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:

CSS:Cascading Style Sheet 层叠样式表

 
CSS作用:就是给HTML页面标签添加各种样式
 
为什么用CSS
    HTML的缺陷: 1. 不能够适应多种设备  2. 要求浏览器必须智能化足够庞大  3. 数据和显示没有分开  4. 功能不够强大
    CSS 优点:1.使数据和显示分开  2.降低网络流量  3.使整个网站视觉效果一致  4.使开发效率提高了
 
CSS语法
选择器{属性名:属性值 ;}
   选择器后一定是大括号。属性名后必须用冒号隔开。属性值后用分号。属性名和冒号之间最好不要有空格
 
CSS代码和HTML结合的时候,CSS理论上位置是随意的,但是一般放在style标签内。他们结合的方式有三种
        1.行级样式表 --->范围只是针对次标签
             例: <p style = "color : red">犯我德邦者,虽远必诛!</p>
        2.内嵌样式表 --->范围是这个页面
                例: <style type="text/css">
                 p{
                 color : green;
                 border : 1px solid black;
                   }
                        </style>
        3.外部样式表,采用建立样式表文件 --->范围可以应用于多个页面
                有两种方式,例1:采用link标签
                                                <link rel = "stylesheet" type = "text/css" href = "a.css"></link>     stylesheet定义样式表
                                                        <link rel = "alternate sytlesheet" type = "text/css" href = "b.css"></link> alternate sheet预定义样式表--->可以从浏览器种样式里面切换样式
                                     例2 : 采用import,必须写在<style>标签中,并且必须是第一句
                                               两种写法       @import "a.css";
                                                                    @import url(a.css);
                用link和import的区别:两种都能引入外部样式表,但是外部样式表中不能写<link>标签,但是可以写import语句。
 
CSS选择器:两大类
    1.基本选择器
        a.标签选择器(元素选择器)选择器的名字就是html上的标签,针对的是一类标签
            例:<style type="text/css">
    div{
  color : yellow;
         }
                   </style>
        b.类选择器,规定用原点来定义,有点是灵活。针对的是所有标签
            例:       <!doctype html>
                          <html lang="en">
                              <head>
                              <meta charset="UTF-8">
                              <meta name="Generator" content="EditPlus®">
                              <meta name="Author" content="">
                              <meta name="Keywords" content="">
                              <meta name="Description" content="">
                              <title>mycss</title>
                              <style type="text/css">
                    .皇子{
                        cursor : hand;
                            }
                              </style>
                              </head>
                              <body>
                          <div class = "皇子">犯我德邦者,虽远必诛!</div>
                              </body>
                          </html>
        c.ID选择器,规定用#来定义,针对的是特定的一个标签,优先级最高。
            例:                 <!doctype html>
                                    <html lang="en">
                                      <head>
                                      <meta charset="UTF-8">
                                      <meta name="Generator" content="EditPlus®">
                                      <meta name="Author" content="">
                                      <meta name="Keywords" content="">
                                      <meta name="Description" content="">
                                      <title>mycss</title>
                                      <style type="text/css">
                            #皇子{
                                background : red;
                                             }
                                      </style>
                                     </head>
                                     <body>
                                    <div id = "皇子">犯我德邦者,虽远必诛!</div>
                                     </body>
                                     </html>
            d.通用选择器,规定用*来定义,针对的是所有标签
                例:         <!doctype html>
                                <html lang="en">
                                 <head>
                                  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>mycss</title>
  <style type="text/css">
*{
font-size : 50px;
color : yellow;
}
  </style>
 </head>
 <body>
<div id = "皇子">犯我德邦者,虽远必诛!</div>
<p>阻断军队,粉碎山峰,跨过最长的。。。</p>
 </body>
</html>
            
         ID和类选择器的区别: 一个标签的id属性的值在整个页面上是唯一的。但是name的值可以重复。
 
    2.扩展选择器
            a.组合选择器 用逗号隔开
                例:        <!doctype html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>mycss</title>
  <style type="text/css">
div,span{
font-size : 30px;
color : red;
}
  </style>
 </head>
 <body>
<div>犯我德邦者,虽远必诛!</div>
<p>阻断军队,粉碎山峰,跨过最长的。。。</p>
<span>你要来一发么</span>
 </body>
</html>
            b.关联选择器 用空格隔开
                例:         <!doctype html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>mycss</title>
  <style type="text/css">
p span{
font-size : 30px;
color : red;
}
  </style>
 </head>
 <body>
<div>犯我德邦者,虽远必诛!</div>
<p>阻断军队,<span>粉碎</span>山峰,跨过最长的。。。</p>
<span>你要来一发么</span>
 </body>
</html>
            c.伪类选择器
                I.静态伪类。两个,用:来定义,只能用于超链接
                        例:               <style type="text/css">
a:link{
color : #33ff00;
}
 
a:visited{
color : #9900ff;
}
}
              </style>
 
a{}和a:link{}的区别:a:link{}可以实现href属性的超链接,不包括锚。a{}可以实现所有的超链接,包括锚。
                    
                II.动态伪类 针对所有标签都适用
                    例:  常用的三种
                                p:hover{
        color : red;
               }移动到某个标签上的时候
 
                                input:focus{
        background-color:#ff3333;
        border : 2px solid #cc9900;
        color : #990000
            }某个标签获得焦点的时候
 
                                p:active{
        color : #990000;
                }点击某个标签没有放松鼠标时
 
CSS各种选择器的冲突
1.ID选择器 > 类选择器 > 标签选择器
2.行级样式表 > 内嵌样式表 > 外部样式表
外部样式表的ID选择器  > 内嵌样式表的标签选择器
                        原则: 就近原则
         
CSS的各种属性
        CSS的单位:
a. 绝对单位 1in=2.54cm=25.4mm=72pt=6pc , pt是点或者磅,pc是派卡
b. 相对单位:px, em(印刷单位相当于12个点), %(相对周围的文字)
 
        字体设置:
            p{
font-size : 20px; 设置字体大小
font-family : 楷体;    设置字体
font-style : italic;    设置斜体
font-weight : bold;    设置加粗
font-variant : small-caps;    小写转换大写
}
        文本设置:
            p{
letter-spacing : 0.5cm; 字符间距
word-spacing : 0.5cm; 单词间距
text-align : center;    对齐到容器的中心
text-decoration : overline; 字体修饰 underline下划线 line-through中划线 overline上划线
text-transform : lowercase; 单词字体大小写
color : red;    颜色
}
        背景设置:
            body{
background-color : yellow; 背景颜色
background-image : url(E:/day02_css/上课示例/images/1.jpg); 背景图片
background-repeat : no-repeat; no-repeat不要平铺,repeat-x,横向平铺,repeat-y 纵向平铺
background-position : center top; 背景位置
background-attachment : fixed ; 背景的移动 ,fixed跟着滚动条一起移动,scroll 不动
}
        列表设置
            ul li{
list-style : none;
list-style-image : url(E:/day02_css/上课示例/images/2.gif);
margin : 90px;
}
        盒子模型:
            分为两种,一种是IE模型,一种是非IE模型
 
            技术分享    技术分享
 
                    padding 内容到边框之间的距离,可以大致理解为父子之间用padding
                    border 边框的粗细
                    margin 控件与控件之间的距离,可以大致理解为兄弟之间用margin
                        例:        <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>mycss</title>
  <style type="text/css">
div{
width : 100px;
height : 50px;
background-color : yellow;
border : 1px solid blue;
padding : 20px;
margin : 10px;
}
  </style>
 </head>
 <body>
<div>炼金术士</div>
<div>辛吉格</div>
 </body>
</html>
 
            定位设置:
                顺序流:控件一个挨一个的摆放的顺序叫顺序流
                两种情况会脱离顺序流: 
1. 当把控件的位置设定为绝对定位的时候 。
2. 当设定控件的float属性的时候。
 
               position:    absolute    1.绝对定位:原点在包含自己的容器的左上角. left,top. 定义横纵坐标 .脱离了本身的顺序流
       relative   2.相对定位:相对自己原来的位置. 相对的是自己在顺序流中原来的位置
 
                        例:         <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>mycss</title>
  <style type="text/css">
* {
padding:0px;
margin : 0px;
}
 
#othername{
position : relative;
width : 100px;
height : 50px;
background-color : yellow;
border : 1px solid blue;
left : 30px;
top : 50px;
}
#name{
position : relative;
width : 100px;
height : 50px;
background-color : blue;
border : 1px solid yellow;
left : 10px;
top : 30px;
}
  </style>
 </head>
 <body>
<div id = "othername">炼金术士</div>
<div id = "name">辛吉格</div>
 </body>
</html>
                         z-index : 值任意,值越大离我们越近
                            例:        #d1{
position:absolute;
left:100px;
top:100px;
width:200px;
height:200px;
background-color:blue;
border:2px solid red ;
z-index: 5 ;
 }
                       overflow : 当不够显示的时候,需要用到overflow。四种取值: visible不剪切内容也不添加滚动条 | auto必要的时候会进行裁切或者加入滚动条 | hidden 不显示超过范围的内容| scroll 总是显示滚动条 
                        float : 浮动
                        clear : 清除浮动
 
                鼠标样式格式:
           例:    p{
cursor:pointer;
        }
 
 
  

CSS

标签:

原文地址:http://www.cnblogs.com/runwind/p/4212263.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!