CSS格式

选择器{属性1:值1;属性2:值2;属性3:值3;……}

CSS属性值常用单位

px:像素(pixel)

%:百分比

CSS部分基本样式

width:宽

height:高

background-color:背景色

CSS注释

/* CSS注释的内容 */

CSS内联样式与内部样式

内联(行内、行间样式):在html的标签上添加style属性来实现

内部样式:在<style>标签内添加的样式,可以复用代码

外部样式:在html头部<head>部分内插入代码引用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- 这是外部样式 -->

    <link rel="stylesheet" href="style.css">

    <style>
        /* 这是内部样式 */
        .box {
            background-color: blanchedalmond;
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <!-- 这是内联样式 -->

    <div style="width: 100px;height: 100px;background-color: aquamarine;"></div>

</body>

</html>
/* CSS 外部样式 */

* {
    padding: 0;
    margin: 0;
}

div {
    width: 100px;
    height: 100px;
    background-color: aqua;
}

CSS颜色表示法

单词表示法:red、blue、green……

十六进制表示法:#000000、#FFFFFF、#FF0000……

RGB三原色表示法(取值范围0~255):rgb(255,255,255)……

CSS背景样式

background-color:背景颜色

background-image:背景图片

  • url属性:背景图片路径地址

  • 平铺方式默认为水平垂直都铺满

background-repeat:背景图片的平铺方式

  • repeat-x:以x轴进行平铺

  • repeat-y:以y轴进行平铺

  • repeat:x,y轴同时平铺

  • no-repeat:不平铺

background-position:背景图片的位置

  • x:具体数值、left、center、right

  • y:具体数值、top、center、bottom

background-attachment:背景图随滚动条的移动方式

  • scroll:默认值,背景按照当前元素进行偏移

  • fixed:背景位置按照浏览器进行偏移

不起眼的小广告