2018-08-17
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<!--链接式--> 7 ????<link rel="stylesheet" href="css/外部样式.css"> 8 ????<!--导入式--> 9 ????<style type="text/css">10 ????????@import "css/外部样式.css";11 ????</style>12 ????<style type="text/css">13 ????????/*标签选择器*/14 ????????p{15 ????????????color: green;16 ????????????font-family: 楷体;17 ????????????font-weight: bolder;18 ????????????font-size: 20px;19 ????????}20 ????????.first{21 ????????????color: aqua;22 ????????}23 ????????#second{24 ????????????color: cyan;25 ????????}26 27 ????</style>28 </head>29 <body>30 ????????<p>刘晶晶啊哈哈</p>31 ????????<p class="first">七夕快乐呀</p>32 ????????<p class="first">天天快乐呀快乐呀</p>33 ????????<!--id 不可以是数字-->34 ????????<p id="1">我想回家了</p>35 ????????<p id="second">我想回家了</p>36 ????????<!--行内样式 ?-->37 ????????<p style="color: antiquewhite;font-size: 20px">七夕呀！小点心！</p>38 39 </body>40 </html> 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<style type="text/css"> 7 ????????p{ 8 ????????????color: antiquewhite; 9 ????????}10 ????????/*后代选择器*/11 ????????p strong{12 ????????????color: cyan;13 ????????????font-family: 华文楷体;14 ????????????font-size: 25px;15 ????????}16 ????????/*交集选择器*/17 ????????/*id ??p#id*/18 ????????p.first{19 ????????????color: blue;20 ????????????font-family: 华文楷体;21 ????????????font-size: 25px;22 ????????}23 ????????p.second{24 ????????????color: blueviolet;25 ????????????font-size: 30px;26 ????????}27 28 ????????/*并集选择器*/29 ????????p,.three,#six{30 ????????????font-size: 35px;31 ????????????color: chartreuse;32 ????????}33 ????</style>34 </head>35 <body>36 ????<p>小杨同学很帅</p>37 ????<p> ?<strong>一表人才</strong>，哈哈哈哈</p>38 39 ????<p class="first">111111</p>40 ????<p class="second">222222</p>41 ????<p class="three">33333</p>42 ????<p id="six">66666</p>43 44 45 </body>46 </html>CSS样式
原文地址：https://www.cnblogs.com/twinkle-star/p/9491593.html