CSS Introduction

CSS = Cascading Style Sheets(階層式樣式表)

Selectors 選擇器

id(只套一次)

先用#來命名，再用id來召喚

<!DOCTYPE html>
<html>
    <head>
        <style>
            #try{
                text-align: center;
                color: deeppink;
                font-size:25px;
            }
        </style>
    </head>
    <p id="try">teruiosadjkfhsdkljfhsdlka</p>
    <p>nomal</p>
</html>

效果 0301

class

*用.來命名，用class來召喚

<!DOCTYPE html>
<html>
    <head>
        <style>
            .try{
                text-align: left;
                font-size: 90px;
                color: fuchsia;
            }
        </style>
    </head>
    <p class="try">gruiogheruighileru</p>
    <h1 class="try">keropwikrpweoi</h1>
    <p>huiuihuihuuihuhu</p>
    <h1>ijioiojigyuhj</h1>
</html>

0302

可一次套用多個class

<!DOCTYPE html>
<html>
    <head>
        <style>
            .try
            {
                text-align: center;
                font-size: 25px;
            }
            .trry
            {
                color: crimson;
            }
        </style>
        <p class="try">12312312313</p>
        <p class="trry">000000</p>
        <p class="try trry">01230123..</p>
    </head>
</html>

0303

全格式套用

使用*則可全格式套用

<!DOCTYPE html>
<html>
    <head>
        <style>
            * {
                text-align: center;
                color: cyan;
                font-size: 35px;
            }
        </style>
        <p>12314865</p>
        <h2>222222222</h2>
    </head>
</html>

0304

一次多套用在多種字

<!DOCTYPE html>>
<html>
    <head>
        <style>
            h1,h2,h3{
                text-align: center;
                color:deeppink;
                font-size:40px;
            }
            p,h4,h5,h6{
                color: dodgerblue;
                font-size: 20px;
            }
        </style>
        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h5>
        <h5>h5</h5>
        <h6>h6</h6>
        <p>p</p>
    </head>
</html>

0305

註解 Comment(0306)

<!DOCTYPE html>
<html>
    <head>
        <style>
            #try{
                text-align: center;
                color: deeppink;
                font-size:25px;
            }
        </style>
    </head>
    <p id="try">teruiosadjkfhsdkljfhsdlka</p> <!--這個字是粉紅色的--> 
    <p>nomal</p>
    <h3>css的註解"/*  */"</h3>
</html>

How to put css in your web

外部樣式表(0307)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

link的屬性rel="stylesheet"告訴瀏覽器引入的資源是一個CSS樣式檔；href="style.css"告訴瀏覽器資源位址在同個檔案目錄的style.css。

Internal CSS 內部樣式表

內部樣式在HTML頁面的部分內的<style>元素內定義

Inline CSS

<h1 style="color:red;text-align:center;">This is a heading</h1>
<p style="color:blue;">This is a paragraph</p>

顏色 color

Background Color

<!DOCTYPE html>
<html>
    <head>
        <style>
        </style>
    </head>
    <body>
        <h1 style="background-color:rgba(30, 143, 255, 0.726);">Hello World</h1>
        <p style="background-color:rgb(160, 255, 71);">Hello World...</p>
    </body>
</html>

0308

Text Color

<!DOCTYPE html>
<html>
    <head>
        <style>
        </style>
    </head>
    <body>
        <h1 style="color:rgba(30, 143, 255, 0.863);">Hello World</h1>
        <p style="color:rgb(71, 255, 209);">Hello World...</p>
    </body>
</html>

0309

opacity: 不透明度

在rgb和hsl後面加a，就能增加調整透明度的選項

Backgrounds

background-color >顏色
background-image >圖片
background-repeat >重複
background-attachment >背景圖片的位置是否要固定在 viewport（視圖）上
background-position >為每一個圖片設定初始位置

background-color

Opacity / Transparency

自己有一個Opacity屬性，啟用時連文字都會一起透明

Transparency

用rgba或hsla，啟用時只有背景顏色會變透明

Background Image

指定要用作元素背景的圖像。默認情況下，將重複圖像，以使其覆蓋整個元素。
還可以為特定元素設置背景圖像，例如p元素

Background Repeat

background-repeat: repeat-x; >水平重複圖像
background-repeat: repeat-y; >重直重複圖像
background-repeat: no-repeat; >圖像不重複

background-position補充

Background Attachment 定背景圖像是應該滾動還是固定的

background-attachment 補充

Box Model

0310

Content - 框的內容，其中顯示文本和圖像
Padding - 清除內容周圍的區域。填充是透明的
Border - 圍繞填充和內容的邊框
Margin - 清除邊界外的區域。邊距是透明的

Border

第二周中提到的邊框顏色

dotted >點
dashed >虛線(長條的點)
solid >實線
double >雙線
groove >立體
ridge >立體
inset >立體
outset >立體
none >沒有邊線
hidden >沒有邊線
mix >混合

Border Sides

可設定不同邊界的格式

border-top-style:
border-right-style:
border-bottom-style:
border-left-style:

Margins

margin-top
margin-right
margin-bottom
margin-left

auto - 瀏覽器自動計算邊距
length - 利用長度來定義邊距 ex.px, pt, cm, etc.
% - 利用百分比來定義邊距
inherit - 利用負元素來繼承邊距 important:允許使用負值

Margin Collapse

上下編劇若一個為20，一個為50。則中間件個匯市50，而非70，此種反應只出現在上下Margin

Padding

padding-top
padding-right
padding-bottom
padding-left

Outline

outline-style
outline-color
outline-width
outline-offset
outline

Outline Style

dotted - Defines a dotted outline 虛線
dashed - Defines a dashed outline 長虛線
solid - Defines a solid outline 實線
double - Defines a double outline 雙線
groove - Defines a 3D grooved outline 立體1
ridge - Defines a 3D ridged outline 立體2
inset - Defines a 3D inset outline 立體3
outset - Defines a 3D outset outline 立體4
none - Defines no outline
hidden - Defines a hidden outline

Text

Text Alignment

text-align: center; 置中
text-align: left; 置左
text-align: right; 置右
text-align: justify; 拉伸每條線，以使每條線具有相等的寬度，並且左右邊距是直的

Text Direction

  direction: rtl;
  unicode-bidi: bidi-override;

同時用這兩行code可以讓文字左右相反

<!DOCTYPE html>
<html>
    <head>
        <style>
            p.t{  
                direction: rtl;
                unicode-bidi: bidi-override;}
        </style>
    </head>
    <body>
        <p>正常 nomal</p>
        <p class="t">由右至左right to left</p>
    </body>
</html>

0311

Vertical Alignment

設置元素的垂直對齊方式 eg:圖像對齊方式

vertical-align: top;
vertical-align: middle;
vertical-align: bottom;

Text Decoration 文字底線

text-decoration: overline; 上底線
text-decoration: line-through; 刪除線(中底線)
text-decoration: underline; 下底線

Text Transformation

text-transform: uppercase; 全大寫
text-transform: lowercase; 全小寫
text-transform: capitalize; 各單字第一個字母大寫

Text Spacing

text-indent 段落的最前方空白
letter-spacing 字母之間的空白
line-height 行距
word-spacing 單字之間的距離
white-space: nowrap; 禁用換行

Text Shadow 文字陰影

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                text-shadow: 2px 2px 5px red;
                }
        </style>
    </head>
    <body>
        <p>2px 2px 5px red;</p>
        <p>水平陰影 重直陰影 模糊 顏色</p>
    </body>
</html>

0312

Icon

Lists

list-style-type: circle; 圓
list-style-type: square; 方
list-style-type: upper-roman; 羅馬數字
list-style-type: lower-alpha; 小寫字母
list-style-image: url('xxx.jpg'); 圖片

Tables 表格

border: 2px solid black;

邊界粗細虛線實線邊線顏色

  border-collapse: collapse;

因為我討厭表格，所以等到需要的時候再看上面的code是為了讓原先預設的兩條邊線變成一條邊線

display

Display: none; 不顯示
display: inline; 一個接一個顯示
display: block;

width and max-width

max-width and margin: auto; 自動調整最大邊距和寬度

position

使用心得:sticky很實用

Overflow

visible- 默認。溢出不會被裁剪
hidden -溢出被裁剪，其餘內容將不可見
scroll -溢出的部分無法直接觀看，要使用滾動條以查看其餘內容
auto-與scroll相似，但僅在必要時添加滾動條