css

028600
I'm not lazy, I'm on energy saving mode.
我不懒，我只是开启了节能模式

CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式

CSS样式引入方式

外部样式

CSS写在一个单独的.css文件中，通过link标签在网页中引入

<link rel="stylesheet" href="文件路径">
<link rel="stylesheet" href="文件路径">
<link rel="stylesheet" href="文件路径">

内部样式

CSS写在网页的head标签中，用style标签包裹

<style>
    /* 写在style标签中的样式 */
</style>
<style>
    /* 写在style标签中的样式 */
</style>
<style>
    /* 写在style标签中的样式 */
</style>

行内样式

CSS写在标签的style属性中

三种区别

图片[1]-css-秋风落叶

基础选择器

选择器，就是选取（查找）需要设置样式元素的方式

选择器 {
       属性名: 属性值;
}
选择器 {
       属性名: 属性值;
}
选择器 {
	     属性名: 属性值;
}

属性名和属性值合称为css属性

元素选择器

通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <p>我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <p>我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <p>我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>
图片[2]-css-秋风落叶

小结：

1、无论嵌套多少层，只要元素名称相同都会被找到

类选择器

通过类名称，找到页面中所有带这个类名称的元素，然后对其设置CSS样式

类选择器，也有人叫class选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .color-style {
            color: red;
        }
    </style>
</head>
<body>
    <p class="color-style">我爱中国</p>
    <p>我爱人民</p>
    <div class="color-style">我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .color-style {
            color: red;
        }
    </style>
</head>
<body>
    <p class="color-style">我爱中国</p>
    <p>我爱人民</p>
    <div class="color-style">我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .color-style {
            color: red;
        }
    </style>
</head>
<body>
    <p class="color-style">我爱中国</p>
    <p>我爱人民</p>
    <div class="color-style">我爱家乡</div>
</body>
</html>
图片[3]-css-秋风落叶

小结：

1、所有元素都有class属性，class属性的属性值叫类名

2、类名由数字、字母、下划线、中划线组成，不能以数字、中划线开头

3、一个元素可以有多个类名，类名之间用空格隔开

id选择器

通过元素id属性的属性值，找到页面中带这个id属性值的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我爱中国</p>
    <p id="two">我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我爱中国</p>
    <p id="two">我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我爱中国</p>
    <p id="two">我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>
图片[4]-css-秋风落叶

小结：

1、所有元素都有id属性

2、id属性值在一个页面中是唯一的

3、一个元素只能有一个id属性值

通配符选择器

查找页面中所有的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我爱中国</p>
    <p id="two">我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我爱中国</p>
    <p id="two">我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我爱中国</p>
    <p id="two">我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>
图片[5]-css-秋风落叶

小结：

1、通常用于网页重置样式，不常用

后代选择器

根据选择器查找符合条件的元素，再根据后代选择器查找符合条件的元素，然后对其设置CSS样

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one p {
            color: red;
        }
    </style>
</head>
<body>
    <div id="one">
        <p>1</p>
        <p>2</p>
        <div>3</div>
        <div>
            <p>4</p>
            <p>9</p>
        </div>
    </div>
    <div id="two">
        <p>10</p>
        <p>11</p>
        <div>12</div>
        <div>
            <p>13</p>
            <p>14</p>
        </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one p {
            color: red;
        }
    </style>
</head>
<body>
    <div id="one">
        <p>1</p>
        <p>2</p>
        <div>3</div>
        <div>
            <p>4</p>
            <p>9</p>
        </div>
    </div>
    <div id="two">
        <p>10</p>
        <p>11</p>
        <div>12</div>
        <div>
            <p>13</p>
            <p>14</p>
        </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one p {
            color: red;
        }
    </style>
</head>
<body>
    <div id="one">
        <p>1</p>
        <p>2</p>
        <div>3</div>
        <div>
            <p>4</p>
            <p>9</p>
        </div>
    </div>
    <div id="two">
        <p>10</p>
        <p>11</p>
        <div>12</div>
        <div>
            <p>13</p>
            <p>14</p>
        </div>
    </div>
</body>
</html>
图片[6]-css-秋风落叶

群组选择器

根据多个选择器各自查找符合条件的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p,h3 {
            color: red;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <h3>我爱人民</h3>
    <div>我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p,h3 {
            color: red;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <h3>我爱人民</h3>
    <div>我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p,h3 {
            color: red;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <h3>我爱人民</h3>
    <div>我爱家乡</div>
</body>
</html>
图片[7]-css-秋风落叶

字体样式

字体样式，针对文字本身样式

字体相关的CSS属性

图片[8]-css-秋风落叶

字体类型

语法：

font-family: 字体1,字体2,字体3...;
font-family: 字体1,字体2,字体3...;
font-family: 字体1,字体2,字体3...;

说明：

1、font-family属性可以设置多个属性值，用英文逗号隔开，生效顺序是从左到右。浏览器默认字体类型一般是”宋体”

2、字体类型只有一个英文单词，则不需要加上引号；字体类型是多个英文单词或中文的，则需要加上双引号

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-family: Arial;
        }
        h3 {
            font-family: monospace;
        }
        div {
            font-family: "新宋体";
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <h3>我爱人民</h3>
    <div>我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-family: Arial;
        }
        h3 {
            font-family: monospace;
        }
        div {
            font-family: "新宋体";
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <h3>我爱人民</h3>
    <div>我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-family: Arial;
        }
        h3 {
            font-family: monospace;
        }
        div {
            font-family: "新宋体";
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <h3>我爱人民</h3>
    <div>我爱家乡</div>
</body>
</html>
图片[9]-css-秋风落叶

字体大小

语法：

font-size: 数字 + px
font-size: 数字 + px
font-size: 数字 + px

说明：

1、px是像素单位，单位需要设置，否则无效

2、谷歌浏览器默认文字大小是16px

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-size: 18px;
        }
        div {
            font-size: 36px;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <div>我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-size: 18px;
        }
        div {
            font-size: 36px;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <div>我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-size: 18px;
        }
        div {
            font-size: 36px;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <div>我爱家乡</div>
</body>
</html>
图片[10]-css-秋风落叶

字体粗细

语法：

font-weight: normal/bold/100~900
font-weight: normal/bold/100~900
font-weight: normal/bold/100~900
图片[11]-css-秋风落叶

实际开发一般会设置bold，不设置默认是normal

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-weight: normal;
        }
        div {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <div>我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-weight: normal;
        }
        div {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <div>我爱家乡</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-weight: normal;
        }
        div {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <div>我爱家乡</div>
</body>
</html>
图片[12]-css-秋风落叶

字体风格

语法：

font-style: 取值
font-style: 取值
font-style: 取值
图片[13]-css-秋风落叶

不是所有字体都有italic属性值，如果没有italic的，则用oblique

font连写

语法：

font: style weight size family;
font: style weight size family;
font: style weight size family;

说明：

1、可以省略前两项，省略了相当于设置了默认值

不常用，作为了解

字体颜色

语法：

color: 颜色值
color: 颜色值
color: 颜色值

说明：

color属性取值常用有两种，一种是关键字（比如red、green、blue），另外一种是16进制RGB值（#000000，#FFFFFF）

问题一：给同一个元素设置了相同的属性样式，哪个生效？

答：样式会层叠（覆盖），写在最后面的会生效。

问题二：html里面有注释，css有没有注释，如何写？

<style>
    /* 采用元素选择器给p元素设置css样式 */
    p {
        color: #000000;  /* p元素字体颜色为黑色 */
    }
</style>
<style>
    /* 采用元素选择器给p元素设置css样式 */
    p {
        color: #000000;  /* p元素字体颜色为黑色 */
    }
</style>
<style>
    /* 采用元素选择器给p元素设置css样式 */
    p {
        color: #000000;  /* p元素字体颜色为黑色 */
    }
</style>

文本样式

文本样式，针对段落的排版效果

文本相关CSS属性

图片[14]-css-秋风落叶

首行缩进

语法：

text-indent: 像素值
text-indent: 像素值
text-indent: 像素值

说明：

缩进大小和字体大小是有关的，缩进1个字的空间等同于1个字的字体大小。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    p {
        font-size: 14px;
        text-indent: 28px;
    }
</style>
</head>
<body>
    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    p {
        font-size: 14px;
        text-indent: 28px;
    }
</style>
</head>
<body>
    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    p {
        font-size: 14px;
        text-indent: 28px;
    }
</style>
</head>
<body>
    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>
图片[15]-css-秋风落叶

水平对齐

语法：

text-align: 取值
text-align: 取值
text-align: 取值

说明：

text-align属性取值

图片[16]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-align: left;
    }
    .two {
        text-align: center;
    }
    .three {
        text-align: right;
    }
</style>
</head>
<body>
    <p class="one">生于忧患死于安乐</p>
    <p class="two">生于忧患死于安乐</p>
    <p class="three">生于忧患死于安乐</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-align: left;
    }
    .two {
        text-align: center;
    }
    .three {
        text-align: right;
    }
</style>
</head>
<body>
    <p class="one">生于忧患死于安乐</p>
    <p class="two">生于忧患死于安乐</p>
    <p class="three">生于忧患死于安乐</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-align: left;
    }
    .two {
        text-align: center;
    }
    .three {
        text-align: right;
    }
</style>
</head>
<body>
    <p class="one">生于忧患死于安乐</p>
    <p class="two">生于忧患死于安乐</p>
    <p class="three">生于忧患死于安乐</p>
</body>
</html>
图片[17]-css-秋风落叶

文本修饰

语法：

text-decoration: 取值
text-decoration: 取值
text-decoration: 取值

说明：

text-decoration属性值

图片[18]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-decoration: none;
    }
    .two {
        text-decoration: underline;
    }
    .three {
        text-decoration: line-through;
    }
    .four {
        text-decoration: overline;
    }
</style>
</head>
<body>
    <p class="one">生于忧患死于安乐</p>
    <p class="two">生于忧患死于安乐</p>
    <p class="three">生于忧患死于安乐</p>
    <p class="four">生于忧患死于安乐</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-decoration: none;
    }
    .two {
        text-decoration: underline;
    }
    .three {
        text-decoration: line-through;
    }
    .four {
        text-decoration: overline;
    }
</style>
</head>
<body>
    <p class="one">生于忧患死于安乐</p>
    <p class="two">生于忧患死于安乐</p>
    <p class="three">生于忧患死于安乐</p>
    <p class="four">生于忧患死于安乐</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-decoration: none;
    }
    .two {
        text-decoration: underline;
    }
    .three {
        text-decoration: line-through;
    }
    .four {
        text-decoration: overline;
    }
</style>
</head>
<body>
    <p class="one">生于忧患死于安乐</p>
    <p class="two">生于忧患死于安乐</p>
    <p class="three">生于忧患死于安乐</p>
    <p class="four">生于忧患死于安乐</p>
</body>
</html>
图片[19]-css-秋风落叶

大小写转换

语法：

text-transform: 取值
text-transform: 取值
text-transform: 取值

说明：

text-transform属性取值

图片[20]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-transform: none;
    }
    .two {
        text-transform: uppercase;
    }
    .three {
        text-transform: lowercase;
    }
    .four {
        text-transform: capitalize;
    }
</style>
</head>
<body>
    <p class="one">Hello World</p>
    <p class="two">Hello World</p>
    <p class="three">Hello World</p>
    <p class="four">hello world</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-transform: none;
    }
    .two {
        text-transform: uppercase;
    }
    .three {
        text-transform: lowercase;
    }
    .four {
        text-transform: capitalize;
    }
</style>
</head>
<body>
    <p class="one">Hello World</p>
    <p class="two">Hello World</p>
    <p class="three">Hello World</p>
    <p class="four">hello world</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-transform: none;
    }
    .two {
        text-transform: uppercase;
    }
    .three {
        text-transform: lowercase;
    }
    .four {
        text-transform: capitalize;
    }
</style>
</head>
<body>
    <p class="one">Hello World</p>
    <p class="two">Hello World</p>
    <p class="three">Hello World</p>
    <p class="four">hello world</p>
</body>
</html>
图片[21]-css-秋风落叶

行高

语法：

line-height: 取值;
line-height: 取值;
line-height: 取值;

说明：

1、取值可以是一个固定的数值（比如24px），也可以是一个百分数（比如150%）

line-height: 150%;
line-height: 150%;
line-height: 150%;

2、使用font-size属性和line-height属性的组合，可以让行高与字体大小之间保持一定的比例

font-size: 16px;
line-height: 1.5
font-size: 16px;
line-height: 1.5
font-size: 16px;
line-height: 1.5

3、使用line-height属性的继承值。如果父元素的line-height属性有值，那么子元素及后代元素会继承父元素的行高

body {
    line-height: 1.5;
}
p {
    font-size: 16px;
}
body {
    line-height: 1.5;
}
p {
    font-size: 16px;
}
body {
    line-height: 1.5;
}
p {
    font-size: 16px;
}

行高的设置要大于字体大小的设置，才会显得好看

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            font-size: 16px;
            line-height: 24px;
        }
    </style>
</head>
<body>
    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能</p>
</body>
</html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            font-size: 16px;
            line-height: 24px;
        }
    </style>
</head>
<body>
    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能</p>
</body>
</html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            font-size: 16px;
            line-height: 24px;
        }
    </style>
</head>
<body>
    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能</p>
</body>
</html
图片[22]-css-秋风落叶

间距

字间距

语法：

letter-spacing: 像素值
letter-spacing: 像素值
letter-spacing: 像素值

说明：

letter-spacing属性用来设置两个字之间的距离，一个英文字母或汉字都是当做一个字来处理

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            letter-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好吗？</p>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            letter-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好吗？</p>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            letter-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好吗？</p>
<body>
</body>
</html>
图片[23]-css-秋风落叶

词间距

语法：

word-spacing: 像素值;
word-spacing: 像素值;
word-spacing: 像素值;

说明：

word-spacing属性用来设置英文单词之间的距离

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            word-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好吗？</p>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            word-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好吗？</p>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            word-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好吗？</p>
<body>
</body>
</html>
图片[24]-css-秋风落叶

边框样式

元素基本可以定义边框，边框样式由边框宽度、边框外观和边框颜色三个属性组成。

图片[25]-css-秋风落叶

边框的宽度

语法：

border-width: 像素值;
border-width: 像素值;
border-width: 像素值;

说明：

边框border-width属性值是一个像素值

边框的外观

语法：

border-style: 取值;
border-style: 取值;
border-style: 取值;

说明：

border-style取值有三个

图片[26]-css-秋风落叶

边框的颜色

语法：

border-color: 颜色关键字/16进制RGB值
border-color: 颜色关键字/16进制RGB值
border-color: 颜色关键字/16进制RGB值
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            border-width: 1px;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
    <div>hello,world</div>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            border-width: 1px;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
    <div>hello,world</div>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            border-width: 1px;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
    <div>hello,world</div>
<body>
</body>
</html>
图片[27]-css-秋风落叶

边框样式简写

语法：

border: border-width border-style border-color;
border: border-width border-style border-color;
border: border-width border-style border-color;
div {
    border: 1px solid red;
}
div {
    border: 1px solid red;
}
div {
    border: 1px solid red;
}

边框局部样式

元素都是盒子模型，都是有四条边的，分别是上、下、左、右。所以又可以为元素某一边边设置边框样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 300px;
            height: 200px;
            border-top: 1px dashed darkred;
            border-bottom: 2px solid green;
            border-left: 3px solid grey;
            border-right: 4px dashed lightseagreen;
        }
    </style>
</head>
    <div></div>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 300px;
            height: 200px;
            border-top: 1px dashed darkred;
            border-bottom: 2px solid green;
            border-left: 3px solid grey;
            border-right: 4px dashed lightseagreen;
        }
    </style>
</head>
    <div></div>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 300px;
            height: 200px;
            border-top: 1px dashed darkred;
            border-bottom: 2px solid green;
            border-left: 3px solid grey;
            border-right: 4px dashed lightseagreen;
        }
    </style>
</head>
    <div></div>
<body>
</body>
</html>
图片[28]-css-秋风落叶

列表样式

列表项符号

列表项符号

在HTML中，无序列表和有序列表是通过标签ul、ol的type属性来定义的

<ol type="a">
    <li>my</li>
    <li>your</li>
</ol>
<ul type="disc">
    <li>my</li>
    <li>your</li>
</ul>
<ol type="a">
    <li>my</li>
    <li>your</li>
</ol>
<ul type="disc">
    <li>my</li>
    <li>your</li>
</ul>
<ol type="a">
    <li>my</li>
    <li>your</li>
</ol>
<ul type="disc">
    <li>my</li>
    <li>your</li>
</ul>

接触了css后，得改成list-style-type属性来定义。HTML专心负责结构，CSS专心负责样式。

语法：

list-style-type: 取值;
list-style-type: 取值;
list-style-type: 取值;

说明：

ol元素的list-style-type属性值

图片[29]-css-秋风落叶

ul元素的list-style-type属性值

图片[30]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol {
            list-style-type: lower-alpha;
        }
        ul {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol {
            list-style-type: lower-alpha;
        }
        ul {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol {
            list-style-type: lower-alpha;
        }
        ul {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>
图片[31]-css-秋风落叶

去除列表项符号

随着技术和审美不断的提高，实际开发中都是直接去除列表项符号

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol,ul {
            list-style-type: none;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol,ul {
            list-style-type: none;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol,ul {
            list-style-type: none;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>
图片[32]-css-秋风落叶

有序列表或无序列表设置了list-style-type: none后，样式都一样了。

列表项图片

语法：

list-style-image: url(图片路径);
list-style-image: url(图片路径);
list-style-image: url(图片路径);
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ul {
            list-style-image: url("small.png");
        }
    </style>
</head>
<body>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ul {
            list-style-image: url("small.png");
        }
    </style>
</head>
<body>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ul {
            list-style-image: url("small.png");
        }
    </style>
</head>
<body>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>
图片[33]-css-秋风落叶

list-style-image不能控制图片大小，实际开发中用background来替代

表格样式

表格标题位置

caption-side: 取值;
caption-side: 取值;
caption-side: 取值;

说明：

caption-side属性取值

图片[34]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>
图片[35]-css-秋风落叶

表格边框合并

border-collapse: 取值;
border-collapse: 取值;
border-collapse: 取值;

说明：

border-collapse属性取值

图片[36]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>
图片[37]-css-秋风落叶

表格边框间距

border-spacing: 像素值;
border-spacing: 像素值;
border-spacing: 像素值;
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-spacing: 10px;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-spacing: 10px;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-spacing: 10px;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>
图片[38]-css-秋风落叶

图片样式

图片大小

width: 像素值;
height: 像素值;
width: 像素值;
height: 像素值;
width: 像素值;
height: 像素值;
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
    <img src="small.png" >
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
    <img src="small.png" >
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
    <img src="small.png" >
</body>
</html>
图片[39]-css-秋风落叶

图片边框

border: 1px solid red;
border: 1px solid red;
border: 1px solid red;
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <img src="small.png" >
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <img src="small.png" >
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <img src="small.png" >
</body>
</html>
图片[40]-css-秋风落叶

图片对齐

水平对齐

语法：

text-align: 取值;
text-align: 取值;
text-align: 取值;

说明：

text-align属性取值

图片[41]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            text-align: left;
        }
        .i2 {
            text-align: center;
        }
        .i3 {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="i1">
        <img src="small.png" >
    </div>
    <div class="i2">
        <img src="small.png" >
    </div>
    <div class="i3">
        <img src="small.png" >
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            text-align: left;
        }
        .i2 {
            text-align: center;
        }
        .i3 {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="i1">
        <img src="small.png" >
    </div>
    <div class="i2">
        <img src="small.png" >
    </div>
    <div class="i3">
        <img src="small.png" >
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            text-align: left;
        }
        .i2 {
            text-align: center;
        }
        .i3 {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="i1">
        <img src="small.png" >
    </div>
    <div class="i2">
        <img src="small.png" >
    </div>
    <div class="i3">
        <img src="small.png" >
    </div>
</body>
</html>
图片[42]-css-秋风落叶

图片的水平对齐属性设置是在图片标签的父标签上实现的

垂直对齐

语法：

vertical-align: 取值;
vertical-align: 取值;
vertical-align: 取值;

说明：

vertical-align属性取值

图片[43]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            vertical-align: top;
        }
        .i2 {
            vertical-align: middle;
        }
        .i3 {
            vertical-align: baseline;
        }
        .i4 {
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div>
        <span>hello,world</span>
        <img class="i1" src="small.png" >
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i2" src="small.png" >
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i3" src="small.png" >
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i4" src="small.png" >
        <span>hello,world</span>
        <hr>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            vertical-align: top;
        }
        .i2 {
            vertical-align: middle;
        }
        .i3 {
            vertical-align: baseline;
        }
        .i4 {
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div>
        <span>hello,world</span>
        <img class="i1" src="small.png" >
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i2" src="small.png" >
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i3" src="small.png" >
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i4" src="small.png" >
        <span>hello,world</span>
        <hr>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            vertical-align: top;
        }
        .i2 {
            vertical-align: middle;
        }
        .i3 {
            vertical-align: baseline;
        }
        .i4 {
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div>
        <span>hello,world</span>
        <img class="i1" src="small.png" >
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i2" src="small.png" >
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i3" src="small.png" >
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i4" src="small.png" >
        <span>hello,world</span>
        <hr>
    </div>
</body>
</html>
图片[44]-css-秋风落叶

文字环绕

语法：

float: 取值;
float: 取值;
float: 取值;

说明：

float属性取值

图片[45]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
    <img src="small.png" >
    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
    <img src="small.png" >
    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
    <img src="small.png" >
    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>
图片[46]-css-秋风落叶

背景样式

背景颜色

语法：

background-color: 颜色值;
background-color: 颜色值;
background-color: 颜色值;

说明：

颜色值有两种表示方式，一种是颜色关键字，另外一种是16进制RGB值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 200px;
            height: 100px;
            /* 背景颜色 */
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div>hello,world</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 200px;
            height: 100px;
            /* 背景颜色 */
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div>hello,world</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 200px;
            height: 100px;
            /* 背景颜色 */
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div>hello,world</div>
</body>
</html>
图片[47]-css-秋风落叶

背景图片

引入背景图片

语法:

background-image: url(图片路径)
background-image: url(图片路径)
background-image: url(图片路径)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
图片[48]-css-秋风落叶

背景图片重复

语法：

background-repeat: 取值;
background-repeat: 取值;
background-repeat: 取值;

说明：

background-repeat属性取值

图片[49]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
图片[50]-css-秋风落叶

背景图片位置

语法：

background-position: 水平距离 垂直距离
background-position: 水平距离 垂直距离
background-position: 水平距离 垂直距离

通过像素值定图片位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: 10px 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: 10px 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: 10px 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
图片[51]-css-秋风落叶

通过关键字定位图片位置

水平方向左left、中center、右right

垂直方向上top、中center、下bottom

通过水平方向、垂直方向组合出9种方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
图片[52]-css-秋风落叶

背景图片固定

语法：

background-attachment: 取值;
background-attachment: 取值;
background-attachment: 取值;

说明：

background-attachment属性取值

图片[53]-css-秋风落叶

超链接样式

语法：

a {}
a:link {}
a:visited {}
a:hover{}
a:active{}
a {}
a:link {}
a:visited {}
a:hover{}
a:active{}
a {}
a:link {}
a:visited {}
a:hover{}
a:active{}

说明：

图片[54]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        a {
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        a {
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        a {
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>

实际开发，一般设置a、a:hover样式就可以了

盒子模型

图片[55]-css-秋风落叶

每一个元素都是由内容区、内边距、边框、外边距组成

图片[56]-css-秋风落叶

内容区

图片[57]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        img {
            width: 30px;
            height: 30px;
        }
        p {
            width: 50px;
            height: 50px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<img src="small.png" >
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        img {
            width: 30px;
            height: 30px;
        }
        p {
            width: 50px;
            height: 50px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<img src="small.png" >
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        img {
            width: 30px;
            height: 30px;
        }
        p {
            width: 50px;
            height: 50px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<img src="small.png" >
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>
图片[58]-css-秋风落叶

内边距

图片[59]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>
图片[60]-css-秋风落叶

外边距

图片[61]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>
图片[62]-css-秋风落叶

浮动布局

正常文档流就是我们没有使用浮动或者定位去改变的默认情况，按照从上到下，从左到右顺序的元素布局情况。

定义浮动

图片[63]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
    </div>
</body>
</html>
图片[64]-css-秋风落叶

清除浮动

图片[65]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
        <div class="clear"></div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
        <div class="clear"></div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
        <div class="clear"></div>
    </div>
</body>
</html>
图片[66]-css-秋风落叶

定位布局

固定定位

图片[67]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #s1 {
            position: fixed;
            top: 20px;
            left: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">回到顶部</div>
        <div id="s2">
            <p>内容区</p>
            ......
        </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #s1 {
            position: fixed;
            top: 20px;
            left: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">回到顶部</div>
        <div id="s2">
            <p>内容区</p>
            ......
        </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #s1 {
            position: fixed;
            top: 20px;
            left: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">回到顶部</div>
        <div id="s2">
            <p>内容区</p>
            ......
        </div>
    </div>
</body>
</html>
图片[68]-css-秋风落叶

相对定位

相对定位，指的是该元素的位置是相对于它的原始位置计算而来的

图片[69]-css-秋风落叶
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: relative;
            top: 5px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: relative;
            top: 5px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: relative;
            top: 5px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>
图片[70]-css-秋风落叶

绝对定位

把元素定位到任意你想要的位置，完全脱离文档流

语法：

position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;
position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;
position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: absolute;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: absolute;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: absolute;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>
图片[71]-css-秋风落叶

静态定位

用法：

position: static;
position: static;
position: static;

说明：

元素position属性的默认值是static

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: static;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: static;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: static;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>
图片[72]-css-秋风落叶

Happiness will never miss any people, sooner or later it will find you.
幸福不会遗漏任何人，迟早有一天它会找到你
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
语言
# 开发语言
喜欢就支持一下吧
点赞0 分享
istudy的头像-秋风落叶
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片
快捷回复
谢谢你的分享，我从中学到了很多！
教程很好用，谢谢！
好东西，学习一下！
楼主听话，快到碗里来！
路过一下，我只是来打酱油的！
水帖美如花，养护靠大家！

    暂无评论内容

文章目录