CSS基础

css语法:选择器{声明};

声明由 css属性:属性值; 组成

p{background-color: #ccc;}

css属性

width 宽度(单位：px)
height 高度（单位:px）
background-color 背景颜色(颜色的英文或者十六进制颜色)
color 字体颜色
font-size 字体大小
……

css注释

 /*h3{width:300px;}*/ 单行注释
 
 /* p{
        width:300px;
        height: 300px;
    } */多行注释

css样式表

1.内部样式表：将css语法写在style标签里面，而style标签写在head里面。作用域是本页面上。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style>
            h3{
                width:300px;
                height:300px;
                background-color:red;
            }
        </style>
       
    </head>
    <body>
        <h3>内部样式表</h3>
    </body>
    </html>

2.外部样式表：新建一个css文件，在css文件里写css语法.接着在html文件里通过link标签（写在head里面）的href属性链接到该css文件。作用域是只要链接到该css文件的所有html页面。

[注] linkrel="stylesheet"说明链接的是一个样式表文件。

test.css文件：
h3{
    width:300px;
    height:300px;
    background-color:red;
}

html文件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/test.css" />
</head>
<body>
    <h3>外部样式表</h3>
</body>
</html>

3.内联样式表（行内）：将style作为html属性，将声明（css属性:css属性值;）作为html属性值。作用域是当前元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <h3 style="width:300px;height:300px;background-color:red;">内联样式表</h3>
</body>
</html>

样式表的优先级

前提：出现层叠性（对同一个元素添加相同的css属性）问题的时候，才会有优先级的比较。
优先级：内联样式>内部样式,内联样式>外部样式。内部样式与外部样式，誰写在后面，就覆盖前面的相同元素的相同属性。

选择器

1.标签选择器，通过标签名获取元素(相当于人的姓名)

    div{
        width:200px;
        height:200px;
        background-color:#666;
    }

2.类选择器，通过.类名获取元素(相当于人的外号)

.box{
    width:200px;
    height:200px;
    background-color:#666;
}

3.id选择器，通过#id名获取元素(相当于人的身份证号码，元素的id有且只有一个)

#box{
    width:200px;
    height:200px;
    background-color: #666;
}

[注]类和id选择器的命名规则：英文开头，包含数字、下划线

    <div class=box my_box" id="Mybox2">类选择器和id选择器</div>
    <div id="box" >id选择器</div>

选择器的优先级

!important>行内样式>id选择器>类选择器>标签选择器>通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        div{
            color:orange;
        }
        .box{
            color:grey !important;
        }
        #Box{
            color:green;
        }
        *{
            color:pink;
        }
    </style>
</head>
<body>
    <div class="box" id="Box" style="color:purple;">选择器优先级</div>
</body>
</html>

CSS核心属性

字体属性 font

1.字体大小 font-size,单位为px、rem、pt等。

浏览器默认字体大小为16px,最小字体为12px。(9pt=12px,12pt=16px)

p{font-size:24px;}

2.字体加粗 font-weight,属性值为：bolder更加粗 bold加粗600-900 normal默认正常100-500。

p{font-weight:bold;}

3.字体倾斜 font-style,属性值为：normal默认正常 italic倾斜 oblique更倾斜

p{font-style:oblique;}

4.字体家族 font-family

该属性的属性值若为中文字体或多个单词组成，则需要加上双引号。若存在多个字体，则用逗号隔开。表示找不到前一个字体时，就用后面的。

p{font-family:"Times New Roman","楷体","宋体";}

5.字体颜色 color，属性值为：颜色的单词或者十六进制

十六进制：0-9 a b c d e f;
表示颜色:#000000,前两个0代表红色，中间两个0代表绿色，后两个0代表蓝色.若是所有表示同一颜色的两个数是一样的，则可以省略成三个数字。

div{color:yellow;}
p{color:#ccc;}
span{color:#ff0000;}//红色，可简写为:#f00;
a{color:#00ff00;}//绿色，可简写为:#0f0;
i{color:#0000ff;}//蓝色，可简写为:#00f;

文本属性 text

1.文本设置大小写 text-transform，属性值为：lowercase小写 uppercase大写 capitalize首字母大写 none默认不变换。

p{text-transform: none;}

2.文本修饰 text-decoration，属性值为：underline下划线 overline上划线 line-through删除线 none默认没有修饰 blink闪烁

p{text-decoration:blink;}

3.首行缩进 text-indent,单位:em,以当前字体的大小为基准(可以为负值)

p{font-size:16px;text-indent:-2em}
p{text-indent:2em}//常用，首行缩进2个文字

4.字间距 letter-spacing

p{letter-spacing:30px}

5.词间距 word-spacing(以空格作为标识符)

p{word-spacing: 30px}

6.文本在当前容器中的水平对齐方式 text-align，属性值为：left默认向左 right向右对齐 center居中对齐 justify调整,对英文有效果。

p{
    width: 200px;
    height: 200px;
    font-size:18px;
    text-align:center;
}

7.文本在垂直方向的对齐方式(行内元素):vertical-align,属性值为：baseline默认以基线对齐 middle中线 top顶线 bottom底线。

a{
    font-size:24px;
    vertical-align:middle;
}
span{
    vertical-align:middle;
}
img{
    vertical-align:middle;
}

列表属性 list-style

1.列表样式类 list-style-type,属性值为：disc默认实心圆 circle空心圆 square方块 none没有。

2.列表样式图片 list-style-image:url(路径)

3.列表样式的位置 list-style-position,属性值为：outside列表项外边（默认） inside列表项里边。

ul,li{
    list-style-type: none;//常用
    list-style-image: url("../images/arror.jpg");
    list-style-position: inside;
    <!--list-style: circle inside;合并写法-->
}
//关于li前面的小图标，一般会给li留个padding的位置，再给li加上背景图片，而且要no-repeat，background-position一般都是0 center

边框属性 border

1.边框宽度 border-width

2.边框样式 border-style,属性值为：solid实线 dashed虚线 dotted点线 double双线

3.边框颜色 border-color

div{
    width: 200px;
    height: 200px;
    border-width:3px;
    border-style: double;
    border-color:red;
    <!--border:1px solid #ccc;合并写法-->
}

4.改变某条边框的属性值,border-方向left、right、top、bottom）

border-left:2px dashed red;

5.改变某条边框的某个属性的属性值,border-方向-属性(width、style、color)

border-right-style:dotted;

行高 line-height

属性值为:normal(默认) 具体像素值或者数值(eg:44px/2) 百分比(%,基于当前字体尺寸的百分比行间距。) inherit(从父元素继承 line-height 属性的值。)

p{
    width:100px;
    height:30px;
    font-size:18px;
    text-align:center;
    line-height:30px;
}
//常用的文本水平和垂直方向都居中：text-align:center;line-height:numpx;line-height的值与元素的高度一致。

背景属性 background

1.背景颜色background-color

2.背景图片background-image:url()

3.背景图片重复background-repeat （repeat默认重复 no-repeat不重复 repeat-x水平方向重复 repeat-y垂直方向重复）

4.背景图片在容器中的位置 background-position:水平方向垂直方向;属性值可以为数值、方位（leftcenterright、topcenterbottom）。

5.背景图片的固定 background-attachment,属性值为：scroll默认滚动 fixed固定。

div{
    width: 800px;
    height: 800px;
    border:10px solid #ccc;
    /*background-color:#ddd;*/
    background-image:url("../images/666.jpg");
    background-repeat:repeat-y;
    background-position:center center;
    <!--background:#ddd url("../images/666.jpg") no-repeat center;合并写法-->
    background-attachment: fixed;
}

浮动 float

属性值为：left向左浮动 right向右浮动 none不浮动

在标准的文档流中，页面布局必须遵循从左往右，从上往下

1.浮动后的元素会脱离标准流,但是里面的内容不会脱离文档流。

2.浮动后的元素相当于行内块级元素（一行显示多个、可以设置宽高）

3.若是一行放不下所有的浮动元素，则放不下的那个浮动元素会在它上一个元素的最低点开始摆放。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        .dv1{
            width: 650px;
            height: 300px;
            background: #ccc;
            float: left;
        }
        .dv2{
            width: 500px;
            height: 200px;
            background: pink;
            float: left;
        }
        .dv3{
            width: 600px;
            height: 300px;
            background: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="dv1"></div>
    <div class="dv2"></div>
    <div class="dv3"></div>
</body>
</html>

不透明度 opacity

属性值为0-1之间的小数，数值越大越不透明

div{
    width:100%;
    height:100%;
    background:#999;
    opacity:0.2;
}

CSS基础

css语法:选择器{声明};

css属性

css注释

css样式表

样式表的优先级

选择器

选择器的优先级

CSS核心属性

字体属性 font

文本属性 text

列表属性 list-style

边框属性 border

行高 line-height

背景属性 background

浮动 float

不透明度 opacity

xmax

引用和评论

XHTML元素类型

网页设计的垂直居中

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制