用

我們可以使用 HTML 編輯器來編輯 HTML：比如 Dreamweaver（DW）和editplus（小紅本 ）編輯器雖然好用但還是建議一開始使用文本編輯器來學(xué)習(xí) HTML，簡稱記事本（就是創(chuàng)建 一個txt文本文件）如下圖：

通過記事本，依照以下五步來創(chuàng)建您的第一張網(wǎng)頁。

1. 首先打開記事本
2. 然后鍵入html的主題代碼

3.在body標(biāo)簽里邊輸入內(nèi)容

4.然后把寫完的代碼保存之后找到文件把txt的后綴名改成.html

5. 打開自己電腦的瀏覽器，這里推薦使用IE瀏覽器360瀏覽器或者火狐瀏覽器還有谷歌瀏覽器，因為有些瀏覽器不兼容代碼，可能造成最后的顯示效果不一樣。

上面的頁面就是代碼的效果圖

下個文章講解用editplus開發(fā)網(wǎng)頁

以上就是文章的全部內(nèi)容了，有什么不懂的可以評論或者私信告訴我，喜歡的話可以點個贊和關(guān)注，每天持續(xù)更新。

text

官網(wǎng)地址 The Leading PDF Library for Developers | iTextSelect a value to filter the results.QuoteQuoteQuoteQuoteQuoteQuoteQuoteQuoteQuoteQuoteiText pdf on facebookiText pdf on twitteriText pdf on youtubeiText pdf on linkediniText pdf on stackoverflow

重要說明

主要依賴

        <dependency>
            <!-- 會自動引用 itext 其他庫,kernel,commons,io,forms,layout,svg,styled-xml-parser -->
            <groupId>com.itextpdf</groupId>
            <artifactId>html2pdf</artifactId>
            <version>5.0.2</version>
        </dependency>

測試代碼

        // 獲取 java 版本
        String version = System.getProperty("java.specification.version");

        // 獲取系統(tǒng)類型
        String platform = System.getProperty("os.name", "");
        platform = platform.toLowerCase().contains("window") ? "win" : "linux";

        // 當(dāng)前程序目錄
        String current = System.getProperty("user.dir");

        System.out.println(String.format("current=%s", current));

        // html 文件路徑
        File index = Paths.get(current, "..", "index.html").toFile();
        if (!index.exists()) {
            System.out.println(String.format("file not exist,file=%s", index.getAbsolutePath()));
            return;
        }

        try {
            // 保存 pdf 文件路徑
            File file = Paths.get(current, String.format("java%s_%s.pdf", version, platform)).toFile();

            // 轉(zhuǎn)換設(shè)置
            ConverterProperties options = new ConverterProperties();

            // 設(shè)置根目錄類型
            String baseUri = Paths.get(current, "..").toUri().toString();
            options.setBaseUri(baseUri);

            // 設(shè)置字體
            FontProvider fontProvider = new FontProvider();
            fontProvider.addStandardPdfFonts();
            fontProvider.addSystemFonts();
            options.setFontProvider(fontProvider);

            // 轉(zhuǎn)換 html 文件
            HtmlConverter.convertToPdf(index, file, options);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }

效果預(yù)覽

itext-demo/java1.8_win.pdf · yjihrp/linux-html2pdf-demo - Gitee.com

itext-demo/java11_linux.pdf · yjihrp/linux-html2pdf-demo - Gitee.com

測試結(jié)果

下一篇 3-LINUX HTML 轉(zhuǎn) OPENPDF

用 CSS 最困難的部分之一是處理CSS的權(quán)重值，它可以決定到底哪條規(guī)則會最終被應(yīng)用，尤其是如果你想在 Bootstrap 這樣的框架中覆蓋其已有樣式，更加顯得麻煩。不過隨著 CSS 層的引入，這一切都發(fā)生了變化。 這個新功能允許您創(chuàng)建自己的自定義 CSS 層，這是有史以來第一次確定所有 CSS 代碼權(quán)重的層次結(jié)構(gòu)。 在本文中，我將剖析這對您意味著什么，它是如何工作的，以及您今天如何開始使用它。

什么是層(Layers)

創(chuàng)建您自己的自定義圖層是 CSS 的新功能，但圖層從一開始就存在于 CSS 中。 CSS 中有 3 個不同的層來管理所有樣式的工作方式。

瀏覽器（也稱為用戶代理）樣式 - user agent style
用戶樣式 - User Styles
作者樣式 - Author Styles

瀏覽器樣式是應(yīng)用于瀏覽器的默認(rèn)樣式。這就是為什么 Chrome 和 Safari 中的按鈕看起來不同的原因。在瀏覽器層中找到的樣式在瀏覽器之間是不同的，并且給每個瀏覽器一個獨特的外觀。

下一層是用戶樣式，這并不是您真正需要擔(dān)心的事情。這些通常是用戶可以編寫并注入瀏覽器的自定義樣式，但瀏覽器不再真正支持這些樣式。用戶可能會更改一些瀏覽器設(shè)置，這些設(shè)置會向該圖層添加樣式，但在大多數(shù)情況下，可以完全忽略該層。

最后，我們來到作者層。這是您最熟悉的層，因為您編寫的每一段 CSS 代碼都屬于這一層。

這些層分開的原因是因為它可以很容易地覆蓋瀏覽器樣式和用戶樣式中定義的代碼，因為層定義了自己的層次結(jié)構(gòu)，完全忽略了權(quán)重的影響。

這 3 個 CSS 層是有序的（瀏覽器樣式、用戶樣式、然后是作者樣式），后面層中的每個樣式都將覆蓋前一層的任何樣式。這意味著即使瀏覽器樣式定義了一個超級特定的選擇器，例如#button.btn.super-specific，并且您的作者樣式定義了一個超級通用的選擇器，例如按鈕，您的作者樣式仍然會覆蓋瀏覽器樣式。

這實際上已經(jīng)是您可能一直在使用而沒有意識到的東西。

* {
  box-sizing: border-box;
}

上面的選擇器沒有權(quán)重，因為 * 符號對權(quán)重沒有貢獻(xiàn)。 這意味著例如使用 p 作為選擇器的 p 標(biāo)簽的瀏覽器樣式在技術(shù)上比 * 選擇器更具體，權(quán)重更高。 但是，這一切并不重要，因為作者樣式位于比瀏覽器樣式層晚的層中，因此您的代碼將始終覆蓋瀏覽器樣式。

理解這一點至關(guān)重要，因為使用這個新的圖層 API，您可以在作者圖層中創(chuàng)建自己的圖層，從而更輕松地處理特定性。

如何創(chuàng)建你自己的層

下面來看個例子：

很明顯，這是我們正常理解的CSS， ID設(shè)置的顏色權(quán)重更高，所以按鈕顯示為紅色。讓我們使用@layer給它們加上兩個層，看看是什么效果：

按鈕變成藍(lán)色。為什么會這樣？

我們給兩條CSS分別建立了base和utilities層，很明顯，后面創(chuàng)建的層的樣式覆蓋了前面層的樣式，盡管前面層的樣式有更高的權(quán)重。這就是層的默認(rèn)工作原理。當(dāng)然層的順序是可以指定的，

@layer utilities, base;

您需要做的就是編寫@layer 關(guān)鍵字，后跟以逗號分隔的層列表。 這將按從左到右的順序定義所有層，其中列出的第一層到最后一層的權(quán)重是依次增加的。 然后，您可以稍后使用普通的@layer 語法向每個層添加代碼，而不必?fù)?dān)心定義層的順序，因為它們都在這一行中定義。 需要注意的是，這行代碼必須在定義任何層之前出現(xiàn)，所以我通常將它作為我的 CSS 文件中的第一行。如上圖，通過指定層的順序，我們讓base層應(yīng)用在utilities層之后，所以按鈕又顯示為紅色。

導(dǎo)入層

上面這兩種方式都是導(dǎo)入bootstrap框架的CSS，并且把他們放在framework層中，這樣你如果想要覆蓋它已有的樣式，只需要新建一個自己的層，放置在framework層后面就行。像下面這樣。

匿名層

匿名層不常用，但它寫在后面可以覆蓋其他層的樣式，像下面可以把按鈕設(shè)為橙色。

不在層里的樣式

不在層里的樣式會有更高的權(quán)重，下面這個列表會讓你看得更清楚覆蓋是怎么發(fā)生的

層還可以重疊設(shè)置，不過很少用。具體的用法可以查閱相關(guān)文檔。

瀏覽器支持

自從IE死了以后，所有主流瀏覽器都已支持這一特性。大家請放心使用。