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

CSS用法简介

时间:2016-05-20 19:23:09      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:

  CSS(Cascading Style Sheets层叠样式表)是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

1.基本使用语法
    样式类别-方向-特征 : 值;
    设置颜色:
        color : red;
    设置字体大小
        font-size : 10px;
    字体描述
        text-decoration : overline;

2. CSS分类(如何使用CSS)
    行内样式
        直接给元素添加 style="" 属性
    内嵌样式
        直接给元素添加一个ID或一个class属性,在head标签中(不一定)写上
        <style type="text/css">
        </style>
        在里面写上样式的语法,并与对应的元素挂钩
    外部样式
        在htm文件外有一个css文件,样式写在css文件中,在html页中将这个样式文件加载进来
        <link href="css路径" rel="stylesheet" type="text/css" />

3.选择器(selecter)
    id选择器
        #id {
            /* 样式 */
        }
    类选择器
        .className {
            /* 样式 */
        }
    标签选择器
        tagName {
            /* 样式 */
        }
    三个样式同时使用,如果没有样式冲突,都应用
    如果有冲突,同级的就近原则
    如果不是同级的,ID>类>标签(专一的优先级最大)

 类选择器可以使用 class="c1 c2 c3 c4" 的语法将多个类选择器作用与元素上
    
    不规范用法:
        在CSS使用中,id选择器与类选择器可以同样的作用与多个元素
        id在规范中就是表示唯一,浏览器允许这么使用,但是在js执行中会出现问题


 复合选择器
        标签类选择器
            标签.类名 { /* 样式 */ }
        后面兄弟选择器
            选择器+* {
                /* 选中前面元素选择器的后一个元素 */
            }

    (+号不能省略)
        后代选择器
            将包含在某个元素中的元素都称为其后代
            <div id="dv1">
                <p>123</p>
                <div id="dv2">
                    <span id="span1"></span>
                </div>
                <p>456</p>
            </div>
            
            祖代选择器 后代选择器 {
                /* 样式 */
            }
         子代选择器
            父带选择器>子代选择器 {
                /* 样式 */
            }
         组合选择器
            选择器1, 选择器2, 选择器3, ..., 选择器N {
                /* 这些选择器的元素都具有这个样式 */
            }
            
4.常用样式
    文本
        color
        font-size
        font-family
        font-weight
    边框
        border-color
        border-style
        border-width
    背景
        background-color
    布局
        
    其他

CSS用法简介

标签:

原文地址:http://www.cnblogs.com/zk-ljc/p/5513011.html

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