CSS簡介

網頁分成三個部分：
            結構(HTML)
            表現(CSS)
            行為(JavaScript)
        CSS
            - 層疊樣式表
            - 網頁實際上是一個多層的結構，通過CSS可以分別為網頁的每一個層來設置樣式
                而最終我們能看到只是網頁的最上邊一層
            - 總之一句話，CSS用來設置網頁中元素的樣式

使用CSS來修改元素的樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS簡介</title>
   
</head>
<body>
    
    <!-- 
         第一種方式(內聯樣式，行內樣式)：
            - 在標簽內部通過style屬性來設置元素的樣式
            - 問題：
                使用內聯樣式，樣式只能對一個標簽生效，
                    如果希望影響到多個元素必須在每一個元素中都復制一遍
                    并且當樣式發生變化時，我們必須要一個一個的修改，非常的不方便

            - 注意：開發時絕對不要使用內聯樣式
     -->

    <p style="color:red; font-size:40px">聰明勇敢有力氣，我是真的羨慕我自己</p>
    
    <p style="color:rgb(0, 255, 213); font-size:40px">呼啦圈也沒問題~</p>

    <p>童話里做英雄</p>
    <p>熱血心中流淌</p>
</body>
</html>

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS簡介</title>
    <!-- 
        第二種方式（內部樣式表）
            - 將樣式編寫到head中的style標簽里
                然后通過CSS的選擇器來選中元素并為其設置各種樣式
                可以同時為多個標簽設置樣式，并且修改時只需要修改一處即可全部應用
            - 內部樣式表更加方便對樣式進行復用
            - 問題：
                我們的內部樣式表只能對一個網頁起作用，
                    它里邊的樣式不能跨頁面進行復用
     -->
     <style>
         p{
             color:green;
             font-size: 50px;
         }
     </style>


</head>
<body>
    <p style="color:red; font-size:40px">聰明勇敢有力氣，我是真的羨慕我自己</p>
    
    <p style="color:rgb(0, 255, 213); font-size:40px">呼啦圈也沒問題~</p>

    <p>童話里做英雄</p>
    <p>熱血心中流淌</p>
</body>
</html>

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS簡介</title>
     <!-- 
         第三種方式 （外部樣式表） 最佳實踐
            - 可以將CSS樣式編寫到一個外部的CSS文件中,
                然后通過link標簽來引入外部的CSS文件
            - 外部樣式表需要通過link標簽進行引入，
                意味著只要想使用這些樣式的網頁都可以對其進行引用
                使樣式可以在不同頁面之間進行復用
            - 將樣式編寫到外部的CSS文件中，可以使用到瀏覽器的緩存機制，
                從而加快網頁的加載速度，提高用戶的體驗。
      -->
      <link rel="stylesheet" href="./style.css">
</head>
<body>
    <p style="color:red; font-size:40px">聰明勇敢有力氣，我是真的羨慕我自己</p>
    
    <p style="color:rgb(0, 255, 213); font-size:40px">呼啦圈也沒問題~</p>

    
    <p>童話里做英雄</p>
    <p>熱血心中流淌</p>
</body>
</html>

style.css

p{
    color:tomato;
    font-size: 50px;
}

在這里插入圖片描述

本文鏈接：https://blog.csdn.net/MondayCui/article/details/108564218

智能推薦

css float 浮動簡介

float浮動這個屬性，對于剛學習的人來說其實還有點不太好理解，有時候總不能按照自己的意圖來工作。對于剛剛接觸css的人來說，更是有點蒙圈。在這里，我就根據我在網上找到的一些文章，寫寫自己的理解。（大神請飄過。。。） float浮動值的屬性：值描述 left 元素向左浮動。 right 元素向右浮動。 none 默認值。元素不浮動，并會顯...

CSS shapes簡介 css Shapes 允許我們通過自定義文本內容可以環繞的幾何形狀，圖像和漸變，來創建有趣且獨特的布局。本次教程會教你如何使用他們。在 CSS Shapes問世之前，為網頁設計文本自由環繞的雜志式布局幾乎是不可能的。相反，網頁設計布局傳統上一直用網格，盒子和直線構造。 CSS Shapes允許我們自定義環繞的幾何形狀。這些形狀可以是圓，橢圓，簡單或復雜的多邊形，甚至圖像...

CSS簡介筆記

一、CSS簡介 1、什么是CSS CSS:Cascading Style Sheet 是一組樣式設置規則，用于控制頁面的外觀樣式 2、為什么使用CSS 實現內容與樣式的分離，便于團隊開發樣式復用，便于網站的后期維護頁面的精確控制，讓網頁更精美 3、CSS作用頁面外觀美化布局和定位二、基本用法 1.CSS語法選擇器：要修飾的對象（東西）屬性名：修改對象的哪個屬性（樣式）屬性值：樣式的...

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

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

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

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

CSS簡介

智能推薦

猜你喜歡