AM
今天的东西不算难 CSS样式嵌入
1行间 嵌入 span
2内嵌
id选择器 class选择器 元素选择器
还有他们的关系
并列 和 父子
3外部引入
<link rel="stylesheet" href="style.css"/>
1 <title></title> 2 <link rel="stylesheet" href="style.css"/> 3 <style> 4 /* id选择器*/ 5 #p1{ 6 color:red; 7 font-weight: 500; 8 /*class选择器*/ 9 .pp{ 10 color: blue; 11 font-size: 80px; 12 /*元素选择器*/ 13 span{ 14 color:yellow; 15 font-size: 80px; 16 /* 父子关系 */ 17 #p1 .pp{ 18 color: blue; 19 } 20 </style> 21 </head> 22 <!--CSS样式嵌入： 23 1.行间样式：在标签中添加style属性 24 格式：style="样式1：样式值；样式2=样式值2"(！注意！) 25 2.内嵌样式：在head标签中+一个 <style></style>,将样式写在其中 26 选择器：需要给标签设置id属性或class属性 27 1.id选择器：必须给标签设置id属性 28 例：id="s1" 29 <style> 30 #s1{ 31 样式1：样式值1； 32 样式2：样式值2 33 } 34 </style> 35 2.class选择器：必须给标签设置class属性 36 class:理解为 代表的是一类 37 例：class="pp" 38 <style> 39 .pp{ 40 样式1：样式值1； 41 样式2：样式值2 42 } 43 ！！！注意：id是用"#"表示" class用"."表示 44 3.元素(标签)选择器： 45 <style> 46 元素（标签）{ 47 样式1：样式值1； 48 样式2：样式值2 49 } 50 </style> 51 选择器之间的关系： 52 1.并列关系： 53 选择器1,选择器2{ 54 样式1:样式值1； 55 样式2：样式值2 56 } 57 2.父子关系：理解为在标签例的子标签的关系 58 选择器1 选择器2{ 59 样式1：样式值2； 60 样式2：样式值2 61 } 62 选择器之间优先级： 63 id选择器>class选择器>元素选择器 64 3.外部引入： 65 新建 xxx.css文件 66 在html文件中的head标签中，引入css文件 67 格式：<link href="css文件路径"> 68 整个style格式都可以放到css样式里面 69 70 --> 71 <body> 72 <!--<span></span>:无功能，用于包裹文字，给文字添加样式--> 73 <span style="color:#;font-size: 60px;">你好</span> 74 <p id="p1" class="p2">这是一个段落标签</p> 75 <p id="p1" class="pp">这是一个段落标签</p> 76 <p id="p1" class="p2">这是一个段落标签</p> 77 <p id="p1" class="pp">这是一个段落标签</p> 78 <span>span1</span> 79 <span>span2</span> 80 <span>span3</span> 81 <!-- 父子关系 --> 82 <p id="p1"> 83 aaaasdasd 84 <span class="pp">rgwrgffff</span> 85 <span class="pp">gfrgrgrgrg</span> 86 <span class="pp">ddddddddddddddddd</span> 87 </p>
PM
字体样式
文字样式和文本样式
text的属性
<!-- 字体样式 ：只要标签中有font就是文字样式--> <style> #s1{ font-family:宋体; font-size: 60px; font-weight: bold; font-style: italic; color: #FF0000; } #p1{ /* 下划线 */ text-decoration: underline; /* 删除线 */ text-decoration: line-through; /* 顶划线 */ text-decoration: overline; /* 转换大写 */ text-decoration: uppercase; /* 所有单词首字母转大写 */ text-transform: capitalize; /* 首行缩进 */ text-indent: 30px; /* 文本对齐：左中右 */ text-align: center left right; /* 行高 */ line-height: 20px; /* 背景色 */ background-color: #FF0000; } </style> </head> <body> <table height="30%" width="30%"></table> <span id="s1">这是一个span标签</span> <p id="p1">这是一个P标签hello world</p>