CSS 颜色的三种表示方式：
十六进制值 - 如: ＃FF0000一个RGB值 - 如: RGB(255,0,0)颜色的名称 - 如: redRGBA 语法：
R：红色值。正整数 | 百分数G：绿色值。正整数 | 百分数B：蓝色值。正整数| 百分数A：透明度。取值0~1之间（0为透明） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> li:first-child { color: red;/**/ } li:nth-child(2) { color: #000; /*#ff0000 红*/ } .rgb { color: rgb(0%,0%,0%); } .rgba{ color: rgba(13, 129, 71, 0.3); } </style> </head> <body> <ul> <li>预定义的颜色值 red green yellow </li> <li>十六进制</li> <li class="rgb">rgb代码</li> <li class="rgba">rgba代码</li> </ul> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p { line-height: 26px; /*行间距*/ text-indent: 2em;/* 2倍的汉字宽度，首行缩进*/ } h2 { text-align: center; /* 居中 */ text-align: left; /* 左对齐 */ text-align: right; /* 右对齐 */ text-align: justify; /* 两端对齐 */ } </style> </head> <body> <h2>冯提莫</h2> <p>鬼马精灵冯提莫，在演唱歌曲《别找我麻烦》时，以其活力的唱腔与独特的冯式蜜娃唱腔，诠释出了梦幻的爱情物语与魅力能量。此外，她还凭借着优秀的职业态度、对音乐的热忱和探索，以及到位的演唱实力与独特的音乐个性，展现出了她身上独特的青春气质、略带气音的唱腔与具有个人辨识度的歌手特质 [1] 。</p> <p>冯提莫有着可爱的外表、呆萌的性格、娇小玲珑而又凹凸有致的身材，以及清纯可人的迷人气质。此外，她还是一个天真无邪、清纯甜美、天真善良、善解人意的邻家小女孩 </p> <p></p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { letter-spacing: 6px; /*字间距*/ } p { word-spacing: 8px; /* 单词间距 针对于英文 对中文无效*/ } /*针对英文*/ p.uppercase {text-transform:uppercase;} /*全部转换为大写字母*/ p.lowercase {text-transform:lowercase;} /*全部转换为小写字母*/ p.capitalize {text-transform:capitalize;} /*将单词的首字母转换为大写字母*/ </style> </head> <body> <div>CSS从入门到放弃</div> <p>my name is 真学霸</p> <!-- 文本转换 --> <p class="uppercase">This is some text.</p> <p class="lowercase">This is some text.</p> <p class="capitalize">This is some text.</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .a1 {text-decoration:none;} /*text-decoration属性主要是用来删除链接的下划线：*/ /*也可以这样装饰文字：*/ h1 {text-decoration:overline;} /*线在文字上方*/ h2 {text-decoration:line-through;} /*删除线 --- 线穿过文字*/ h3 {text-decoration:underline;} /*下划线 --- 线在文字下方*/ </style> </head> <body> <p>链接到: <a href="//www.runoob.com/" class="a1">runoob.com</a></p> <p>链接到: <a href="//www.runoob.com/" >runoob.com</a></p> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> </body> </html
