css

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 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片快捷回复

    暂无评论内容