-
讓品牌有溫度、有情感
專注品牌策劃15年
-
當前位置：首頁 > 創(chuàng)意學院 > 景觀設(shè)計 > 專題列表 > 正文
1、css選擇器
css官網(wǎng)（animate.css官網(wǎng)）
發(fā)布時間：2023-04-12 02:29:28
稿源：
創(chuàng)意嶺 閱讀：
135
大家好！今天讓小編來大家介紹下關(guān)于css官網(wǎng)的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。
創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務客戶遍布全球各地，相關(guān)業(yè)務請撥打電話：175-8598-2043，或添加微信：1454722008
文章目錄列表:
（animate.css官網(wǎng)）.jpg)
一、css選擇器
CSS（Cascading Style Sheet），中文譯為層疊樣式表，可以讓設(shè)計者方便靈活地控制Web頁面的外觀表現(xiàn)。CSS是1996年由W3C審核通過并且推薦使用的。CSS的引入，就是為了使HTML語言更好地適應網(wǎng)頁的美工設(shè)計。CSS詳細規(guī)范說明要查閱CSS手冊，或登錄W3C官網(wǎng)（ http://www.w3c.org ）。
使用CSS，要了解常用的各種選擇器。
1.標記選擇器：
一個HTML頁面由很多不同的標記組成，而CSS選擇器就是聲明哪些標記采用哪種CSS樣式。每一種HTML標記的名稱都可以作為相應的標記選擇器的名稱。示例：
每一個選擇器都包含選擇器本身、屬性和值，其中屬性和值可以設(shè)置多個，從而實現(xiàn)對同一標記名稱聲明多種樣式。CSS語言對于所有屬性和值都有相對嚴格的要求，如果聲明的屬性在CSS規(guī)范中沒有，或者某個屬性的值不符合該屬性的要求，都不能使該CSS語句生效。 還有一種通配選擇器“*”，表示其中設(shè)置的樣式會應用于所有的網(wǎng)頁元素。示例：
<html><head><title>class選擇器</title>
<style type="text/css">
.red{ color: red; font-size:18px; }
.green{ color: green; font-size:20px; }
</style></head>
<body>
<p class="red">class選擇器1</p>
<p class="green">class選擇器2</p>
<h4 class="green">h4使用class</h4>
</body>
</html>
<html><head><title>ID選擇器</title>
<style type="text/css">
#bold{ font-weight: bold; }
#green{ font-size:30px; color:#009900; }
</style></head>
<body>
<p id="bold">ID選擇器1</p>
<p id="green">ID選擇器2</p>
</body></html>
<html><head><title>交集選擇器</title>
<style type="text/css">
p{ / 標記選擇器 / color: blue; }
p.special{ / 標記.類別選擇器 / color: red; }
.special{ / 類別選擇器 / color: green; }
</style></head>
<body>
<p >普通段落文本（藍色）……</p>
<h4 >普通標題文本（黑色）……</h4>
<p class="special">指定了.special類別的段落文本（紅色）……</p>
<h4 class="special">指定了.special類別的標題文本（綠色）……</h4>
</body>
</html>
<html><head><title>并集選擇器</title>
<style type="text/css">
h1,h4,h4.h4.h5.p{ / 并集選擇器 / color: purple; font-size:15px; }
h4.special,.special,#one{ / 集體聲明 / text-decoration:underline; }
</style></head>
<body>
<h1 >示例文字h1……</h1>
<h4 class=”special” >示例文字h4……</h4>
<h4 >示例文字h4……</h4>
<p >示例文字p1……</p>
<p class="special">示例文字p2……</p>
<p id="one">示例文字p3……</p>
</body></html>
<html><head><title>后代選擇器</title>
<style type=”text/css”>
p span{ / 嵌套聲明 / color: red; }
span{ color:blue; }
</style></head>
<body>
<p >嵌套使<span>用CSS（紅色）</span>標記的方法</p>
嵌套之外的<span>標記（黑色）</span>不生效
</body></html>
:hover :visited :active :first-line :first-letter :first-child :nth-child :nth-of-type :nth-last-child
:nth-last-of-type
二、求一個游戲官網(wǎng)的源代碼，html+css的，不需要太好，我就是參照一下
你可以參考盛大游戲的官網(wǎng)，ctrl+u 就能看到源代碼。
三、tailwindcss使用總結(jié)
官網(wǎng)
接觸tailwindcss不過兩周有余，但是僅僅剛接觸不到一天的時候，我已經(jīng)深深的被它吸引，我從未見過一款css庫可以做到如此好用、如此靈活，幾乎不用自己再寫css了，我覺得它比任何一款樣式庫都要好用。
如果您遇到的通用框架由許多組件預先設(shè)計組成，則在此TailwindCSS中，您將找不到諸如按鈕，卡片，警報，輪播等其他預先設(shè)計的組件。因為TailwindCSS不是UI工具包，而是實用程序優(yōu)先的框架，用于快速構(gòu)建自定義界面。
簡而言之，在TailwindCSS中，有許多小類代表CSS聲明。因此，當您要創(chuàng)建組件時，則需要使用其中的一些小類來創(chuàng)建您要引用的組件。
發(fā)的使用方法大體如下：
只要你記住它的命名規(guī)則，然后在className里面拼寫各個小樣式的名稱即可，你不用擔心某些css屬性tailwind會覆蓋不到，我用這兩周來幾乎沒碰到這種情況，可以去官網(wǎng)看下，每個屬性都有詳細的說明，你也不要覺得這么多小樣式的名稱很難記住，我?guī)缀踔挥冒胩鞎r間就掌握了它的命名規(guī)則，而一旦你掌握了它的命名規(guī)則，基本不用死記硬背，只要按規(guī)則去拼寫就可以，當然這有個前提：你對css屬性非常熟悉。
基本用法就是如我上面所寫，當然如果只有這些，很可能很滿足不了一些情況，tailwind提供了非常豐富的自定義接口，例如：
如上即可表示默認寬度是 w-full 即（width：100%）, md 表示當前設(shè)備是pc端（screen寬度大于768px，當然這個斷點也可以自己定義），這個樣式的意思就是在移動端全屏在pc端寬度固定為520px，爽嗎？這樣寫？
使用的時候就可以：
用的時候更加靈活，比如字體顏色，只需要：
采用 text-{顏色名} 即可，別的都同理了，比如背景色： bg-{顏色名} 即可，比如: bg-primary01
定義好scss樣式，
導入css，之后就可以混合使用：
定義要覆蓋的樣式：
即可覆蓋，當然用scss的方式也可以覆蓋，這種相當于內(nèi)聯(lián)樣式覆蓋，優(yōu)先級最高。
當mobileOptions為true的時候，樣式 option-group--mobile 才會起作用。
本文持續(xù)更新，隨著我對這個庫的認識的更加深入。
四、怎么修改網(wǎng)站的css讓它適應手機端？
需要準備的材料分別有：電腦、瀏覽器、html編輯器。
1、首先，打開html編輯器，新建html文件，例如：index.html。
2、在index.html中的<head>標簽中，輸入meta代碼：<meta name="viewport" content="width=device-width, initial-scale=1">。
3、瀏覽器運行index.html頁面，此時PC端的網(wǎng)頁在移動端上也能自動適配。
以上就是小編對于css官網(wǎng)問題和相關(guān)問題的解答了，如有疑問，可撥打網(wǎng)站上的電話，或添加微信。
推薦閱讀：
贛公網(wǎng)安備 50019002502384號
