CSS快速入門基礎篇，讓你快速上手（附帶代碼案例）

本文轉載自查看原文 2021-05-04 23:50 282 CSS/ Web

1、什么是CSS

學習思路

CSS是什么
怎么去用CSS（快速上手）
CSS選擇器（難點也是重點）
網頁美化（文字，陰影，超鏈接，列表，漸變等）
盒子模型
浮動
定位
網頁動畫（特效效果）

項目格式：

1.1、什么是CSS

Cascading Style Sheet 層疊級聯樣式表

CSS：表現（美化網頁）

字體，顏色，邊距，高度，寬度，背景圖片，網頁定位，網頁浮動...

1.2、發展史

CSS1.0

CSS2.0 新增 div（塊）+CSS，HTML與CSS結構分離的思想

CSS2.1 新增浮動定位

CSS3.0 新增圓角，陰影，動畫... 要考慮瀏覽器兼容性

1.3、快速上手

<!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>

建議寫成html css分離模式，但是有時為了方便，也可以寫到一起

css優勢：

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

2、選擇器

作用：選擇頁面上的某一個或者某一類元素

2.1、基本選擇器

標簽選擇器

<!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>

　　2.類選擇器 class

<!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>

　　3.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>

選擇器優先級

優先級 id>class>標簽選擇器

2.2、層次選擇器

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

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

2.子選擇器

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

3.相鄰兄弟選擇器

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

4.通用選擇器

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

5.所有案例代碼

<!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>

2.3、結構偽類選擇器

偽類：條件

語法 ul  li:條件元素


<!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>

2.4屬性選擇器（常用）

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 href="https://www.baidu.com" 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>

3.美化網頁元素

3.1、為什么要美化網頁

有效的傳遞頁面信息
美化網頁，頁面美觀漂亮，才能吸引用戶
凸顯頁面的主題
提高用戶的體驗

span標簽：重點要突出的字，用span標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> #Waves{ font-size: 30px; background: #3cdda6;
        }
    </style>
</head>
<body>
<span id="Waves">CSS</span>的學習 </body>
</html>

3.2字體樣式

繁瑣寫法，適合新手

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--fond-family: 控制字體的 例如:楷體.微軟雅黑 fond-size:50px; 字體大小 font-weight: bold; 字體粗細 color 字體顏色 可以設置多種字體 -->
    <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>

3.3、文本樣式、綜合寫法

<!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>

3.4、超鏈接偽類

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;
}

3.5、陰影

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*字體默認顏色*/ a{ text-decoration: none; /*去除字體下划線*/ color: #000000;
        }
        /*鼠標放上去的狀態*/ a:hover{ color: blueviolet;
        }
        /*鼠標按住未松開的狀態*/ a:active{ color: red;
        } #price{ text-shadow: black 5px 2px 3px;
        } #shu{ text-shadow: yellow 15px 6px 9px;
        }
    </style>
</head>
<body>


<a id="shu" href="">
    <img src="images/mcgx.jpg" alt="">
</a>
<p>
    <a href="#">碼出高效：Java開發手冊</a>
</p>
<p>
    <a href="#">作者:孤盡老師</a>
</p>
<p id="price">
    <a href="#">價格：￥99</a>
</p>
</body>
</html>

3.6列表

#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>
        <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分類</h2>
        <ul>
 <li><a href="#">圖書</a>&nbsp;&nbsp;<a href="#">影像</a>&nbsp;&nbsp;<a href="#">數碼商品</a> </li>
<li><a href="#">電腦</a>&nbsp;&nbsp;<a href="#">辦公</a>&nbsp;&nbsp;<a href="#">游戲</a> </li>
<li><a href="#">家用商品</a>&nbsp;&nbsp;<a href="#">茶幾</a>&nbsp;&nbsp;<a href="#">沙發</a> </li>
<li><a href="#">家具</a>&nbsp;&nbsp;<a href="#">床</a>&nbsp;&nbsp;<a href="#">衣櫃</a> </li>
<li><a href="#">飲料食品</a>&nbsp;&nbsp;<a href="#">礦泉水</a>&nbsp;&nbsp;<a href="#">碳酸飲料</a> </li>
<li><a href="#">裝飾品</a>&nbsp;&nbsp;<a href="#">小毛公仔</a>&nbsp;&nbsp;<a href="#">球仙人掌</a> </li>
        </ul>
    </div>
    <div id="navs">
        <h2 class="title">全部商品分類</h2>
            <ul>
<li><a href="#">圖書</a>&nbsp;&nbsp;<a href="#">影像</a>&nbsp;&nbsp;<a href="#">數碼商品</a> </li>
<li><a href="#">電腦</a>&nbsp;&nbsp;<a href="#">辦公</a>&nbsp;&nbsp;<a href="#">游戲</a> </li>
<li><a href="#">家用商品</a>&nbsp;&nbsp;<a href="#">茶幾</a>&nbsp;&nbsp;<a href="#">沙發</a> </li>
<li><a href="#">家具</a>&nbsp;&nbsp;<a href="#">床</a>&nbsp;&nbsp;<a href="#">衣櫃</a> </li>
<li><a href="#">飲料食品</a>&nbsp;&nbsp;<a href="#">礦泉水</a>&nbsp;&nbsp;<a href="#">碳酸飲料</a> </li>
<li><a href="#">裝飾品</a>&nbsp;&nbsp;<a href="#">小毛公仔</a>&nbsp;&nbsp;<a href="#">球仙人掌</a> </li>
            </ul>
        </div>
    </body>
</html>

3.7、背景

<!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>

3.8、漸變

<style> body{
    /*background: #FFFFFF;*/ background-image: linear-gradient(115deg,#FFFF4F 0%,#6785ff 50%, #FF0000 100%);
} </style>

4、盒子模型

4.1什么是盒子模型

margin：外邊距

padding：內邊距

border ：邊框

4.2、邊框

邊框粗細
邊框的樣式
邊框的顏色

<!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>
</head>
<body>
<div id="box">
    <h2>會員登錄</h2>
    <form action="index.html">
        <div>
            <span>用戶名：</span>
            <input type="text" />
        </div>
        <div>
            <span>密碼：</span>
            <input type="text" />
        </div>
    </form>


</div>

</body>
</html>

4.3、內外邊距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*border:粗細，樣式，顏色*/ #box{ width: 300px; border: 1px solid red; margin: 0 2px 1px;
        }
        /* 順時針旋轉，上右下左 margin:0 上右下左外邊距都為0 margin: 0 1px 上下為0 左右為一 margin: 0 2px 1px; 上為0 左右為2 下為1 margin: 0 1px 2px 3px */ h2{ font-size: 18px; background: #FF0000; line-height: 30px; margin: 0;
        } form{ background: #3cdda6;
        } input{ border: 1px solid black;
        } div:nth-of-type(1){ border: 1px; padding: 2px;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>會員登錄</h2>
    <form action="index.html">
        <div>
            <span>用戶名：</span>
            <input type="text" />
        </div>
        <div>
            <span>密碼：</span>
            <input type="text" />
        </div>
    </form>


</div>

</body>
</html>

盒子的計算方式：這個元素到底有多大？

margin+border+padding+內容寬度

4.4、圓角邊框

圓圈

<!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; margin: 30px; background: chartreuse; border-radius: 50px 50px 0 0;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

4.5、盒子陰影

<!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>

5、浮動

5.1display

塊元素： display：block 行元素：inline 既是塊元素優勢行元素： inline—block 但是可以內聯，在一行 1.這個也是一種實現行內元素排列的方式，但是我們很多情況都用float <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    /*block 塊元素 inline 行內元素 inline-block行內元素 但可以內力聯。在一行！ none */ div{ width: 100px; height: 100px; border: 1px solid red; display: none;
    } span{ width: 100px; height: 100px; border: 1px solid red; display: inline-block;
    }

</style>
</head>
<body>

<div>這是一個div</div>
<span>這是span標簽</span>
</body>
</html>

5.2、float

1.左右浮動 float

div{ margin: 10px; padding: 5px;
} #father{ border:1px #000000 solid;
} .layer01{ border: 1px #0032FF dashed; display: inline-block; float: right;
} .layer02{ border: 1px #006600 dashed; display: inline-block; float: right;
} .layer03{ border: 1px #0003 dashed; display: inline-block; float: right;
} .layer04{ border: 1px #666 dashed; font-size: 15px; line-height: 23px; display: inline-block; float: right;
}

代碼壓縮包

鏈接：https://pan.baidu.com/s/1iVbM7QY7wAfxqZT6K730PQ
提取碼：3eyj

作者：舊歌
鏈接： https://www.cnblogs.com/wdyjt
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須在文章頁面給出原文連接，否則保留追究法律責任的權利

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 快速上手typescript（基礎篇） AngularJS入門之如何快速上手 css3彈性盒模型flex快速入門與上手1 【opencv入門篇】 10個程序快速上手opencv【上】第二篇、Maven快速上手測試 - Postman篇之快速上手 Hibernate 快速上手操作入門【opencv入門篇】 10個程序快速上手opencv【下】 Nest快速上手 [如何快速上手對拍]

CSS快速入門基礎篇，讓你快速上手（附帶代碼案例）

1、什么是CSS

1.1、什么是CSS

1.2、發展史

1.3、快速上手

2、選擇器

2.1、基本選擇器

標簽選擇器

2.類 選擇器 class

3.Id選擇器

選擇器優先級

2.2、層次選擇器

2.3、結構偽類選擇器

2.4屬性選擇器（常用）

3.美化網頁元素

3.1、為什么要美化網頁

3.2字體樣式

3.3、文本樣式、綜合寫法

3.4、超鏈接偽類

3.5、陰影

3.6列表

3.7、背景

3.8、漸變

4、盒子模型

4.1什么是盒子模型

4.2、邊框

4.3、內外邊距

4.4、圓角邊框

4.5、盒子陰影

5、浮動

5.1display

5.2、float

免責聲明！

　　2.類選擇器 class

　　3.Id選擇器