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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681883620-image.png)
基础选择器
选择器,就是选取(查找)需要设置样式元素的方式
选择器 {属性名: 属性值;}选择器 { 属性名: 属性值; }选择器 { 属性名: 属性值; }
属性名和属性值合称为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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681883872-image.png)
小结:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681884074-image.png)
小结:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681884203-image.png)
小结:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681884289-image.png)
小结:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681884592-image.png)
群组选择器
根据多个选择器各自查找符合条件的元素,然后对其设置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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681884663-image.png)
字体样式
字体样式,针对文字本身样式
字体相关的CSS属性
![图片[8]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681884704-image.png)
字体类型
语法:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681970735-image.png)
字体大小
语法:
font-size: 数字 + pxfont-size: 数字 + pxfont-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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681970943-image.png)
字体粗细
语法:
font-weight: normal/bold/100~900font-weight: normal/bold/100~900font-weight: normal/bold/100~900
![图片[11]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681970987-image.png)
实际开发一般会设置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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681971041-image.png)
字体风格
语法:
font-style: 取值font-style: 取值font-style: 取值
![图片[13]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681971157-image.png)
不是所有字体都有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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681971346-image.png)
首行缩进
语法:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681971433-image.png)
水平对齐
语法:
text-align: 取值text-align: 取值text-align: 取值
说明:
text-align属性取值
![图片[16]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681971483-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681971524-image.png)
文本修饰
语法:
text-decoration: 取值text-decoration: 取值text-decoration: 取值
说明:
text-decoration属性值
![图片[18]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681971607-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681971640-image.png)
大小写转换
语法:
text-transform: 取值text-transform: 取值text-transform: 取值
说明:
text-transform属性取值
![图片[20]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681971694-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681971717-image.png)
行高
语法:
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.5font-size: 16px; line-height: 1.5font-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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681971912-image.png)
间距
字间距
语法:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681972028-image.png)
词间距
语法:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681972089-image.png)
边框样式
元素基本可以定义边框,边框样式由边框宽度、边框外观和边框颜色三个属性组成。
![图片[25]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681972136-image.png)
边框的宽度
语法:
border-width: 像素值;border-width: 像素值;border-width: 像素值;
说明:
边框border-width属性值是一个像素值
边框的外观
语法:
border-style: 取值;border-style: 取值;border-style: 取值;
说明:
border-style取值有三个
![图片[26]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682060843-image.png)
边框的颜色
语法:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682060895-image.png)
边框样式简写
语法:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682061038-image.png)
列表样式
列表项符号
列表项符号
在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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682061167-image.png)
ul元素的list-style-type属性值
![图片[30]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682061179-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682061212-image.png)
去除列表项符号
随着技术和审美不断的提高,实际开发中都是直接去除列表项符号
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682061279-image.png)
有序列表或无序列表设置了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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682061370-image.png)
list-style-image不能控制图片大小,实际开发中用background来替代
表格样式
表格标题位置
caption-side: 取值;caption-side: 取值;caption-side: 取值;
说明:
caption-side属性取值
![图片[34]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682061868-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682061896-image.png)
表格边框合并
border-collapse: 取值;border-collapse: 取值;border-collapse: 取值;
说明:
border-collapse属性取值
![图片[36]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062005-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062031-image.png)
表格边框间距
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062119-image.png)
图片样式
图片大小
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062163-image.png)
图片边框
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062197-image.png)
图片对齐
水平对齐
语法:
text-align: 取值;text-align: 取值;text-align: 取值;
说明:
text-align属性取值
![图片[41]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062241-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062257-image.png)
图片的水平对齐属性设置是在图片标签的父标签上实现的
垂直对齐
语法:
vertical-align: 取值;vertical-align: 取值;vertical-align: 取值;
说明:
vertical-align属性取值
![图片[43]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062276-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062303-image.png)
文字环绕
语法:
float: 取值;float: 取值;float: 取值;
说明:
float属性取值
![图片[45]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062336-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062352-image.png)
背景样式
背景颜色
语法:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1681884989-image.png)
背景图片
引入背景图片
语法:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062401-image.png)
背景图片重复
语法:
background-repeat: 取值;background-repeat: 取值;background-repeat: 取值;
说明:
background-repeat属性取值
![图片[49]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062416-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062430-image.png)
背景图片位置
语法:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062456-image.png)
通过关键字定位图片位置
水平方向左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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062477-image.png)
背景图片固定
语法:
background-attachment: 取值;background-attachment: 取值;background-attachment: 取值;
说明:
background-attachment属性取值
![图片[53]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062494-image.png)
超链接样式
语法:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/04/1682062586-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684134890-image.png)
每一个元素都是由内容区、内边距、边框、外边距组成
![图片[56]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684134910-image.png)
内容区
![图片[57]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684134958-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684135010-image.png)
内边距
![图片[59]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684135039-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684135061-image.png)
外边距
![图片[61]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684135104-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684135144-image.png)
浮动布局
正常文档流就是我们没有使用浮动或者定位去改变的默认情况,按照从上到下,从左到右顺序的元素布局情况。
定义浮动
![图片[63]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684135195-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684135220-image.png)
清除浮动
![图片[65]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684135254-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684135275-image.png)
定位布局
固定定位
![图片[67]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684135314-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684135344-image.png)
相对定位
相对定位,指的是该元素的位置是相对于它的原始位置计算而来的
![图片[69]-css-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684135387-image.png)
<!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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684135413-image.png)
绝对定位
把元素定位到任意你想要的位置,完全脱离文档流
语法:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684135460-image.png)
静态定位
用法:
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-秋风落叶](https://wangjian.run/wp-content/uploads/2023/05/1684135504-image.png)
暂无评论内容