奇舞-css概念与简单选择器-笔记

版本(Level)

• css Level1
• css Level2 css2.1(规范)

• css Level3

  • Color Module Level 3
  • Selectors Level 3
  • Media Queres
  • Fonts Level 3

  CSS 规则
  

使用css

    <!-- 外链 -->
    <link rel="stylesheet" href="/path/to/style.css">
    <!-- 嵌入 -->
    <style type="text/css">
        li {margin: 0;list-style: none;}
        p {margin:  1em 0;}
    </style>
    <!-- 内联 -->
    <p style="margin: 1em 0">Example Content</p>

注释

/* 设置按钮宽度 */

.from button {
    width: 240px;
}
/*
 * 设置默认样式
 */

 body {
     margin: 0;
    /*font-size: 12px;*/
     color: #333;
    }

选择器

从选择器用来从页面中选择元素，以给它们定义样式

简单选择器

• 通配选择器
• 标签选择器
• ID选择器
• 类选择器

//通用选择器
    /* 匹配所有元素 */
    * {
        box-sizing: inherit;
    }

//标签选择器
    /* 匹配素有p元素 */
    p {
        margin: 1em 0;
    }

//id 选择器
        /*
         * 匹配id为example的元素
         * 注意：id 的值在一个HTML 中必须唯一
         */
         #example {
            font-size: 14px;
            line-height: 1.6;
            color: red;
         }

//类选择器
    <!-- 可以给一个元素指定多个class 用空格隔开 -->
    <p class="warning icon"></p>
        .warning {
            color: orange;
        }

属性选择器

//具有某个属性
[disabled]
//属性为指定的值
[type=checkbox]
//属性值包含某个字符串
[href*='example']
//属性值以某个字符串开头
[href^='http:']
//属性值以某个字符串结束
[href$='jpg']
//属性值以空格分割后包含某个字符串
[lang~='zh-cn']

    <p>
        <label for="">用户名</label>
        <input name='username' value="zhao" disabled>       
    </p>
    <p>
        <label>密码：</label>
        <input type="password" required>
    </p>

    input[disabled] {
        background: #eee;
        color: #999;
        cursor: not-allowed;
    }
    input[type="password"] {
        border-color: red;
        color: red;
    }
    [for~="height"] {
        color: red;
    }
    a[herf^="#"] {
        color: red;
    }
    a[href$=".jpg"] {
        color: red;
    }
    [class^='icon-'],
    [class*=" icon-"] {
        color: coral;
        font-family: FontAwesome;
        font-style: normal;
        margin-right: 1em;
    }

    .icon-user::before {
        content: '\f007';
    }

    .icon-wifi::before {
        content: '\f1eb';
    }

伪类(pseudo-classes)

基于DOM之外的信息去(比如根据用户和网页交互状态) 选择元素

a:link {...} /* 未访问过的链接 */
a:visited {...} /* 已访问过的链接 */
a:hover {...} /* 鼠标移动到连接上的样式 */
a:active {...} /* 鼠标在连接上按下时的样式 */
a:focus { ... } /* 获取焦点时的样式 */

input:disabled {...} /* 禁用时的样式 */
input:checked {...}  /* 选用时的样式 */
input:focus {...} /* input 聚焦时的样式 */

结构性伪类

:first-child
:last-child
:nth-child
:first-of-type
:last-of-type
:nth-of-type
:empty

选择器组合

• 后代组合器 E F
• 亲自组合器 E > F
• 兄弟选择器 E ～ F
• 相邻相邻兄弟 E + F

伪元素

::before
::after
::first-letter
::first-line

组合形式

E[foo=”bar”]
E.warning
E#myid
.warning#myid
.warning[foo=”bar”]

/* 后代选择器 */
article p {
    color: coral;
}
/* 亲子选择器 */
article > p {
    color: limegreen;
}
article section h2 {
    border-bottom: 1px dashed #999;
}

同时为一组选择器定义样式

body, h1, h2, h3, h4, h5, h6, ul, li, ol {
   margin: 0;
   padding: 0;
}

[type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0
}