2017年12月4日 星期一

HTML CSS (3) - CSS排版設定

3-1 移除browser預設樣式




















default瀏覽器會設置樣式，如上圖的margin
若欲消除預設的樣式設定可在自訂link css reference內放入

body {
  margin: 0;
}

但也會有其他樣式會有css預設設定，因此可以使用此網頁將樣式貼入css
注意：css是從前讀到後面（意即後面的設定會覆蓋掉前面的設定）



3-2 區塊元素及行內元素及其預設屬性

區塊元素block：佔滿版型
行內元素inline：僅占此尺寸大小








  • 可透過以下設定修改占整個版面或是適合的大小
  • display: inline-block 能夠讓區塊是往下生長
a{
  display: block;
}
p{
  display: inline;
}
  • 也可以讓list的<li>呈現左到右的排版
li{
  display:inline;
}
  • 還能夠讓<a>超連結選擇的位置變得更廣
a{
  display: block;
  height:50px;
}

3-3 Span及Div網頁排版標籤

  • Div及Span都是用來做網頁排版
    • Div: 區塊元素
    • Span: 行內元素
- 若想要針對區塊做不同設定，則可用Div

<body>
    <div class="style1">
        <h1>Header
            <span>1</span>
        </h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium, doloremque odio vero tempore non distinctio, repellendus, quas eaque, totam ullam a debitis. Molestias necessitatibus impedit quam, hic commodi fugi
        </p>
    </div>
    <div class="style2">
        <h1>Header2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure odio, quidem esse in. Quo amet, officia quibusdam quia blanditiis, unde expedita omnis sed esse nobis, eligendi odit maxime, maiores soluta!
        </p>
    </div>
</body>

如上，假設想要把Header1及其內的<p>和Header2及其內的<p>設置不同的顏色，可使用<div>分區塊給顏色 (多種tag合起來，此種寫法稱為後代選擇器)

.style1 h1{
  color: blue;
}
.style2{
  color: red;
}
.style1 span{
  font-size: 50px;
}

css可分別設定class名稱(此例為.style1及.style2)內的標籤顏色為何。也能夠使用span tag將特殊的文字設定成不同的樣式。
上述的結果為：













3-3 Margin及Padding

假設今天的html及css設定如下
HTML:

<body>
    <div class="box">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta magni ea voluptatum dolor omnis, enim facilis quam, est quod eligendi dolorum voluptate earum nulla. Dolor quae obcaecati voluptatum ducimus, repudiandae.</p>
    </div>
</body>
CSS:
.box{
  border: 10px solid #000;
  padding-left: 30px;
  padding-right: 30px;
  margin: 50px;
}

則表示：

border: 10px solid #000; box class外圍有一條10px的線包圍
padding-left: 30px; box class左邊從box往外推30px


padding-right: 30px; box class右邊從box往外推30px
margin: 50px; box class上下左右從border都往外推50px

  • Border示意如下圖(外圍線區塊)

  • Padding示意如下圖(固定box大小後往外推綠色區塊）

  • Margin示意如下圖(從border往外推黃色區塊)



以下的css設定，實際上box寬度將為360*310 (寬300+50+10)(高度300+10)，margin不影響實際寬高

.box{
 background: black;
 width: 300px;
 height: 300px;
 padding-left: 50px;
 border-right: 10px solid red;
 border-top: 10px solid red;
 margin-right:30px;
 margin-left:100px;
}

綠色部分為padding，黑色部分為原始寬高，紅色部分為border


3-3 自動在中間排版Margin:auto

  • 使用margin:auto; 可以讓網頁內容自動放在中間
  • margin:0 auto;  margin: 0 auto 0 auto 這兩種代表意義相等（前者表上下/左右，後者表示上/下/左/右）
  • 要設定margin:auto必須先設定寬度或高度，這樣瀏覽器才知道要根據寬高與邊留多少px置中
如： HTML
<body>
    <div class="wrap">
        <div class="header"></div>
        <div class="content"></div>
        <div class="footer"></div>
    </div>
</body>

CSS

.header {
  height: 100px;
  background: pink;
}
.content {
  height: 300px;
  background: orange;
}
.wrap{
  width:900px;
  margin:0 auto;
}
.footer{
  height: 50px;
  background: blue;
}

則可以透過<wrap>將區塊內都能夠置中。

  • 注意，wrap內不需設定寬度，因為寬度已經被wrap限制(div是區塊元素，會佔滿空間)
CSS3有新的語法，可以不用算 (可至CanIuse網頁確認語法是否被瀏覽器接受)


.box{
 width: 200px;
 height: 200px;
 background: #000;
 padding:20px;
 border: 20px solid pink;
 box-sizing: content-box; // 預設，隨著padding, border變動
}
.box2{
 width: 200px;
 height: 200px;
 background: #000;
 padding:20px;
 border: 20px solid pink;
 box-sizing: border-box; // 固定大小
}

下圖
上面正方形為.box(content-box)變動長寬
下面正方形為.box2(border-box)不變動長寬


















補充：

*{
  box-sizing: border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

*  : 所有html tag
-moz prefix:兼容firefox
-webkit prefix:兼容chrome

完成項目：
















張貼者：



於







































沒有留言:















張貼留言


















        

      









訂閱：
張貼留言 (Atom)