CSS和JS簡介-HTML5極速入門

標簽： HTML5極速入門

前言

更多內容，請訪問我的個人博客。

CSS

CSS，又稱層疊樣式表，用于渲染HTML元素標簽的樣式。

我們在創建HTML文檔時，如果不使用樣式美化頁面，就是這個樣子的：

在這里插入圖片描述

使用樣式文件排版美化后，就是這樣子的：

在這里插入圖片描述
CSS可以通過以下方式添加到HTML中:

內聯樣式 - 在HTML元素中使用 style 屬性
內部樣式表 - 在HTML文檔頭部 <head> 區域使用 <style> 元素來包含CSS
外部引用 - 使用外部 CSS 文件

內聯樣式

在標簽中使用樣式屬性，如下改變段落的字體顏色：

<p style="color:blue;">潘高陪你學編程</p>

內部樣式表

對單個文件定義樣式，就可以使用內部樣式表。在<head> 部分通過 <style> 標簽定義內部樣式表：

<html>
    <head>
        <style type="text/css">
            body {background-color:yellow;}
            p {color:blue;}
        </style>
    </head>
    <body>
        <p>潘高陪你學編程</p>
    </body>
</html>

外部引用

當同一樣式會被多個HTML文檔引用時，就應該使用外部樣式表。這樣，修改一個CSS文件，就可以改變整個網站的外觀。

<head>
    <link rel="stylesheet" type="text/css" href="/css/mystyle.css">
</head>

當同時使用以上三種方式時，內部樣式表的樣式會覆蓋 內聯樣式，外部引用 的樣式會覆蓋內部樣式表的樣式。

很顯然在建站時，更推薦使用外部引用。將樣式文件獨立出來，不僅便于統一修改，還減少了冗余代碼量。不過，在極個別情況下，選擇使用 內部樣式表 修改單個HTML文檔樣式，或使用 內部樣式表 修改單個標簽的樣式，也是很方便的。

JS

JS，即JavaScript ，可以使 HTML 頁面具有更強的動態和交互性。

`<script>` 標簽

<script> 標簽既可包含腳本語句，也可通過 src 屬性指向外部腳本文件。

<script>
    document.write("潘高陪你學編程");
</script>

或

<script src="/js/myjs.js"></script>

`<noscript>` 標簽

只有在瀏覽器不支持腳本或者禁用腳本時，才會顯示 <noscript> 元素中的內容。

<noscript>抱歉，你的瀏覽器不支持 JavaScript!</noscript>

更多編程教學請關注公眾號：潘高陪你學編程

本文鏈接：https://blog.csdn.net/u011236348/article/details/106323379

智能推薦

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...

電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！

Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...

requests實現全自動PPT模板

http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載訪問這個主頁，我們可以看到下面的樣式點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包那我們就開始做吧首先，查看網頁的源代碼，我們可以看到每一...

SpringMvc自定義類型轉換器步驟

...