从零开始学_JavaScript_系列（三）——CSS相关（基础、选择器、position、div）

浅浅的花香味﹌ 2022-07-28 06:25 114阅读 0赞

（一）使用

具体css语句

</style>

（二）语法

mm \{background-color:red\};  /\*这行表示标签为mm的，背景色为红色，如果mm替换为p，则所有<p></p>标签覆盖内的变为红色\*/

</style>

①包含在<style>之中；

②格式为：**标签名  \{ 具体样式 \}**

③使用花括号来包含；

④有时候需要使用双引号来包含值

大概如下图

（三）颜色

mm \{background-color:red\}  /\*这行表示标签为mm的，背景色为红色，如果mm替换为p，则所有<p></p>标签覆盖内的变为红色\*/

mm \{color:rgb(50%,50%,0%)\} /\*可以和上一行写一起，也可以分开写\*/

nn\{color:rgb(50,55,155)\}    /\*另外一种颜色表示方法\*/

nn\{background-color:\#0F0\}  /\*第三种颜色表示方法\*/

（四）多重声明：

即把上面的第1、2行合并

mm \{background-color:red;

color:rgb(50%,50%,0%)\}

效果是一样的

（五）大小写

一般来说，CSS对大小写不敏感，但如果名称涉及HTML等，则需要注意大小写（如class=”样式”）

（六）同一种标签里，通过添加新的标签，以使其和一般的标签不一样

nn\{color:rgb(50,55,155)\}    /\*另外一种颜色表示方法\*/

nn\{background-color:\#0F0;

font-size:30px;

\}  /\*第三种颜色表示方法\*/

nn different \{          /\*虽然在nn里，但背景颜色和普通的nn不同，不过字体依然使用nn的大小（其他的也是）\*/

background-color:rgb(10%,10%,10%)\}

（七）id选择器和类选择器

在html可以在标签里加id，然后css可以对id相符的进行样式操作。

有标签：<mm id="nn">pppp</mm>

有操作：

\#nn \{

background-color:red;

position:absolute;

left:500px;

top:500px;

color:rgb(50%,50%,0%);

font-size:45px;

即可

（八）绝对定位

丢一个盒子的样式：

.box {
        position: absolute;
        height: 200px;
        width: 200px;
        background-color: #ddd;
        border: 1px #eee;
            border-top-width: 1px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 1px;
            border-top-style: none;
            border-right-style: none;
            border-bottom-style: none;
            border-left-style: none;
            border-top-color: rgb(238, 238, 238);
            border-right-color: rgb(238, 238, 238);
            border-bottom-color: rgb(238, 238, 238);
            border-left-color: rgb(238, 238, 238);
            -moz-border-top-colors: none;
            -moz-border-right-colors: none;
            -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            border-image-source: none;
            border-image-slice: 100% 100% 100% 100%;
            border-image-width: 1 1 1 1;
            border-image-outset: 0 0 0 0;
            border-image-repeat: stretch stretch;
        padding: 5px;
            padding-top: 5px;
            padding-right: 5px;
            padding-bottom: 5px;
            padding-left: 5px;
    }

（8）CSS的position

语法为：

position:fixed

<table> 
 <tbody> 
  <tr> 
   <td style="background:rgb(213,213,213)"> <p><strong>值</strong></p> </td> 
   <td style="background:rgb(213,213,213)"> <p><strong>描述</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="background:rgb(239,239,239)"> <p>absolute</p> </td> 
   <td style="background:rgb(239,239,239)"> <p>生成绝对定位的元素，相对于 <span style="font-family:Verdana">static </span><span style="font-family:宋体">定位以外的第一个父元素进行定位。</span></p> <p>元素的位置通过 <span style="font-family:Verdana">"left", "top", "right" </span><span style="font-family:宋体">以及 </span><span style="font-family:Verdana">"bottom" </span><span style="font-family:宋体">属性进行规定。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background:rgb(239,239,239)"> <p>fixed</p> </td> 
   <td style="background:rgb(239,239,239)"> <p>生成绝对定位的元素，相对于浏览器窗口进行定位。</p> <p>元素的位置通过 <span style="font-family:Verdana">"left", "top", "right" </span><span style="font-family:宋体">以及 </span><span style="font-family:Verdana">"bottom" </span><span style="font-family:宋体">属性进行规定。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background:rgb(239,239,239)"> <p>relative</p> </td> 
   <td style="background:rgb(239,239,239)"> <p>生成相对定位的元素，相对于其正常位置进行定位。</p> <p>因此，<span style="font-family:Verdana">"left:20" </span><span style="font-family:宋体">会向元素的 </span><span style="font-family:Verdana">LEFT </span><span style="font-family:宋体">位置添加 </span><span style="font-family:Verdana">20 </span><span style="font-family:宋体">像素。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background:rgb(239,239,239)"> <p>static</p> </td> 
   <td style="background:rgb(239,239,239)"> <p>默认值。没有定位，元素出现在正常的流中（忽略 <span style="font-family:Verdana">top, bottom, left, right </span><span style="font-family:宋体">或者 </span><span style="font-family:Verdana">z-index </span><span style="font-family:宋体">声明）。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background:rgb(239,239,239)"> <p>inherit</p> </td> 
   <td style="background:rgb(239,239,239)"> <p>规定应该从父元素继承 <span style="font-family:Verdana">position </span><span style="font-family:宋体">属性的值。</span></p> </td> 
  </tr> 
 </tbody> 
</table>

（9）div里面套用div

html方面：

css方面：