Basic

Syntax

格式:

selector {
    declaration1; 
    declaration2;
    ... 
    declarationN;
}

例子:

h1{
   color:red;
   font-size:14px;
   font-family:"sans serif";
}

Advanced Syntax

基础选择器

派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式

例子：让所有列表中的 strong 元素变为红色，而不是通常的黑色

li strong{
    color: red;
}

id 选择器

例子:

#divid {color: red;}
#pid a{color: #00755f;}

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="selector.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div id="divid">this is a div</div>
        <p id="pid">hello css</br>
            <a href="http://www.shiyanlou.com">shiyanlou</a>
        </p>
    </body>
</html>

类选择器

例子：

.divclass {color: red}

<div class="divclass"> hello world </div>

例子：类选择器与派生选择器嵌套

.pclass a {color: red}

<p class="pclass">这是一个 class 显示效果
    <a href="hhtp://www.example.com">效果</a>
</p>

属性选择器

例子：为所有有 title 属性设置样式

[title]
{
color:red;
}

例子：为所有有 title=”te” 的元素设置样式

[title＝te]
{
color:red;
}

id 和 class 的区别

详细解说看这个文章

在实现原理上，id 和 class 是相同的。但是通常，一个网页中不能出现多个元素有相同 id 的情况：id 被用来区分特定的元素。

Yes, the id and class attributes do work in the same way and the web browser treats them the same. However, the implied rule is that no two elements on a page should have the same id, but many elements on one page can have the same class. Although the browser won’t render the web page unusually if you use the same id twice, developers see it as more semantically correct to use unique identities. This is because doing this makes reading the source code is a bit easier; if you see an element with an id, you know it is likely to be something that stands out from the rest of the page, because it should be the only element with that particular styling.

CSS 基础样式

背景

设定背景颜色

body{
   background-color: red;
}

p{
    background-color: #0014ff;
}

将图片设置为背景

body{
   background-image: url("pic.png");
   background-repeat: no-repeat; 
   /*no-repeat 不能重复
           repeat 可重复
        repeat-x 表示 x 轴重复
        repeat-y 表示 y 轴重复*/
   background-position:center top;
   background-attachment:fixed;
   /*背景关联 如果网页比较长，那么当网页向下滚动时，背景图像也会随之滚动。*/
   background-size: 100px 100px
}

文本

链接

链接的四种状态:

例子：

a:link {background-color: azure; color:blue;}
a:visited {background-color: azure; color:purple;}
a:hover {background-color: azure color:navy;}
a:active {background-color: azure; color:crimson;}

列表

ol {list-style: lower-greek}
 /*改变所有 ordered list 的图标*/
ul.lower-alpha {list-style: lower-alpha}
ul.list_image {list-style-image: url("list_image.png");}
/*使用图片代替列表图标*/

<!doctype: html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css list intro</title>
        <link rel="stylesheet" href="list.css" type="text/css">
    </head>
    <body>
        <ol>
            <li>hello world</li>
            <li>hello sam</li>
            <li>hello jack</li>
        </ol>
        <ul class="lower-alpha">
            <li>hello world</li>
            <li>hello sam</li>
            <li>hello jack</li>
        </ul>
        <ul class="list_image">
            <li>hello image</li>
            <li>hello picture</li>
            <li>hello beauty</li>
        </ul>
    </body>
</html>

表格

/*设置 table 的 th 和 td*/
/*这里 table 是 id 选择器*/
#table th, td{
    border: 2px solid lightblue;
    border-collapse: collapse;
    width: 100px;
    text-align: center;
}

/*单独设置 th 有不同的背景色和文字颜色*/
#table th{
    background-color:aliceblue;
    color:black;
}
/*单独设置 tr2 的 td 有不同的背景色和文字颜色*/
/*这里 .tr2 是类选择器*/
#table tr.tr2 td{
    background-color:white;
    color:indianred;
}

<!doctype: html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css table intro</title>
        <link rel="stylesheet" type="text/css" href="table.css">
    </head>
    <body>
        <table id="table">
            <tr>
                <th>time</th>
                <th>user</th>
                <th>tel</th>
            </tr>
            
            <tr class="tr2">
                <td>today</td>
                <td>jaggie</td>
                <td>5423</td>
            </tr>
            
            <tr class="tr2">
                <td>tomorrow</td>
                <td>lynda</td>
                <td>2396</td>
            </tr>

        </table>
    </body>
</html>

轮廓

例子:

#p1{
    outline-color: red;
    outline-style: groove;
    outline-width: 2px;
}

#p2{
    outline-color: blue;
    outline-style: dotted;
    outline-width: 2px;
}

<html>
    <head>
        <meta charset="utf-8">
        <title> css intro outlie</title>
        <link rel="stylesheet", type="text/css", href="outline.css">
    </head>
    <body>
        <p id="p1">hello world!</p>
        <p id="p2">hello world!</p>
    </body>
</html>

CSS 盒子模型

模型示意图

例子：

.top{
    background-color: aliceblue;
    width:100%;
    height:70px;
    text-align: left;
}

.top_center{
    margin:0px auto;
    width:75%;
    height: 70px;
    background-color: cadetblue;
    text-align: center;
    color: aliceblue;
}

.middle{
    margin: 0px auto;
    width: 75%;
    height: 700px;
    background-color: cornsilk;
}

.middle_1{
    margin: 0px;
    width:100%;
    height: 10%;
    background-color: darksalmon;
    text-align: center;
}

.middle_2{
    margin: 10px, 0px;
    width:100%;
    height: 10%;
    background-color: darkorange;
    text-align: center;
}

<html>
<head>
    <link rel="stylesheet" type="text/css" href="Box_3.css">
    </head>
    
<body>
    <div class="top">
        <div class="top_center">
            Top center
        </div>
    </div>
    <div class="middle">
        <div class="middle_1">Middle 1</div>
        </br>
        <div class="middle_2">Middle 2</div>
    </div>
    </body>
</html>

CSS 高级

定位

定位：允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

浮动

尺寸

属性：

导航