HTML中样式CSS控制基础

水深无声 2022-07-21 01:58 281阅读 0赞

###  ###

HTML中样式CSS控制基础

<table style=""> 
 <tbody> 
  <tr> 
   <td colspan="1" style="border:1px solid #d3d3d3; padding:10px; margin:0px; width:69.79785969084423%"> 
    <div>
      CSS规则声明里，包含三种类型的值 
    </div> 
    <div> 
     <br> 
    </div> 
    <div>
      1、 
     <strong>文本值</strong> 
    </div> 
    <div>
      div { &nbsp; &nbsp; &nbsp; &nbsp;visibility: hidden; } 
    </div> 
    <div> 
     <br> 
    </div> 
    <div>
      2、 
     <strong>数字值</strong> 
    </div> 
    <div>
      div { &nbsp; &nbsp; &nbsp; &nbsp;width: 200px; } 
    </div> 
    <div> 
     <br> 
    </div> 
    <div>
      3、 
     <strong>颜色值</strong> 
    </div> 
    <div>
      1、 
     <strong>颜色名</strong>。例如红色（red）、蓝色（blue）等。 &nbsp; &nbsp; &nbsp; &nbsp;参考：W3C颜色名定义，https://www.w3.org/TR/css3-color/#html5 
    </div> 
    <div>
      2、 
     <strong>十六进制颜色</strong>。红色（#ff0000） &nbsp; &nbsp; &nbsp; &nbsp;说明：6位数字前两位代表红色，中间两位代表绿色，末两位代表蓝色。 
    </div> 
    <div>
      3、 
     <strong>RGB颜色值</strong>（Red, Green, Blue）。红色&nbsp; &nbsp;rgb(250, 0, 0) 或者 rgb(100%, 0, 0) &nbsp; &nbsp; &nbsp; &nbsp; 
    </div> 
    <div>
      4、 
     <strong>RGBA颜色值</strong>（Red, Green, Blue, Alpha）。红色50%的透明度&nbsp; &nbsp;rgb(250, 0, 0, .5 ) &nbsp; &nbsp; &nbsp; &nbsp; 
    </div> </td> 
   <td colspan="1" style="border:1px solid #d3d3d3; padding:10px; margin:0px; width:30.083234244946492%"> <img alt="" style="height:auto"></td> 
  </tr> 
  <tr> 
   <td colspan="1" style="padding:10px; margin:0px; width:50%; border:1px solid #d3d3d3"> <img alt="" style="height:auto">(<strong>优先级顺序</strong>)<img alt="" style="height:auto"></td> 
   <td colspan="1" style="padding:10px; margin:0px; width:50%; border:1px solid #d3d3d3"> <br> </td> 
  </tr> 
  <tr> 
   <td colspan="1" style="padding:10px; margin:0px; width:50%; border:1px solid #d3d3d3"> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div>
      找到元素，呈现样式。 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <span style="color:#a600c4"><strong>#号选择id &nbsp;.选择class</strong></span> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <strong>4.4.1 上下文选择器</strong> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <span style="font-weight:bold">4.4.2、特殊上下文选择器： 子选择符&nbsp; <span style="font-size:19px"> <span style="color:#fa7a00"><span style="font-size:32px">&gt;</span></span></span></span> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <span style="font-weight:bold">4.4.3 特殊上下文选择器： 紧邻同胞元素 <span style="font-size:32px"> <span style="color:#ffaf00"><span style="color:#fa7a00">+</span> :之后<span style="color:#ff0000">相邻</span>的</span></span></span> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <strong>4.4.4、 特殊上下文选择器： 一般同胞元素 <span style="font-size:32px"><span style="color:#fa7a00">~ :之后隔开的所有</span></span></strong> 
    </div> 
    <div> 
     <strong><span style="font-size:32px"><span style="color:#fa7a00"><br> </span></span></strong> 
    </div> 
    <div> 
     <strong>4.4.5、特殊上下文选择器：&nbsp; 通用选择符 <span style="font-size:32px"><span style="color:#fa7a00">* : 选中所有</span></span></strong> 
    </div> </td> 
   <td colspan="1" style="padding:10px; margin:0px; width:50%; border:1px solid #d3d3d3"> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div>
      ID属性选择符 : 在页面中唯一的标识一个元素。 类属性选择符：标识一组具有共同特征的元素。 
    </div> 
    <div> 
     <br> 
    </div> 
    <div>
      1、不要为每个标签重复的样式。 
    </div> 
    <div>
      2、利用继承和上下文选择符能够让不同的标签共享样式。从而降低需要编写和维护CSS的工作量。 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> </td> 
  </tr> 
  <tr> 
   <td colspan="1" style="padding:10px; margin:0px; width:50%; border:1px solid #d3d3d3"> 
    <div> 
     <span style="font-size:32px"><strong>伪类:(类似selector)</strong></span> 
    </div> 
    <div> 
     <strong>实际上并没有标签附加到元素的标签上。</strong> 
    </div> 
    <div> 
     <span style="font-size:19px"><strong><span style="color:#a600c4">UI伪类</span>：当元素处于某一状态时，为该元素应用样式。</strong></span> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div style="background-color:#2b2b2b; color:#a9b7c6; font-family:' consolas'; font-size:10.5pt"> 
     <span style="color:#cc7832">a</span>: 
     <span style="color:#e8bf6a">hover//悬浮时<br> </span> 
     <span style="color:#cc7832">a</span>: 
     <span style="color:#e8bf6a">link//默认<br> </span> 
     <span style="color:#cc7832">a</span>: 
     <span style="color:#e8bf6a">active//单机时<br> </span> 
     <span style="color:#cc7832">a</span>: 
     <span style="color:#e8bf6a">visited//被点击(访问)后</span> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <span style="color:#d100ff"><strong><img alt="" style="height:auto"></strong></span> 
    </div> 
    <div> 
     <span style="color:#d100ff"><strong>作为目标被链接到后的变化</strong></span> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <strong><span style="font-size:19px"><br> </span></strong> 
    </div> 
    <div> 
     <span style="font-size:24px"><strong><span style="color:#a600c4">结构化伪类</span>：元素标记存在一定的逻辑关系，为符合这种关系的元素应用样式。</strong></span> 
    </div> 
    <div> 
     <strong><span style="font-size:19px"><br> </span></strong> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <strong><span style="font-size:19px"><br> </span></strong> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> </td> 
   <td colspan="1" style="padding:10px; margin:0px; width:50%; border:1px solid #d3d3d3"> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

--------------------

**定位元素**

<table style=""> 
 <tbody> 
  <tr> 
   <td colspan="1" style="border:1px solid #d3d3d3; padding:10px; margin:0px; width:69.79785969084423%"> 
    <div>
      3.1、理解盒子模型 ： 
     <strong>外边距设置</strong> 
    </div> 
    <div>
      margin: 5px 10px 8px 9px; 
    </div> 
    <div>
      margin: 5px 10px; 
    </div> 
    <div>
      margin: 10px 
    </div> 
    <div>
      margin-left: 10px 
    </div> 
    <div> 
     <br> 
    </div> 
    <div>
      3.1、理解盒子模型 ： 
     <strong>内边距设置 (同上)</strong> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div>
      3.1、理解盒子模型 ： 
     <strong>边框宽度 /样式/颜色</strong> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> </td> 
   <td colspan="1" style="border:1px solid #d3d3d3; padding:10px; margin:0px; width:30.083234244946492%"> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div>
      边框颜色 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div>
      边框圆角 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> </td> 
  </tr> 
  <tr> 
   <td colspan="1" style="padding:10px; margin:0px; width:50%; border:1px solid #d3d3d3"> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div>
      给浮动元素的父元素添加 overflow:hidden。 
    </div> 
    <div>
      同时浮动父元素。 
    </div> 
    <div>
      父元素的的最后一个子元素，是一个非浮动的具有清除样式（clear: both / clear: left ）的元素。 使用 :after 添加清除元素。 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <span style="color:#5ddaff"><strong><img alt="" style="height:auto"></strong></span> 
    </div> 
    <div> 
     <strong><span style="color:#5ddaff"><br> </span></strong> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> </td> 
   <td colspan="1" style="padding:10px; margin:0px; width:50%; border:1px solid #d3d3d3"> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <strong><br> </strong> 
    </div> 
    <div> 
     <strong>包裹浮动元素的方法</strong> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div style="background-color:#2b2b2b; color:#a9b7c6; font-family:' consolas'; font-size:10.5pt">
      . 
     <span style="color:#e8bf6a">mainWrapper</span>{ 
     <br> &nbsp; &nbsp; &nbsp; 
     <span style="color:#bababa">border</span>:&nbsp; 
     <span style="color:#6897bb">1</span> 
     <span style="color:#a5c261">px&nbsp;solid&nbsp;red</span> 
     <span style="color:#cc7832">;<br> </span> 
     <span style="color:#cc7832">&nbsp; &nbsp; &nbsp;</span> 
     <span style="color:#808080">/*</span> 
     <span style="color:#808080">包裹浮动元素：方法一</span> 
     <span style="color:#808080">*/<br> </span> 
     <span style="color:#808080">&nbsp; &nbsp; &nbsp;/*<span style="color:#d100ff"><strong>overflow:&nbsp;hidden</strong></span>;*/<br> </span> 
     <span style="color:#808080">&nbsp; &nbsp; /*</span> 
     <span style="color:#808080">包裹浮动元素：方法二&nbsp;比翼双飞也浮动</span> 
     <span style="color:#808080">*/<br> </span> 
     <span style="color:#808080">&nbsp; &nbsp; /*<span style="color:#d100ff"><strong>float:&nbsp;left</strong></span>;*/<br> </span> 
     <span style="color:#808080"><br> </span> 
     <span style="color:#808080"><br> </span>} 
     <br> 
     <span style="color:#808080">/*</span> 
     <span style="color:#808080">包裹浮动元素：方法三&nbsp;<span style="color:#d100ff"><strong>使用伪元素（元素）</strong></span></span> 
     <span style="color:#808080">*/<br> </span>. 
     <span style="color:#e8bf6a">mainWrapper</span>:: 
     <span style="color:#e8bf6a">after</span>{ 
     <br> &nbsp; &nbsp; 
     <span style="color:#bababa">content</span>:&nbsp; 
     <span style="color:#6a8759">"."</span> 
     <span style="color:#cc7832">;<br> </span> 
     <span style="color:#cc7832">&nbsp; &nbsp;</span> 
     <span style="color:#bababa">display</span>:&nbsp; 
     <span style="color:#a5c261">block</span> 
     <span style="color:#cc7832">;<br> </span> 
     <span style="color:#cc7832">&nbsp; &nbsp;</span> 
     <span style="color:#9e00f3">clear:&nbsp;both</span> 
     <span style="color:#cc7832">;<br> </span> 
     <span style="color:#cc7832">&nbsp; &nbsp;</span> 
     <span style="color:#bababa">visibility</span>:&nbsp; 
     <span style="color:#a5c261">hidden</span> 
     <span style="color:#cc7832">;<br> </span> 
     <span style="color:#cc7832">&nbsp; &nbsp;</span> 
     <span style="color:#bababa">height</span>:&nbsp; 
     <span style="color:#6897bb">0</span> 
     <span style="color:#cc7832">;<br> </span>} 
     <br> 
    </div> </td> 
  </tr> 
  <tr> 
   <td colspan="1" style="padding:10px; margin:0px; width:50%; border:1px solid #d3d3d3"> 
    <div> 
     <span style="color:#bc0058"><span style="font-size:32px"><strong>注意点</strong></span></span> 
    </div> 
    <div> 
     <strong><span style="font-size:32px"><span style="color:#bc0058"><br> </span></span></strong> 
    </div> </td> 
   <td colspan="1" style="padding:10px; margin:0px; width:50%; border:1px solid #d3d3d3"> 
    <div>
      居中显示: 
    </div> 
    <div style="background-color:#2b2b2b; color:#a9b7c6; font-family:' consolas'; font-size:10.5pt"> 
     <span style="color:#bababa">width</span>:&nbsp; 
     <span style="color:#6897bb">100</span>% 
     <span style="color:#cc7832">;</span> 
    </div> 
    <div style="background-color:#2b2b2b; color:#a9b7c6; font-family:' consolas'; font-size:10.5pt"> 
     <span style="color:#bababa">vertical-align</span>:&nbsp; 
     <span style="color:#a5c261">middle</span> 
     <span style="color:#cc7832">;<br> </span> 
     <span style="color:#bababa">text-align</span>:&nbsp; 
     <span style="color:#a5c261">center</span> 
     <span style="color:#cc7832">;</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td colspan="1" style="padding:10px; margin:0px; width:50%; border:1px solid #d3d3d3"> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> </td> 
   <td colspan="1" style="padding:10px; margin:0px; width:50%; border:1px solid #d3d3d3"> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <img alt="" style="height:auto"> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>