H5基础第五课时CSS篇（1）

xiaoxiao2021-04-13 29

一.css基本语法 1.css的写法分三类 (1):行内样式样式只在当前标签可用，写法比较繁琐，这种写法要极力避免。 <p> 电脑<span style="color: red;font-size: 40px">1</span>元起 </p> (2):内部样式样式只在当前页面可用，比行内写法要好一些，缺点：无法做到多个页面共用一个样式 <head><style type="text/css"> #price2{ color: red; font-size: 40px; } </style></head> <body> <p> 电脑<span id="price2">1</span>元起 </p> </body> (3):外部样式推荐写法！样式可以复用。做到了样式和文件的分离。 <head> <link rel="stylesheet" href="../../css/first.css"> </head> <body> <p> 电脑<span id="price">1</span>元起 </p> </body> 2.三类样式的优先级默认情况下行内样式的优先级比内部样式高,内部样式比外部样式优先级高,但引入顺序变化时以上效果的实现要符合就近原则。样式的覆盖只会覆盖相同的样式 (1)显示的是外部样式 <style type="text/css"> #price{ color: yellow; font-size: 50px; } </style> <link rel="stylesheet" href="../../css/first.css"> (2)显示的是内部样式 <link rel="stylesheet" href="../../css/first.css"> <style type="text/css"> #price{ color: yellow; font-size: 50px; }</style> 二.选择器的分类 1.标签选择器 li 作用于当前页面的所以匹配标签 li{ color: red; font-size: 30px; } 2.类选择器 .+类名作用于所以class值为类名的标签 .red{ color: red; } <ul> <li>家用电器</li> <li class="red">各类书籍</li> <li>手机数码</li> <li class="red">日用百货</li> </ul> 3.ID选择器 #+类名 id在当前页面具有唯一性 #firstLine{ color: yellow; } <ul> <li id="firstLine">家用电器</li> <li class="red">各类书籍</li> <li>手机数码</li> <li class="red">日用百货</li> </ul>

转载请注明原文地址: https://ju.6miu.com/read-669010.html

技术

最新回复(0)