Scribd Logo
Upload

Welcome to Scribd!

  • CSS课程1

    Uploaded by

    J323 35 TEE WAN LIN郑婉棱
    7 views3 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views3 pages

    CSS课程1

    Uploaded by

    J323 35 TEE WAN LIN郑婉棱

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    CSS 课程 1

    课程重点：
    1. CSS 的用途在于客制化 Element 的设定，可以按照自己所需去调整 Element 最终的效果。
    2. 使用 CSS 有三种方法。
    a. External CSS
    b. Internal CSS
    c. Inline CSS
    ● External CSS 的用法：
    a. 开启一个新的 Notepad，把档案 save 成 abc.css。
    b. 重点：副档名（File Type 一定要是.css）。
    c. 然后在档案内写 CSS 的 code。
    d. 然后在要引入 CSS 的 HTML 档内以<link>Element 来加载 CSS 档。写法如下：
    i. <link rel="stylesheet" type="text/css" href="abc.css">
    ii. 以上 Element 必须加在<head> Element 的开关 Tag 之间。
    ● Internal CSS 的用法：
    a. 在网页内，<head> 开关 Tag 之间打上<style></style>。
    b. 然后再把 CSS Code 打在<style>开关 Tag 之间。
    ● Inline CSS 的用法：
    a. 在网页内要使用 CSS 个性化的地方直接使用 ，例如：<p style=””>。
    b. 然后再把 CSS Code 打在 style=””开关引号之间。
    3. 这三种 CSS 的方式的读取优先顺序为：Inline CSS 优先于 Internal CSS 优先于 External CSS。
    4. 制作一页的主题网页，要求如下
    a. 内容需符合教育场合需求。
    b. 需使用 External CSS
    c. 需有图片，内容
    d. 可加入：音乐或 youtube 影片。

    **CSS 与 Html Tag attributes 写法的差异


    1. 不使用=，改为：
    2. 不使用””
    3. 每个 CSS Reference 以；为结束

    备注
    备注 1

    处理文字的 CSS

    ● font-size:50px;

    ● font-family:impact,charcoal,sans-serif;

    ● font-style: (normal,italic,oblique);

    ● font-weight: (normal,bold);

    ● color:red;

    ● background-color:red;

    ● text-align: （center,left,right,justify）;

    ● vertical-align: (top,middle,bottom);

    ● text-decoration: (overline,line-through,underline);

    ● text-indent: 50px;

    ● letter-spacing: 3px;

    ● text-shadow:2px 2px 5px red;

    备注 2： 备注 3：

    处理链接的 CSS 处理背景图片或颜色的 CSS


    /* unvisited link */
    ● background-color:lightblue;
    a:link {
      color: red; ● background-image:url(“pic1.jpg”);
    text-decoration: none;
    ● background-repeat: (repeat -x,repeat -y,no-repeat);
    background-color: yellow;
    ● background-position: (left top,left center,
    }
    left bottom,right top,right center,right bottom,
    /* visited link */ center top,center center,center bottom);
    a:visited {
    ● background-attachment: fixed;
      color: green;
    text-decoration: none; ● background-size:300px 100px;

    background-color: cyan;

    }
    /* mouse over link */
    a:hover {
      color: hotpink;
    text-decoration: underline;

    background-color: lightgreen;
    }

    /* selected link */
    a:active {
      color: blue;
    text-decoration: underline;

    background-color: hotpink;
    }

    You might also like