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

02---CSS整理

时间:2015-08-16 18:07:53      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:

 

 

、概述

 
    CSS(cascading style sheet) 层叠样式表
 
    提供比HTML更强大的页面排版、美化工具
 
    CSS将网页内容和显示样式进行分离,提高了显示功能
 
二、CSS与HTML的结合方式
 
    1、style属性方式(行内样式):灵活但麻烦,只适合局部修改
 
    2、style标签方式(内嵌样式):将css样式内嵌到html页面的head里面

                                  优点:统一管理,统一修改,比较方便。

                                  
    3、导入方式:
                <style  type="text/css">

                     @import url(abc.css); 
                </style>


    4、连接方式:
              <link rel="stylesheet" type="text/css" href="abc.css" />
 
    优先级: 就近原则
 
    代码规范: 选择器名{属性名:属性值;……},多属性值用空格分开
 
三、CSS选择器
    
    1、HTML标签名选择器: 使用的就是html的标签名
                        font {background-color:#FFFF00; color:#FF0000; }
 
    2、class选择器: 使用标签的class属性
                    .p2 {font-size:1cm}
 
    3、id选择器: 使用的是标签的id属性
                 #id1{ font-size:4cm}
  
四、扩展选择器
   
    4、关联选择器:(上下文选择器),用于在一个标签内嵌套另一个标签的样式
                  p font{ font-size:1cm   }
 
    5、组合选择器: 多个不同标签样式相同
                  p,font{background-color:#FF0000; color:#FFFF00;}
 
    6、伪元素选择器: html预先定义好的选择器
                   a:link{ color:red}
                   a:visited{color:blue}
                   a:hover{color:black}
                   a:active{color:yellow}
 
五、常见操作(属性、值   参考帮助手册
  
    1、字体设置: font、color、font-size、font-family ……
 
    2、文本设置: text-intent、text-align ……
 
    3、背景设置: background、background-color、background-position ……
 
    4、列表设置: list-style ……
 
    5、盒子模型: border、 margin、padding
                技术分享技术分享
 
    6、定位设置: position、float、clear、z-index
 
                相对定位:相对于自己本来的位置
                绝对定位:相对应父控件的位置
 
    7、鼠标样式设置:cursor
    
    8、……
    

02---CSS整理

标签:

原文地址:http://www.cnblogs.com/rocomp/p/4734529.html

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