Ⅰ vs.net2005 web頁面如何使用css樣式文件
創建和應用
CSS
樣式表
除了為單個元素設置內聯樣式之外，還可以創建和應用級聯樣式表
(CSS)
文件。級聯樣式表使您可以定義可應用於多個控制項和頁面的樣式，而不必分別編輯元素。
在演練的本節中，將創建樣式表，該樣式表使您可以使用用於設置內聯樣式的相同工具。然後將樣式表應用於正在編輯的頁面。
創建樣式表
在解決方案資源管理器中，右擊網站的名稱（如
C:\WebSites），再單擊「添加新項」。
在「Visual
Studio
已安裝的模板」之下單擊「樣式表」。
在「名稱」框中，鍵入「dark.css」，再單擊「添加」。
編輯器打開一個包含
body
樣式元素的新樣式表。
將插入點定位在左右大括弧
({
})
之間，然後在「樣式」菜單上單擊「生成樣式」。
出現「樣式生成器
-
body」對話框。
單擊「字體」，在「字體屬性」下單擊位於「顏色」框右邊的省略號「(…)」，在「顏色選取器」對話框中單擊一種亮色，再單擊「確定」。
注意
請確保選擇一種與網站網頁的默認顏色不同的顏色。
單擊「背景」，單擊一種與前面步驟中選定的字體顏色對比的暗色（如「褐紫紅色」），再單擊「確定」關閉「樣式生成器
-
body」對話框。
將插入點定位到
body
元素的右大括弧之後，右擊，再單擊「添加樣式規則」。
出現「添加樣式規則」對話框。
「添加樣式規則」對話框使您可以創建綁定到特定
HTML
元素類型、樣式類名或特定元素的新樣式。
單擊「類名」，然後在框中鍵入「reverse」。
這樣將創建一個名為
.reverse
的新樣式類。將能夠把為
.reverse
定義的樣式設置應用於頁上的任何元素。還可以選擇創建類，以便它只能應用於特定類型的元素（定位點、按鈕等），但是在本演練中將創建一個簡單的樣式類。
單擊「確定」以關閉「添加樣式規則」對話框。
使用樣式生成器或
IntelliSense
功能將
.reverse
樣式的顏色設置為與主體樣式的顏色相反的顏色。元素類似於如下所示：
.reverse
{
background-color:white;
color:maroon;
}
既然有樣式表，那麼可以在正在編輯的頁中對其進行引用。
在網頁上引用樣式表
打開
Default.aspx
頁並切換到「設計」視圖。
從解決方案資源管理器中，將
dark.css
文件拖動到頁面上。
頁面已更新，並顯示樣式表的效果。
單擊「正方形」，然後在「屬性」中設置「CssClass」「reverse」。
這樣將反轉樣式應用於「正方形」。
切換到「源」視圖。
在
<head>
元素中，可以看到編輯器已經添加了引用樣式表的
<link>
元素。還可以看到
<asp:button>
元素的
cssclass
屬性已設置為
reverse。
右擊該頁，再單擊「在瀏覽器中查看」。
該頁出現在瀏覽器中，且已應用樣式表。
Ⅱ Web前端面試指導（五十）：CSS樣式書寫有哪些
一、CSS書寫順序
1.位置屬性(position, top, right,z-index, display, float等)
2.大小(width, height, padding,margin)
3.文字系列(font, line-height,letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、CSS書寫規范
1.使用CSS縮寫屬性
CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。
2.去掉小數點前的「0」
3.簡寫命名
很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦！
4.16進制顏色代碼縮寫
有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗為主。
5連字元CSS選擇器命名規范
1）長名稱或片語可以使用中橫線來為選擇器命名。
2）不建議使用「_」下劃線來命名CSS選擇器，為什麼呢？
輸入的時候少按一個shift鍵；瀏覽器兼容問題（比如使用_tips的選擇器命名，在IE6是無效的）能良好區分JavaScript變數命名（JS變數命名是用「_」）
6.不要隨意使用id
id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復使用，另外id的優先順序優先與class，所以id應該按需使用，而不能濫用。
7.為選擇器添加狀態前綴
有時候可以給選擇器添加一個表示狀態的前綴，讓語義更明了，比如下圖是添加了「.is-」前綴。
三、CSS命名規范
常用的CSS命名規則
頭：header
內容：content/Container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
登錄條：loginbar
標志：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權：right
滾動：scroll
內容：content
標簽：tags
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guide
服務：service
注冊：regsiter
狀態：status
投票：vote
合作夥伴：partner
ID的命名-頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
ID的命名-導航
導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary
ID的命名-功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：register
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作夥伴：partner
友情鏈接：link
版權：right
四、注釋規范
/* Header */
內容區
/* End Header */
五、注意事項
1.一律小寫;
2.盡量用英文;
3.盡量不縮寫，除非一看就明白的單詞。
六、CSS樣式表文件命名
主要的 master.css
模塊 mole.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
列印 print.css
Ⅲ Web前端工程師要掌握的CSS技巧
今天小編要跟大家分享的文章是關於昌亮Web前端工程師要掌握的CSS技巧。正在從事web前端工作的小夥伴們快來和小編一起看一看吧，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。
1、元素的margin的top、bottom及padding的top、bottom使用百分比作為單位時，其是相對父元素的寬度width的而不是我們想像的高度height；舉個例子：
其實出現這種現象，我們可以巧用margin/padding的百分比值實現高度自適應（多用於佔位，避免閃爍）當然該元素高度肆攔上的百分比是相對其父元素高度的百分比的，min-height及max-height也適用這條規律。
2、含有定位屬性的元素，其top、bottom單位為百分比時，該百分比是相對於父元素的高度的。同理，left、right則是相對於父元素的寬度的。
這一點，我昨天在查資料寫這篇文章—最全面的元素水平垂直居中方法匯總的時候就發現有個大牛也理解錯了—-CSS布局奇淫技巧之_各種居中裡面的第八點。3、邊框寬度不允許使用百分比裂迅胡值這點就不解釋了。4、width：100%當父容器里有絕對定位的子元素時，子元素設置width:100%實際上指的是相對於父容器的padding+content的寬度。當子元素是非絕對定位的元素時width:100%才是指子元素的content，其等於父元素的content寬度。
將上面子元素的position改成了relative後，其寬度就變成了parent寬度。
5、line-height你知道line-height:150%和line-height:1.5的區別嗎？知道了就可以跳過此處，不知道繼續看下面：舉個例子：
上面可以看到line-height有單位時，子元素是繼承父元素的line-height的，無單位時，其line-height等於無單位的數值乘以子元素本身的字體大小。顯然為了不出現意外，還是建議首選無單位的。6、ex和ch單位ex：取當前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計算；ch:以節點所使用字體中的「0」字元為基準，找不到時為0.5em；
ex和ch單位，類似於em和rem,依賴於當前的字體和字體大小。但是，不同的是，這兩貨是基於字體的度量單位，依賴於設定的字體。ch單位通常被定義為數字0的寬度。你可以在EricMeyers的博客里找到關於它的一些有意思的討論，例如將一個等寬字體的字母」N」的寬度設置為40ch，那麼在另一種類型的字體里它卻可以包含40個字母。這個單位的傳統用途主要是盲文的排版，但是除此之外，肯定還有可以應用他的地方。ex定義為當前字體的小寫x字母的高度或者1/2的1em。很多時候，它是字體的中間標志。
x-height;theheightofthelowercasex這些單位有很多用途，大部分用於版式的微調。比方說，sup元素（上角文字標），可以通過position:relative;bottom:
1ex;實現。類似的方法，你可以實現一個下角文字標。瀏覽器默認的方式是利用上標和下標特定垂直對齊規則，但是如果你想更細粒度更精確得控制，你可以像下面這樣做：Css代碼
7、使用calc時運算符之間要有空格，否則可能無效。
以上就是小編今天為大家分享的關於Web前端工程師要掌握的CSS技巧的文章，希望本篇文章能對正在從事web前端相關工作的小夥伴們有所幫助。想要了解更多web前端相關知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利！