css樣式入門學習

一、css是什么

css 又叫層疊樣式表

Cascading style sheets

CSS層疊樣式表是一門標記語言，并不是編程語言，因此不可以自定義變量，不可以引用等，換句話說就是不具備任何語法支持，它主要缺陷如下：
語法不夠強大，比如無法嵌套書寫，導致模塊化開發中需要書寫很多重復的選擇器；
沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重復輸出，導致難以維護；
這就導致了我們在工作中無端增加了許多工作量。為了解決這個問題，前端開發人員會使用一種稱之為(CSS預處理器）的工具，提供CSS缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性。大大提高了前端在樣式上的開發效率。

什么是css預處理器
css預處理器定義了一種專門的編程語言，其中的基本思想是為CSS增加了一些編程的特性，將 CSS 作為目標生成文件，然后開發者就只要使用這種語言進行 CSS 的編碼工作。轉化成通俗易懂的話來說就是“用一種專門的編程語言，進行 Web 頁面樣式設計，再通過編譯器轉化為正常的 CSS 文件，以供項目使用”
常用的 CSS 預處理器有哪些
SASS:基于 Ruby，通過服務端處理，功能強大。解析效率高。需要學習 Ruby 語言，上手難度高
LESS:基于 NodeJS，通過客戶端處理，使用簡單。功能比SASS 簡單，解析效率也低于SASS，但在實際開發中足夠了，所以我們后臺人員如果需要的話，建議使用 LESS。
https://less.bootcss.com/

css主要用來表現美化網頁

**字體，顏色，邊距，高度，寬度，背景顏色，網頁定位，浮動，dispaly布局等等** **使用css樣式的一個好處是通過定義某個樣式，可以讓不同的網頁位置的字體有著統一的字體，字號或者顏色等**

發展史

css1.0 就是直接在html代碼里面寫
css2.0 div（塊）＋css ，html與css分離，網頁變得簡單
css2.1添加了浮動和定位
css3.1添加了圓角，陰影，動畫，和瀏覽器兼容問題

快速開始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--規范,<style> 可以編寫css代碼每一個聲明,最好以分號(;)結尾-->
<!--語法:-->
<!--    選擇器{聲明1;聲明2;聲明3;}-->
<style>
h1 {
    color: blue;
}
</style>
</head>
    <body>
    <h1>這是一個標題</h1>
    </body>
</html>

css樣式的優勢： 1. 內容和變現分離 2. 網頁結構表現統一，可以實現復用 3. 樣式十分豐富 4. 建議使用獨立于html的css文件 5. 利用SEO,容易被搜索引擎收錄

二、css怎么用三種引入方式

行內樣式

內聯式css樣式，直接寫在現有的html標簽中

<p style="background-color:red">行內式</p>

內部樣式

嵌入式css樣式，寫在當前的文件中

<html>
<head>
    <style>
        div {
        background-color:red;
        }
        div p {
        background-color:green;
        }
    </style>
</head>
<body>
    <div>sdfasdfasdfsdf
   		 <p>asdfasfasdf</p>
    </div>
</body>
</html>

外部樣式

外部式css樣式，寫在單獨的一個文件中，使用link引入

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

導入式（一般不用）

引入外部標簽的方式導入式css2.0中的
網速或者網站大的話就先出骨架再出頁面效果

<head>
    <style type="text/css">
    	@import "test.css"
    </style>
</head>

注意：

推薦使用外鏈式，簡潔明了。
外鏈式中的rel="stylesheet"不能省略，type="text/css"可以省略。
@import引入文件時，有數量限制，而link沒有。
導入式會在整個網頁加載完成后再加載CSS文件，因此如果文件非常大的話，網頁會有閃爍的情況出現。外鏈式一開始網頁就會加載，所以不會有閃爍出現。

三、css選擇器

基本選擇器

標簽選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標簽選擇器</title>
    <style>
        /*標簽選擇器,會選擇頁面上所有的這個標簽的元素*/
        h1{
            font-size: 1.5vw;
            color: #936245;
            background: #3cdda6;   /*背景*/
            border-radius: 100px;   /*圓角*/
        }
        p{
            fond-size:1.6vw;
            color: blue;
        }
    </style>
</head>
<body>

<h1>JAVA</h1>
<h1>SSM</h1>
<h1>Servlet</h1>
<p>這里是段落標簽</p>
</body>
</html>

id選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    /*
    id選擇器   :id保證全局唯一
    #id的名稱{}
    不遵循就近原則,固定順序
    id選擇器>class選擇器>標簽選擇器
    */
    #Waves{
        color: #247860;
    }
    .tao{
        color: blueviolet;
    }
    h1{
        color: black;
    }
</style>
</head>
<body>
<h1 id="Waves">標題一</h1>
<h1 class="tao">標題二</h1>
<h1 class="tao">標題三</h1>
<h1 class="tao">標題四</h1>
<h1>標題五</h1>
</body>
</html>

類選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.類選擇器</title>

<style>
    /*類選擇器的格式  .class的名稱{}
    優勢,可以多個標簽歸類,是同一個class(就是class的名稱相同)
    */
    .Waves{
        color: #1d1f9e;
        font-size: 1.5vw;
    }
    .tao{
        color: aquamarine;
    }
</style>
</head>
<body>
<span class="Waves">不努力你什么都沒有</span>
<br/>
<span class="tao">努力,屏幕前的你</span>
<br/>
<span class="Waves">加油,屏幕前的你</span>
<br/>
<span>牛啊牛啊</span>
</body>
</html>

優先級比較：id>class>標簽

高級選擇器

層次選擇器

后代選擇器：在某個元素的后面

 /*后代選擇器 body標簽后面的都包括,可以是多代*/
        body p{
           background: red;
        }

子選擇器

/*子選擇器*/
        body>p{
            background: #1d1f9e;
        }

相鄰兄弟選擇器：相鄰小弟選擇器

 /*  相鄰選擇器:只有一個相鄰(對下不對上,只對該標簽的下面的標簽生效)*/
        .active + p{
            background: #936245;
        }

通用選擇器下面的所有這個標簽

  /*  通用選擇器 不包含當前標簽，向下的所有p標簽生效 */
        .active~p{
            background: beige;
        }

所有代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        p{
        background:#02ff00;
        }
        */
        /*后代選擇器 body標簽后面的都包括,可以是多代*/
     /*   body p{
           background: red;
        }*/
        /*子選擇器*/
     /*   body>p{
            background: #1d1f9e;
        }*/
    /*  相鄰選擇器:只有一個相鄰(對下不對上,只對該標簽的下面的標簽生效)*/
   /*     .active + p{
            background: #936245;
        }*/
    /*  通用選擇器  */
        .active~p{
            background: beige;
        }
    </style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>p9</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>

結構偽類選擇器

偽類：條件
不是重點知道就可以了對于后端程序員

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--不使用 class id選擇器 -->
    <style>
        /*ul的第一個子元素*/
        ul li:first-child{
            background: cornflowerblue;
        }
        /*ul的最后一個子元素*/
        ul li:last-child{
            background: aqua;
        }
        /*選中p1:定位到父元素,選擇當前的第一個元素
        選擇當前p元素的父元素,選中父元素的第一個,并且元素是當前類型的元素才生效
        例: p1 生效    如果是h1  就不生效
        */
        p:nth-child(3){
            background: blueviolet;
        }
        /*選中父元素,下的p元素的第二個,類型p*/
        p:nth-of-type(3){
            background: red;
        }
        /*鼠標移動到654321上面會顯示底色*/
        a:hover{
            background: blue;
        }
    </style>
</head>
<body>
    <a href="">654321</a>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

屬性選擇器

id+class結合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 45px;
            border-radius: 10px;
            background: #1d1f9e;
            text-align: center;
            color: #17dc0a;
            text-decoration: none;
            font: bold 20px/50px "Arial Narrow";
        }
        /*屬性名 屬性名 = 屬性值（正則）
        =絕對等于
        *= 包含這個
        ^= 以這個開頭
        $+ 以這個結尾
        */
        /*存在id屬性的元素    a[]{}*/
      /*  a[id]{
            background:darkslategray;
        }*/
        /*id為first2的元素*/
      /*  a[id=first2]{
            background: #17dc0a;
        }*/
        /*class中帶有links的元素*/
      /*  a[class*="links"]{
            background: #3cdda6;
        }*/
        /*選中href中以http開頭的元素*/
       /* a[href^=http]{
            background: #3cdda6;
        }*/
        /*以pdf結尾的*/
        a[href$=pdf]{
            background: #fa82c3;
        }
    </style>
</head>
<body>
<p class="demo">
    <a  class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test" id="first2">2</a>
    <a href="doc/asas.jpg" class="links item ">3</a>
    <a href="doc/sadapng.png" class="links item ">4</a>
    <a href="asd" class="links item ">5</a>
    <a href="index.html" class="links item ">6</a>
    <a href="/a.pdf" class="links item ">7</a>
    <a href="/ff.doc" class="links item "> 8</a>
    <a href="doc/sss.doc" class="links item " >9</a>
    <a href="adsda.java" class="links item last">10</a>
</p>
</body>
</html>

四、美化網頁

字體

fond-family: 控制字體的例如:楷體.微軟雅黑
fond-size:50px: 字體大小
font-weight: bold: 字體粗細
color:字體顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <style>
        body{
            font-family: "Arial Narrow",楷體;
            color: #936245;
        }
        h1{
            fond-size:50px;
            font-weight: bold;
            color: #1d1f9e;
        }
        header{
            background: #936245;
        }
    </style>
</head>
<body>
<h1>變形金剛</h1>
<h2>美國</h2>
<p>
《變形金剛》是美國科幻動作系列電影，改編自起源于20世紀80年代的變形金剛品牌系列。該電影系列由派拉蒙影業公司和夢工廠發行。
</p>
<p>
邁克爾·貝執導了前五部 [1]  ：《變形金剛》（2007）、《變形金剛2》（2009）、《變形金剛3》（2011）、《變形金剛4：絕跡重生》（2014）、《變形金剛5：最后的騎士》（2017）。2018年12月21日，由特拉維斯·奈特執導的衍生電影《大黃蜂》上映。
</p>
<p>
該系列排名系列電影影史總票房第13名，總收入為48億美元，其中第3、4部票房均超過10億美元 [2-3]  。
</p>
<p>i love you ,welcome to , go out  </p>
</body>
</html>

文本樣式

font: oblique lighter 20px "楷體";
斜體細體大小字體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--字體風格-->
    <style>
        p{
            font: oblique lighter 20px "楷體";
        }
    </style>
</head>
<body>
<p>
    《變形金剛》是美國科幻動作系列電影，改編自起源于20世紀80年代的變形金剛品牌系列。該電影系列由派拉蒙影業公司和夢工廠發行。
</p>
</body>
</html>

超鏈接偽類

a:link{color:#FF0000} 未訪問的鏈接顏色（狀態）
a:visited{color:#00FF00} /已訪問的鏈接/
a:hover{color:#FF00FF} /當鼠標懸停在鏈接上/ 常用
a:active{color:#0000FF} /被選擇的鏈接/

/*字體默認顏色*/
a{
    text-decoration: none; /*去除字體下劃線*/
    color: #000000;
}
/*鼠標放上去的狀態*/
a:hover{
    color: blueviolet;
}
/*鼠標按住未松開的狀態*/
a:active{
    color: red;
}

陰影

h-shadow 必需。水平陰影的位置。允許負值陰影顏色
v-shadow 必需。垂直陰影的位置。允許負值水平偏移
blur 可選。模糊的距離垂直偏移
color 可選。陰影的顏色。陰影半徑

#price{text-shadow:h-shadow v-shadow blur color;
}

列表

#nav{
    width: 300px;
    height: 243px;
    background: orangered;
}
#navs{
    font-weight: bold;
    width:300px;
    height: 300px;
    background: #1d1f9e;

}
.title{
    font-size: 20px;    /*字體大小*/
    font-weight: bold;  /*字體粗細*/
    text-indent: 1em;   /*首行縮進*/
    line-height: 35px;  /*字體高度*/
     /* rebeccapurple顏色  url圖片  270px 10px圖片位置  no-repeat平鋪方式 */
    background: rebeccapurple url("../images/xia.gif") 270px 10px no-repeat ;
    margin-top: auto;
}
/*ul  li*/
/*
list-style:
    none     不要樣式
    circle   空心圓
    decimal  數字
    square   正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    /*圖片*/
    background-image: url("../images/zuo.gif");
    /*平鋪方式*/
    background-repeat: no-repeat;
    /*調整圖片位置*/
    background-position: 236px 2px;
}
/* text-decoration: none; 去除樣式*/
a{
    text-decoration: none;
    font-size: 15px;
    color: #000;
}
/*  text-decoration: underline; 字體下添加下劃線樣式*/
a:hover{
    color: #17dc0a;
    text-decoration: underline;
}

背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- border:  1px solid red;  寬度  實線 邊框線的顏色-->
    <style>
        div{
            width: 1000px;
            height: 600px;
            border:  1px solid red;
            background-image: url("images/a1.jpg");
            /*默認是把這個空間全部用圖片平鋪鋪滿*/
        }
        .div3{
            background-repeat:repeat-x ; /*水平平鋪*/
        }
        .div2{
            background-repeat:repeat-y ; /*垂直平鋪*/
        }
        .div4{
            background-repeat:no-repeat ; /*不平鋪，只有一張*/
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>

<img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716183210068.png" alt="image-20250716183210068" style="zoom:33%;margin-left:10px" /> ### 漸變 [網站](https://grabient.com/) ## 五、盒子模型 ### 什么是盒子 <img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716183649992.png" alt="image-20250716183649992" style="zoom:33%; margin-left:10px" /> margin：外邊距 padding：內邊距 border ：邊框 ### 邊框邊框粗細邊框的樣式邊框的顏色 <img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716183916843.png" alt="image-20250716183916843" style="zoom:33%;margin-left:20px" /> <img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716184018109.png" alt="image-20250716184018109" style="zoom: 50%; margin-left: 10px;" /> ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

<style>
    /*body自己總有一個默認的外邊距margin：0  常見操作，進行去除*/
    h1,ul,li,a,body{
        margin: 0;
        padding: 0;
        text-decoration: none;
    }
    /*border:粗細，樣式，顏色*/
    #box{
        width: 300px;
        border: 1px solid red;
    }
    h2{
        font-size: 18px;
        background: #FF0000;
        line-height: 30px;
        margin: 0;
    }
    form{
        background: #3cdda6;
    }
    div:nth-of-type(1) input{
        border: 2px solid #1d1f9e;
    }
    div:nth-of-type(2) input{
         border: 2px dashed #FF0000;
     }
</style>

會員登錄

``` ### 內外邊距順時針旋轉，上右下左 margin:0 上右下左外邊距都為0 margin: 0 1px 上下為0 左右為一 margin: 0 2px 1px; 上為0 左右為2 下為1 margin: 0 1px 2px 3px 內邊距同理

計算盒子有多大box-size

margin+border+padding+內容寬度

圓角邊框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <STYLE>
        /*
        左上 右上  右下 左下，順時針方向
        圓圈： 圓角 = 半徑！
        */
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius:100px ;
        }
    </STYLE>
</head>
<body>
<div>~</div>
</body>
</html>

同理可以畫出半圓和扇形等圖

陰影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            border: 10px solid red;
            box-shadow: 10px 10px 15px yellowgreen;
        }
        img{
            margin: 0 auto;
            border-radius: 100px;
            box-shadow: 10px 10px 15px #665f5f;
        }
        #waves{
            height: 50px;
            border: 10px solid red;
            box-shadow: 10px 10px 15px yellowgreen;
        }
    </style>
</head>
<body>
<div></div>
<br/>
<img src="images/psc.jpg" alt="">
<br/>
<div id="waves" style="width: 1080px;display: block;text-align: center">
<img src="images/psc.jpg" alt="">
</div>
</body>
</html>

六、浮動

網頁布局

行內元素可以包含在塊級元素里面但是塊級元素不能報在行里面 ### display布局（重點需要重復練習） + block：塊級元素，換行顯示，可設置寬高。 + inline：行內元素，不換行，寬高由內容決定。 + inline-block：行內塊元素，不換行，但可設置寬高。 + flex：彈性布局容器。 + grid：網格布局容器。 + none：隱藏元素（不占據空間）。 ### 浮動 CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。 Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。浮動可以理解成ps的圖層

### 清除浮動**父元素塌陷** 塌陷解決方案 1. 增加父級元素的高度固定（不建議） 2. 增加一個新div在下面 3. 在父級元素中添加一個overflow：hidden屬性 4. 父類添加一個偽類，標準解法也差不多是添加一個div意思但是沒有加代碼

## 七、定位 ### 相對定位 position：relative；相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。如果將 top 設置為 20px，那么框將在原位置頂部下面 20 像素的地方。如果 left 設置為 30 像素，那么會在元素左邊創建 30 像素的空間，也就是將元素向右移動。

### 絕對定位 position：absolute；設置為絕對定位的元素框會從文檔流完全刪除，并相對于其父級元素定位，父級元素可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。絕對定位使元素的位置與文檔流無關（類似float的效果），因此不占據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。普通流中其它元素的布局就像絕對定位的元素不存在一樣： 1. 沒有父元素定位的前提 ![image-20250716191657006](https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716191657006.png) 2. 有父元素定位的前提 ![image-20250716191707542](https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716191707542.png) ### 固定定位 position：fixed 看與絕對定位的比較移動瀏覽器固定定位就不會動比如搜索欄之類的返回頂部的 ![image-20250716191846201](https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716191846201.png) 移動之后主要是看他兩位置 ![image-20250716192000704](https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716192000704.png) ### z-index 圖層的概念

### opcity opacity：透明度

### 總結相對定位是“相對于”元素在文檔中的初始位置，元素原來的空間還會占用；而絕對定位是“相對于”最近的已定位父級元素，如果不存在已定位的父級元素，那么“相對于”最初的包含塊，且絕對定位類似float，元素不存在原來空間一說。 fixed經常用于網站的頂部固定。提示：因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置 z-index 屬性來控制這些框的堆放次序。

posted @ 2025-07-16 19:33 重生在二本學java Views(9) Comments(0) 收藏舉報

刷新頁面返回頂部

zhangxusen

css樣式入門學習

css樣式入門學習

一、css是什么

css 又叫層疊樣式表

發展史

快速開始

二、css怎么用 三種引入方式

行內樣式

內部樣式

外部樣式

導入式（一般不用）

三、css選擇器

基本選擇器

標簽選擇器

id選擇器

類選擇器

高級選擇器

層次選擇器

結構偽類選擇器

屬性選擇器

四、美化網頁

字體

文本樣式

超鏈接偽類

陰影

列表

背景

會員登錄

計算盒子有多大box-size

圓角邊框

陰影

六、浮動

網頁布局

公告

二、css怎么用三種引入方式