12.文本大小写的转换与颜色设置（transform ）
说明使用transform可以设置文本的大小写与首字母转换，前提是只能转换英文的，中文的转换不了
CSS
/* 示例：设置h1标签的颜色 */ p{ color: blueviolet; } /* 示例：仅对英文生效!!! */ p.transform{ /* 把p标签英文变成大写 */ text-transform: uppercase; /*把p标签英文变成小写 */ text-transform: lowercase; /* 把p标签首字母变成大写 */ text-transform: capitalize; }
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本转换大小写</title> <!-- 头部标签 --> <!-- 这是css的路径 --> <link rel="stylesheet" href="Test.css"> </head> <!-- 身体标签 --> <body> <p class="transform">我是aa<p> <p class="transform">我是BB<p> <p class="transform">我是cc</p> </body> </html>
13.文字水平对齐
说明：可以使文字向左、右、居中、水平两侧对齐
CSS
/* 文本对比方式 */ p.a{ /* 左 */ text-align: left; } p.b{ /* 中 */ text-align: center; } p.c{ /* 右 */ text-align: right; } p{ /* 左右两侧都对齐 */ text-align: justify; }
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本转换大小写</title> <!-- 头部标签 --> <!-- 这是css的路径 --> <link rel="stylesheet" href="Test.css"> </head> <!-- 身体标签 --> <body> <p class="a">p标签一号<p> <p class="b">p标签二号<p> <p class="c">p标签三号</p> <p>p标签四号,大家可以加一下我的公众号，”云边的快乐猫“</p> </body> </html>
14.图片与文字之间垂直对齐（vertical-align）
说明：主要用来设置文字的垂直对齐，一般有图片对照看着才更直观
有顶部、底部、上角标、下角标对齐
CSS
img.a{ /* 基于图片顶部对齐 */ vertical-align: text-top; } img.b{ /* 基于图片底部对齐 */ vertical-align: text-bottom; } img.c{ /* 基于图片上角标对齐 */ vertical-align: sub; } img.d{ /* 基于图片下角标对齐 */ vertical-align: super; }
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本转换大小写</title> <!-- 头部标签 --> <!-- 这是css的路径 --> <link rel="stylesheet" href="Test.css"> </head> <!-- 身体标签 --> <body> <p ><img src="/图片/壁纸/111.jpg" alt="width=50" height="50" class="a"> p标签一号<p> <p class="b"><img src="/图片/壁纸/111.jpg" alt="width=50" height="50" class="b">p标签二号<p> <p class="c"><img src="/图片/壁纸/111.jpg" alt="width=50" height="50" class="c">p标签三号</p> <p class="d"><img src="/图片/壁纸/111.jpg" alt="width=50" height="50" class="d">p标签四号,大家可以加一下我的公众号，”云边的快乐猫“</p> </body> </html>
15.文字和文字与行和行的间距
CSS
h1{ /* 示例：字体间距 */ letter-spacing: 10px; } /* 示例：行与行的间距 */ p{ line-height: 100px; }
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行间距</title> <!-- 头部标签 --> <!-- 这是css的路径 --> <link rel="stylesheet" href="Test.css"> </head> <!-- 身体标签 --> <body> <h1>我是h1标签</h1> <p>p标签一号</p> <p>p标签二号</p> </body> </html>
16.文字之线条样式（text-decoration）
说明：
（必须有）线条种类：实线----solid、双实线----double、圆点线----dotted、虚线----dashed、波浪线----wavy
（根据需求可有可无）线条位置：上划线---overline、删除线---line-through、下划线---underline
（根据需求可有可无）线条颜色：自定义
（根据需求可有可无）线条大小：自定义
CSS
/* 线条种类 实线----solid、双实线----double、圆点线----dotted、虚线----dashed、波浪线----wavy*/ h1{ /*overline:上划线 可设置线条颜色 双实线 线条大小*/ text-decoration: overline blueviolet double 5px; } h2{ /* line-through：删除线 可设置线条颜色 虚线 线条大小*/ text-decoration: line-through blueviolet dashed 2px; } h3{ /* underline：下划线 可设置线条颜色 波浪线 线条大小*/ text-decoration: underline blueviolet wavy 5px; }
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行间距</title> <!-- 头部标签 --> <!-- 这是css的路径 --> <link rel="stylesheet" href="Test.css"> </head> <!-- 身体标签 --> <body> <h1>我是h1标签</h1> <h2>我是h2标签</h2> <h3>我是h3标签</h3> </body> </html>
17.字体的样式与大小（font-family、font-size）
说明：要看支持什么字体可以在浏览器的右上角的三个小点--设置--外观--自定义字体里面查看
字体样式
/* 带头角----serif、现代简约----sans-serif、等宽字体--monospace、草书字体---cursive、装饰性字体----fantasy、草书字体---BrushScript MT*/
/* 常用：微软雅黑--Microsoft Yahei、苹方简---PingFang SC其他：浏览器查看*/
字体大小
/* 字体大小px是静态的，不会随着网页的拉伸而变化，em是随着网页的拉伸动态变化的，推荐使用px */
CSS
/* 带头角----serif、现代简约----sans-serif、等宽字体--monospace、草书字体---cursive、装饰性字体----fantasy、草书字体---BrushScript MT*/ /* 常用：微软雅黑--Microsoft Yahei、苹方简---PingFang SC其他：*/ /* 字体大小px是静态的，不会随着网页的拉伸而变化，em是随着网页的拉伸动态变化的，推荐使用px */ h1{ font-family: sans-serif; } h2{ /* 当后面的字体不生效，双引号里面的备份字体才生效 */ font-family: "BrushScript MT",Cursive; } h3{ font-family: 宋体; } h4{ font-family: 隶书; } h5{ font-family: 仿宋体; font-size: 1em; } h6{ font-family: 微软雅黑; font-size: 20px; }
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体样式</title> <!-- 头部标签 --> <!-- 这是css的路径 --> <link rel="stylesheet" href="Test.css"> </head> <!-- 身体标签 --> <body> <h1>I'm a handsome guy</h1> <h2>mydafafa am a beautiful woman</h2> <h3>I would like to have dinner</h3> <h4>我是一个大帅哥</h4> <h5>我是一个大美女</h5> <h6>我想吃饭</h6> </body> </html>
18.字体倾斜和粗细的样式（ font-style、font-weight）
说明：
/* 字体样式 正常字体---normal、倾斜---italic、倾斜（部分浏览器不支持）---oblique*/
/* 字体粗细,注意，这里使用100~900或者后面的英文都可以 细体----lighter、正常字体---normal、加粗字体---bold、更粗字体---bolder */
/* 字体样式 正常字体---normal、倾斜---italic、倾斜（部分浏览器不支持）---oblique*/ /* 字体粗细,注意，这里使用100~900或者后面的英文都可以 细体----lighter、正常字体---normal、加粗字体---bold、更粗字体---bolder */ p.p1{ font-style: normal; font-weight: 100; } p.p2{ font-style: italic; font-weight: 500; } p.p3{ font-style: oblique; font-weight: bolder; }
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体样式</title> <!-- 头部标签 --> <!-- 这是css的路径 --> <link rel="stylesheet" href="Test.css"> </head> <!-- 身体标签 --> <body> <p class="p1">我是p1标签</p> <p class="p2">我是p2标签</p> <p class="p3">我是p3标签</p> </body> </html>
19.谷歌字体和Icon图标
说明：为什么要使用谷歌字体，因为谷歌字体是免费的，有1000+的种类,介于这个比较花里胡哨，就用的时候再查就好了
20.各种小图标的网站(Icon)
说明：这个网站有各种需要的小图标，可以直接去下载使用
21.选择器的优先级
行内样式>ID选择器>类选择器>元素选择器>通用选择器
对应的权重值分别是1000>100>10>1>0
22.文本的边框（border）
说明：可以定义文本的边框，默认是定义是个边框的，如果需要单独定义那就要分别设置上下左右的边框属性。线条类型的属性是必须要定义的，颜色和大小可以根据需求要不要定义都可以
线条的类型：点状的边框---dotted、虚线边框---dashed、实线边框---solid、双倍边框--double、无边框---none、隐藏的边框--hidden
CSS
/* 线条的类型：点状的边框---dotted、虚线边框---dashed、实线边框---solid、双倍边框--double、无边框---none、隐藏的边框--hidden */ p.p1{ /* 边框粗细 必需：边框的线条类型 边框的颜色 */ border: 5px solid rebeccapurple; } p.p2{ border: 10px dashed yellow; } p.p3{ border: 5px dotted rebeccapurple; }
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体样式</title> <!-- 头部标签 --> <!-- 这是css的路径 --> <link rel="stylesheet" href="Test.css"> </head> <!-- 身体标签 --> <body> <p class="p1">我是p1标签</p> <p class="p2">我是p2标签</p> <p class="p3">我是p3标签</p> </body> </html>
23.无序列表和有序列表和图片标记 （list-style-type、ist-style-image）
说明：可以给文字列表定义顺序
无序有序列表：list-style-type:定义
图片列表：list-style-image:定义
删除列表标记：list-style: none;
无序列表： 空心圆点---circle、实心圆点---disc、实心方块----square
有序列表 阿拉伯数字--decimal、罗马数字---upper-roman、英文小写字母---lower-alpha
CSS
/*无序列表： 空心圆点---circle、实心圆点---disc、实心方块----square */ ul.a{ list-style-type: disc; } /* 有序列表 阿拉伯数字--decimal、罗马数字---upper-roman、英文小写字母---lower-alpha */ ol.b{ list-style-type: decimal; } /* 图片列表标记 url里面放图片路径*/ ul.c{ list-style-image: url(/图片/壁纸/111.jpg ) ; } /* 删除定义的列表 */ ul.c{ list-style: none; }
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表</title> <!-- 头部标签 --> <!-- 这是css的路径 --> <link rel="stylesheet" href="Test.css"> </head> <!-- 身体标签 --> <body> <!-- 无序列表 --> <ul class="a"> <li>大哥</li> <li>二哥</li> <li>三哥</li> </ul> <!-- 有序列表 --> <ol class="b"> <li>刘备</li> <li>关羽</li> <li>张飞</li> </ol> <!-- 图片标记列表 --> <ul class="c"> <li>三国</li> <li>真好玩</li> </ul> </body> </html>
24.CSS背景属性设置(background)
说明:可以用这个设置页面的背景图片
/* 背景颜色：rgba是设置颜色的透明度，最后面那个值越小越透明0~1*/
/* 背景图片：url里面填写图片路径 */
/*铺满还是不铺满页面： 铺满--repeat、不铺满---no-repeat */
/*图片位置： right和bottom是设置图片的位置 水平样式：左--left、中间--center、右--right 垂直样式：顶--top、中--center、底部--bottom */
/* 鼠标滚动：同时滚动---scroll、背景固定---fixed */
CSS
html,body{ /* 背景颜色：rgba是设置颜色的透明度，最后面那个值越小越透明0~1*/ /* 背景图片：url里面填写图片路径 */ /*铺满还是不铺满页面： 铺满--repeat、不铺满---no-repeat */ /*图片位置： right和bottom是设置图片的位置 水平样式：左--left、中间--center、右--right 垂直样式：顶--top、中--center、底部--bottom */ /* 鼠标滚动：同时滚动---scroll、图片固定---fixed */ background: rgba(0, 255, 0, 0.1) url(/图片/个人/杂物/小图片.png) no-repeat right bottom scroll ; }
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表</title> <!-- 头部标签 --> <!-- 这是css的路径 --> <link rel="stylesheet" href="Test.css"> </head> <!-- 身体标签 --> <body> <p>人生不能重来，遇到的人请务必去珍惜</p> <p>人生不能重来，遇到的人请务必去珍惜</p> <p>人生不能重来，遇到的人请务必去珍惜</p> <p>人生不能重来，遇到的人请务必去珍惜</p> <p>人生不能重来，遇到的人请务必去珍惜</p> <p>人生不能重来，遇到的人请务必去珍惜</p> <p>人生不能重来，遇到的人请务必去珍惜</p> <p>人生不能重来，遇到的人请务必去珍惜</p> <p>人生不能重来，遇到的人请务必去珍惜</p> <p>人生不能重来，遇到的人请务必去珍惜</p> <p>人生不能重来，遇到的人请务必去珍惜</p> <p>人生不能重来，遇到的人请务必去珍惜</p> <p>人生不能重来，遇到的人请务必去珍惜</p> </body> </html>
