<mark id="jqmlw"></mark>

  • <sub id="jqmlw"></sub>
    <ol id="jqmlw"><output id="jqmlw"></output></ol>

      <legend id="jqmlw"></legend>
    1. CSS基礎筆記

      摘要:一、CSS常見基礎 ①-選擇器: 1、子選擇器:這行代碼會使class名為food下的子元素li 加入紅色實...


      一、CSS常見基礎
      ①-選擇器:
      1、子選擇器:這行代碼會使class名為food下的子元素li 加入紅色實線邊框。用于選擇指定標簽元素的第一代子元素

      .food>li{border:1px solid red;}
      2、包含(后代)選擇器:即加入空格,用于選擇指定標簽元素下的后輩元素.
      與子選擇器的區別在于:>作用于元素的第一代后代,空格作用于元素的所有后代。
      例如下面代碼,包含選擇器會在food下的所有li標簽加上1px的紅色實線,不管是food下li標簽中的li標簽,只要是在food中的li。而子選擇器只是作用于在food下的第一代li,如果是food下li標簽中的li標簽則不會被添加樣式、、、

      .food li{border:1px solid red;}
      3、偽類選擇符:
      a:link {color: #FF0000} / 未訪問時的狀態 /
      a:visited {color: #00FF00} / 已訪問過的狀態 /
      a:hover {color: #FF00FF} / 鼠標移動到鏈接上時的狀態 /
      a:active {color: #0000FF} / 鼠標按下去時的狀態 (很少定義)/

      4、分組選擇符:當為html中多個標簽元素設置同一個樣式時,可以使用分組選擇符(,),如下代碼為右側代碼編輯器中的h1、span標簽同時設置字體顏色為紅色:

      h1,span{color:red;}
      ②-CSS文字排版:
      1、使用css樣式來改變文字的樣式:粗體、斜體、下劃線、刪除線:
      為P標簽下的span設置粗體:p span{font-weight:bold}
      為P標簽下的span設置斜體:p span{font-style:italic;}
      為P標簽下的span設下劃線:p span{text-decoration:underline;}
      為class名為oldPrice的部分設置刪除線:.oldPrice{text-decoration:line-through;}
      2、其他:
      文本縮進:p{text-indent:2em;}
      設置字母與字母之間的間距:h1{letter-spacing:20px;}
      設置英文單詞之間的間距:h1{word-spacing:50px;}
      行間距(行高):p{line-height:1.5em;}
      塊狀元素中的文本、圖片設置居中樣式:h1{text-align:center}//中-左-右-:center-left-right

      ③-盒子模型:
      1、元素分類:
      常用的塊狀元素有:

      <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
      將內聯元素改為塊狀元素,例:a{display:block;}
      塊級元素特點:
      one、每個塊級元素都從新的一行開始,并且其后的元素也另起一行。
      two、元素的高度、寬度、行高以及頂和底邊距都可設置。
      three、元素寬度在不設置的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定一個寬度。

      常用的內聯元素有:

      <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
      將塊狀元素設為內聯元素,例:div{display:inline;}
      內聯元素特點:
      one、和其他元素都在一行上;
      two、元素的高度、寬度及頂部和底部邊距不可設置;
      three、元素的寬度就是它包含的文字或圖片的寬度,不可改變。

      常用的內聯塊狀元素有:

      <img>、<input>
      同時具備內聯元素、塊狀元素的特點,代碼:a{display:inline-block;}
      inline-block 元素特點:
      one、和其他元素都在一行上;
      two、元素的高度、寬度、行高以及頂和底邊距都可設置
      QQ客服
      15918955577
      微信二維碼
      回到頂部
      亚洲日本中文字幕天天更新_国产高清在线精品一区免费_天天澡天天揉揉AV无码_免费无遮挡黄H动漫APP在线-有限公司。