<style type=“text/css“>详解

本文介绍了在HTML中应用CSS样式的三种常见方法:内部引用,通过style标签在HTML头部定义样式;外部引用,利用link标签链接外部CSS文件;以及内联引用,直接在HTML元素中定义CSS样式。每种方法的特点和适用场景都有所不同,内部引用方便管理,外部引用保持页面结构清晰,内联引用则适用于特定样式需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

type="text/css"是指定MIME类型,其中:   
  text是指对象为网页中的文本   
  css或是javascript是指当前指定的文本类型...
如果要在HTML文件中应用CSS样式,最常用的有三种方法:

1.内部引用

所谓内部引用就是运用style标签引用在同HTML页内<HEAD></HEAD>部分的css定义。
2.外部引用

外部引用就是用<link>标签引用外部CSS文件中的样式。如欲实现上述效果,可将CSS做成单独文件。不过使用这种方法引用要确保CSS文件和HTML文件的相对路径完整无误,要不然HTML文档是不会找到CSS样式的。

3.内联引用

内联引用其实就是在应用CSS样式的HTML部分直接在所做用的标签上定义CSS样式,这种方法最直接,但是缺点也最明显,最大的问题就是代码繁冗,作用域也仅仅在定义的标签的作用范围
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2023610221 诸梦盈</title> <style> header{ width: 1200px; padding: 0; margin: 0 auto; box-sizing: border-box; } header h1{ text-align: center; } hr{ height: 2px; background-color: #aaaaff; border: none; } .gwc{ width: 1200px; margin: auto; } .bt{ width: 1200px; height: 50px; line-height: 50px; color:#aaaaff; font-size: 32px; } .tab{ margin-top: 20px; width: 1200px; border-collapse: collapse; } thead tr th{ height:50px; text-align: left; background-color: #aaaaff; padding-left: 10px; } thead tr th:nth-of-type(1){ width: 80px; } img{ width: 60px; height: 60px; } td{ height: 80px; padding-left: 10px; border-bottom: 2px solid #aaaaff; } .btn1{ background-color:#aaaaff; border: none; width: 20px; height: 20px; } input{ width: 18px; } .sc{ background-color: crimson; width: 50px; height: 30px; border: 0; color: white; } #yhq,#jsxx{ width: 1200px; height: 50px; line-height: 50px; color:#aaaaff; font-size: 32px; padding: 10px 0px; } .yhzc{ display: flex; flex-wrap: wrap; padding-right: 20px; margin:auto; width: 1200px; } .yhqbh { background-color: blue; color: white; } #yhq1,#yhq2,#yhq3{ width: 380px; height: 100px; margin:auto; background-color: #aaaaff; border: 2px dotted #aa55ff; color: white; text-align: center; } .js{ width: 1200px; } .jswz{ height: 50px; background-color: #aaaaff; } .js-title{ margin: 5px; padding-right: 5px; font-size: 15px; } #zongshu,#zongjia,#shuliang,#manjian,#yinfu{ float: right; padding: 5px; } .yfje{ font-size: 20px; color: blueviolet; } #yinfu{ font-size: 20px; color: blueviolet; } #jsbtn{ margin-top: 10px; background-color: #aaaaff; width: 50px; height: 30px; color: white; float: right; } /* 弹窗 (background) */ .tc { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; } #jsxq{ font-size: 32px; font-weight: bold; padding-bottom: 20px; } .close{ float: right; font-size: 32px; } .close:hover{ color:red; } /* 弹窗内容 */ .tc-content { position: relative; background-color: #fefefe; margin:auto; border: 1px solid #888; width: 600px; } </style> </head> <body> <header> <h1>学生文具购物车</h1> <hr /> </header> <section class="gwc"> <div class="bt"> <span>已选商品</span> <hr /> </div> <table class="tab"> <thead> <tr> <th>图片</th> <th>商品</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr id="product1"> <td> <img src="img/pic1.jpg"/> </div> </td> <td> <div class="ms-name">2B铅笔(12支笔)</div> <div class="ms1">优质木质拖拽,书写顺畅,不粘附</div> </td> <td > <span class="original-price">¥15.00</span> </td> <td > <button class="btn1" onclick="updateQuantity(1, -1)">-</button> <input type="text" class="quantity-input" id="qty1" value="1" readonly> <button class="btn1" onclick="updateQuantity(1, 1)">+</button> </td> <td > <div class="jg" id="jg1">¥15</div> </td> <td > <button class="sc" onclick="removeProduct(1)"> 删除 </button> </td> </tr> <tr id="product2"> <td> <img src="img/pic2.jpg"/> </div> </td> <td> <div class="ms-name">A5笔记本</div> <div class="ms1">优质纸张,方格设计,适合日常记录<div> </td> <td > <span class="original-price">¥12</span> </td> <td > <button class="btn1" onclick="updateQuantity(2, -1)">-</button> <input type="text" class="quantity-input" id="qty2" value="1" readonly> <button class="btn1" onclick="updateQuantity(2, 1)">+</button> </td> <td > <div class="jg" id="jg2">¥12</div> </td> <td > <button class="sc" onclick="removeProduct(2)"> 删除 </button> </td> </tr> <tr id="product3"> <td> <img src="img/pic3.jpg"/> </div> </td> <td> <div class="ms-name">彩色荧光笔(5色)</div> <div class="ms1">多彩荧光标记笔,不易洇染</div> </td> <td > <span class="original-price">¥18.00</span> </td> <td > <button class="btn1" onclick="updateQuantity(3, -1)">-</button> <input type="text" class="quantity-input" id="qty3" value="1" readonly> <button class="btn1" onclick="updateQuantity(3, 1)">+</button> </td> <td > <div class="jg" id="jg3">¥18</div> </td> <td > <button class="sc" onclick="removeProduct(3)"> 删除 </button> </td> </tr> <tr id="product4"> <td> <img src="img/pic4.jpg"/> </div> </td> <td> <div class="ms-name">橡皮擦(3块装)</div> <div class="ms1">高效擦除,不留痕迹,不易碎</div> </td> <td > <span class="original-price">¥6.00</span> </td> <td > <button class="btn1" onclick="updateQuantity(4, -1)">-</button> <input type="text" class="quantity-input" id="qty4" value="1" readonly> <button class="btn1" onclick="updateQuantity(4, 1)">+</button> </td> <td > <div class="jg" id="jg4">¥6</div> </td> <td > <button class="sc" onclick="removeProduct(4)"> 删除 </button> </td> </tr> <tr id="product5"> <td> <img src="img/pic5.jpg"/> </div> </td> <td> <div class="ms-name">直尺30cm</div> <div class="ms1">透明刻度清晰,耐用防折断</div> </td> <td > <span class="original-price">¥5</span> </td> <td > <button class="btn1" onclick="updateQuantity(5, -1)">-</button> <input type="text" class="quantity-input" id="qty5" value="1" readonly> <button class="btn1" onclick="updateQuantity(5, 1)">+</button> </td> <td > <div class="jg" id="jg5">¥5</div> </td> <td > <button class="sc" onclick="removeProduct(5)"> 删除 </button> </td> </tr> <tr id="product6"> <td> <img src="img/pic6.jpg"/> </div> </td> <td> <div class="ms-name">圆规</div> <div class="ms1">精密绘图工具,金属材质耐用</div> </td> <td > <span class="original-price">¥8</span> </td> <td > <button class="btn1" onclick="updateQuantity(6, -1)">-</button> <input type="text" class="quantity-input" id="qty6" value="1" readonly> <button class="btn1" onclick="updateQuantity(6, 1)">+</button> </td> <td > <div class="jg" id="jg6">¥8</div> </td> <td > <button class="sc" onclick="removeProduct(6)"> 删除 </button> </td> </tr> <tr id="product7"> <td> <img src="img/pic7.jpg"/> </div> </td> <td> <div class="ms-name">钢笔</div> <div class="ms1">经典款式,流畅书写,赠送墨囊</div> </td> <td > <span class="original-price">¥20.00</span> </td> <td > <button class="btn1" onclick="updateQuantity(7, -1)">-</button> <input type="text" class="quantity-input" id="qty7" value="1" readonly> <button class="btn1" onclick="updateQuantity(7,1)">+</button> </td> <td > <div class="jg" id="jg7">¥20</div> </td> <td > <button class="sc" onclick="removeProduct(7)"> 删除 </button> </td> </tr> <tr id="product8"> <td> <img src="img/pic8.jpg"/> </div> </td> <td> <div class="ms-name">文件夹</div> <div class="ms1">A4尺寸,可装30页纸,多色可选</div> </td> <td > <span class="original-price">¥16.00</span> </td> <td > <button class="btn1" onclick="updateQuantity(8, -1)">-</button> <input type="text" class="quantity-input" id="qty8" value="1" readonly> <button class="btn1" onclick="updateQuantity(8, 1)">+</button> </td> <td > <div class="jg" id="jg8">¥16</div> </td> <td > <button class="sc" onclick="removeProduct(8)"> 删除 </button> </td> </tr> <tr id="product9"> <td> <img src="img/pic9.jpg"/> </div> </td> <td> <div class="ms-name">修正带</div> <div class="ms1">5mm宽度,8m长,修正精确无残留</div> </td> <td > <span class="original-price">¥10.00</span> </td> <td > <button class="btn1" onclick="updateQuantity(9, -1)">-</button> <input type="text" class="quantity-input" id="qty9" value="1" readonly> <button class="btn1" onclick="updateQuantity(9, 1)">+</button> </td> <td > <div class="jg" id="jg9">¥10</div> </td> <td > <button class="sc" onclick="removeProduct(9)"> 删除 </button> </td> </tr> <tr id="product10"> <td> <img src="img/pic10.jpg"/> </div> </td> <td> <div class="ms-name">便利贴套装</div> <div class="ms1">多色组合,3种尺寸,便于标记归类</div> </td> <td > <span class="original-price">¥14.00</span> </td> <td > <button class="btn1" onclick="updateQuantity(10, -1)">-</button> <input type="text" class="quantity-input" id="qty10" value="1" readonly> <button class="btn1" onclick="updateQuantity(10, 1)">+</button> </td> <td > <div class="jg" id="jg10">¥14</div> </td> <td > <button class="sc" onclick="removeProduct(10)"> 删除 </button> </td> </tr> </tbody> </table> <div class="yh"> <div id="yhq">优惠券</div> <hr /> <div class="yhzc"> <div class="yhqbh" id="yhq1"> <p>满100减10元</p> <h3>有效使用</h3> </div> <div class="yhqbh" id="yhq2"> <p>满200减30元</p> <h3>有效使用</h3> </div> <div class="yhqbh" id="yhq3"> <p>满500减90元</p> <h3>有效使用</h3> </div> </div> </div> <div class="js"> <div id="jsxx">结算信息</div> <hr /> <div class="jsxx1"> <div class="jswz"> <span class="js-title">商品总额</span> <span id="zongjia">¥236.00</span> </div> <div class="jswz"> <span class="js-title">数量折扣</span> <span id="shuliang">-¥28.00</span> </div> <div class="jswz"> <span class="js-title">满减优惠</span> <span id="manjian">-¥30.00</span> </div> <div class="jswz"> <span class="yfje">应付金额</span> <span id="yinfu">¥178.00</span> </div> <button id="jsbtn">结算</button> </div> </div> <!-- 弹窗 --> <div id="tc" class="tc"> <!-- 弹窗内容 --> <div class="tc-content"> <span id=jsxq>结算详情</span> <span class="close">×</span> <div id="nr"> <div class="jswz"> <span class="js-title">商品总数</span> <span id="zongshu">20</span> </div> <div class="jswz"> <span class="js-title">商品总额</span> <span id="zongjia">¥236.00</span> </div> <div class="jswz"> <span class="js-title">数量折扣</span> <span id="shuliang">-¥28.00</span> </div> <div class="jswz"> <span class="js-title">满减优惠</span> <span id="manjian">-¥30.00</span> </div> <div class="jswz"> <span class="yfje">应付金额</span> <span id="yinfu">¥178.00</span> </div> </div> </div> </div> <script> // 打开弹窗的按钮对象 var btn = document.getElementById("jsbtn"); // 获取 <span> 元素,用于关闭弹窗 var span = document.querySelector(&#39;.close&#39;); // 点击按钮打开弹窗 btn.onclick = function() { tc.style.display = "block"; } // 点击 <span> (x), 关闭弹窗 span.onclick = function() { tc.style.display = "none"; } // 删除商品 function removeProduct(productId) { const productRow = document.getElementById(`product${productId}`); productRow.style.display = &#39;none&#39;; // 重置数量为0 const quantityInput = document.getElementById(`qty${productId}`); quantityInput.value = 0; // 重新计算总价 calculateTotal(); } // 更新商品数量 function updateQuantity(productId, change) { // 获取商品行 var productRow = document.getElementById(&#39;product&#39; + productId); if (!productRow) return; // 获取数量输入框 var qtyInput = productRow.querySelector(&#39;.quantity-input&#39;); if (!qtyInput) return; // 获取当前数量 var currentQty = parseInt(qtyInput.value); // 更新数量(不能小于0) var newQty = currentQty + change; if (newQty < 0) newQty = 0; // 更新页面显示 qtyInput.value = newQty; // 更新小计 updateSubtotal(productId); // 重新计算总价 calculateTotal(); } // 更新商品小计 function updateSubtotal(productId) { // 获取商品行 var productRow = document.getElementById(&#39;product&#39; + productId); if (!productRow) return; // 获取价格元素 var priceElement = productRow.querySelector(&#39;.original-price&#39;); if (!priceElement) return; // 获取价格(去掉¥符号) var price = parseFloat(priceElement.textContent.replace(&#39;¥&#39;, &#39;&#39;)); // 获取数量输入框 var qtyInput = productRow.querySelector(&#39;.quantity-input&#39;); if (!qtyInput) return; // 获取当前数量 var quantity = parseInt(qtyInput.value); // 计算折扣(2件9折,3件及以上8折) var discount = 1.0; if (quantity >= 3) { discount = 0.8; // 3件及以上8折 } else if (quantity === 2) { discount = 0.9; // 2件9折 } // 计算小计 var subtotal = price * quantity * discount; // 更新小计显示 var subtotalElement = productRow.querySelector(&#39;.jg&#39;); if (subtotalElement) { subtotalElement.textContent = &#39;¥&#39; + subtotal.toFixed(2); } } // 计算总价和应用优惠券 function calculateTotal() { // 商品总额 var total = 0; // 数量折扣总额 var quantityDiscount = 0; // 商品总数 var totalItems = 0; // 遍历所有商品行(1到10) for (var i = 1; i <= 10; i++) { var productRow = document.getElementById(&#39;product&#39; + i); // 如果商品行不存在(已被删除),跳过 if (!productRow) continue; // 获取价格元素 var priceElement = productRow.querySelector(&#39;.original-price&#39;); if (!priceElement) continue; // 获取价格(去掉¥符号) var price = parseFloat(priceElement.textContent.replace(&#39;¥&#39;, &#39;&#39;)); // 获取数量输入框 var qtyInput = productRow.querySelector(&#39;.quantity-input&#39;); if (!qtyInput) continue; // 获取当前数量 var quantity = parseInt(qtyInput.value); // 计算折扣(2件9折,3件及以上8折) var discount = 1.0; if (quantity >= 3) { discount = 0.8; } else if (quantity === 2) { discount = 0.9; } // 计算原价小计 var originalSubtotal = price * quantity; // 计算折扣后小计 var discountedSubtotal = originalSubtotal * discount; // 累加到总额 total += discountedSubtotal; // 累加数量折扣 quantityDiscount += (originalSubtotal - discountedSubtotal); // 累加商品总数 totalItems += quantity; } // 应用优惠券 var couponDiscount = 0; // 按阈值从大到小检查优惠券 if (total >= 500) { couponDiscount = 90; // 满500减90 highlightCoupon(3); } else if (total >= 200) { couponDiscount = 30; // 满200减30 highlightCoupon(2); } else if (total >= 100) { couponDiscount = 10; // 满100减10 highlightCoupon(1); } else { // 没有适用的优惠券,重置所有优惠券高亮 resetCouponHighlights(); } // 计算应付金额 var payable = total - couponDiscount; // 更新结算信息 document.getElementById(&#39;zongjia&#39;).textContent = &#39;¥&#39; + total.toFixed(2); document.getElementById(&#39;shuliang&#39;).textContent = &#39;-¥&#39; + quantityDiscount.toFixed(2); document.getElementById(&#39;manjian&#39;).textContent = &#39;-¥&#39; + couponDiscount.toFixed(2); document.getElementById(&#39;yinfu&#39;).textContent = &#39;¥&#39; + payable.toFixed(2); document.querySelector(&#39;#tc #zongjia&#39;).textContent = &#39;¥&#39; + total.toFixed(2); document.querySelector(&#39;#tc #shuliang&#39;).textContent = &#39;-¥&#39; + quantityDiscount.toFixed(2); document.querySelector(&#39;#tc #manjian&#39;).textContent = &#39;-¥&#39; + couponDiscount.toFixed(2); document.querySelector(&#39;#tc #yinfu&#39;).textContent = &#39;¥&#39; + payable.toFixed(2); // 更新弹窗中的商品总数 document.getElementById(&#39;zongshu&#39;).textContent = totalItems; } // 修改后的 highlightCoupon 函数 function highlightCoupon(yhqId) { // 重置所有优惠券高亮 resetCouponHighlights(); // 高亮指定优惠券 var xs = document.getElementById(&#39;yhq&#39; + yhqId); if (xs) { xs.classList.add(&#39;active-coupon&#39;); // 添加新的高亮类 } } // 修改后的 resetCouponHighlights 函数 function resetCouponHighlights() { // 移除所有优惠券的高亮效果 for (var i = 1; i <= 3; i++) { var xs = document.getElementById(&#39;yhq&#39; + i); if (xs) { xs.classList.remove(&#39;active-coupon&#39;); // 移除高亮类 } } } </script> </body> </html> 请把优惠券变化改为变色及变字,代码基础化
最新发布
06-19
<form action="xxx.jsp" method="post" > <table width="500"> <style> body { display: grid; place-content: center; min-height: 100vh; margin: 20px; font-family: &#39;Microsoft YaHei&#39;, sans-serif; font-size: 16px; } table { border-spacing: 10px; } </style> <tr> <td><b style="font-size: 16px;">性别</b></td> <td> <input type="radio" id="man" name="sex"/> <label for="man"><img src="images/man.jpg"> 男 </label> <input type="radio" id="women" name="sex"/> <label for="women"><img src="images/women.jpg"> 女 </label> </td> </tr> <tr> <td><b>生日</b></td> <td> <select name="year"> <option selected="selected">--请选择年--</option> <option>1990</option> <option>2000</option> <option>2010</option> </select> <select name="month"> <option selected="selected">--请选择月--</option> <option>1</option> <option>2</option> <option>3</option> </select> <select name="day"> <option selected="selected">--请选择日--</option> <option>11</option> <option>12</option> <option>13</option> </select> </td> </tr> <tr> <td><b>所在地区</b></td> <td> <input type="text" value="安徽" name="area"> </td> </tr> <tr> <td><b>婚姻状况</b></td> <td> <input type="radio" name="marital_status" id="spinsterhood"> <label for="spinsterhood"> 未婚 </label> <input type="radio" name="marital_status" id="married"> <label for="married"> 已婚 </label> <input type="radio" name="marital_status" id="divorce"> <label for="divorce"> 离婚 </label> <input type="radio" name="marital_status" id="secret"> <label for="secret">保密</label> </td> </tr> <tr> <td><b>学历</b></td> <td><input type="text" name="edu_bg"></td> </tr> <tr> <td><b>喜欢的类型</b></td> <td> <input type="checkbox" name="like_type" id="wumei"> <label for="wumei"> 妩媚的 </label> <input type="checkbox" name="like_type" id="keai"> <label for="keai"> 可爱的 </label> <input type="checkbox" name="like_type" id="xiaoxianrou"> <label for="xiaoxianrou"> 小鲜肉 </label> <input type="checkbox" name="like_type" id="laolarou"> <label for="laolarou"> 老腊肉 </label> <input type="checkbox" name="like_type" id="douxihuan"> <label for="douxihuan"> 都喜欢 </label> </td> </tr> <tr> <td><b>自我介绍</b></td> <td> <textarea cols="30" rows="10" name="self_introduction"></textarea> </td> </tr> <tr> <td colspan="2" style="text-align: center;"> <input type="submit" value=" 免费注册 "> </td> </tr> </table> </fieldset> </form>
04-01
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

超翔之逸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值