Ⅰ web前端,visual studio code,框架代碼寫完怎麼用
肯定寫在網頁的 body 標簽內啊,然後自己在 添加對應的div 標簽 設置 css 樣式
Ⅱ 簡單CSS樣式表的寫法
<html>
<head>
<styletype="text/css">
a.top:link{font-family:宋體}/*鏈接字體*/
a.top:link{font-weight:normal;}/*設置鏈接文字中的字元粗細*/
a.top:link{font-size:12}/*設置鏈接文字的大小*/
a.top:link{text-decoration:none;}/*設置鏈接文字沒有下劃線*/
a.top:hover{text-decoration:underline;}/*滑鼠放在鏈接上時有下劃線*/
a.top:link{color:#000000}/*設置鏈接文字的顏色*/
a.top:visited{color:#000000}/*訪問過的鏈接*/
a.top:hover{color:#B50000}/*滑鼠放在鏈接上字體的顏色*/
a.tj:link{font-family:宋體}
a.tj:link{font-weight:normal;}
a.tj:link{font-size:12}
a.tj:link{text-decoration:none;}
a.tj:hover{text-decoration:none;}
a.tj:link{color:#000000}
a.tj:visited{color:#0000ff}
a.tj:hover{background:#FFFFCC}
h1{font-size:12px}
h1{font-family:"宋體"}
h1{font-weight:normal;}
h1{color:#000000}
h2{font-size:14px}
h2{font-family:"宋體"}
h2{font-weight:normal;}
h2{color:#000000}
h3{font-size:24px}
h3{font-weight:1;}
h3{color:#000000}
body{
margin-top:1px;/*上邊距*/
margin-bottom:1px;/*下邊距*/
}
</style>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"></head>
<body>
<p>.</p>
<p><b><ahref="default.asp"target="_blank"class="top">電腦對懷孕其實沒啥影響</a></b></p>
<p><b><ahref="default.asp"target="_blank"class="tj">電腦對懷孕其實沒啥影響</a></b></p>
<h1>電腦對懷孕其實沒啥影響</h1>
<h2>電腦對懷孕其實沒啥影響</h2>
<h3>電腦對懷孕其實沒啥影響</h3>
</body>
</html>
Ⅲ 在html中怎樣使用css樣式
在html網頁中引入引入css主要有以下四種方式:
(1)行內式
<p style=」color:red」>網頁中css的導入方式</p>
(2)嵌入式
<style type=」text/css」>
P{ color:red }
</style>
嵌入式一般寫在head中,對於單個頁面來說,這種方式很方便。
(3)導入式
<!-- 導入外部樣式:在內部樣式表的<style></style>標記之間導入一個外部樣式表,導入時用@import。 -->
<style type="text/css">
@import "jisuan.css";
</style>
(4)鏈接式
<link href="jisuan.css" rel=」stylesheet」 type=」text/css」 />
導入式和鏈接式差不多,都是從外部引入css文件。但是鏈接式對於客戶端用戶瀏覽網站時,效果會好些。
Ⅳ 怎樣寫CSS樣式代碼
CSS的定義由三個部分構成:選擇符(selector),屬性(properties)和屬性的取值(value)。
CSS語法:
selector {property: value}
選擇符 {屬性:值}
選擇符有多種:類型選擇符、通配選擇符、屬性選擇符等。
類型選擇符:一般是你要定義樣式的HTML標記,例如BODY、P、TABLE……,你可以通過此方法定義它的屬性和值,屬性和值要用冒號隔開。
例子:body {color: black},此例的效果是使頁面中的文字為黑色。
如果需要對一個選擇符指定多個屬性時,我們使用分號將所有的屬性和值分開。
例子:p {text-align: center; color: red} (段落居中排列;並且段落中的文字為紅色)
這里只是最基本的寫法,建議你去找教程學習,比如w3cschool里的CSS教程。
在此推薦經典教程《精通CSS》。
參考資料里有一些稍微詳細的內容,建議你看一看。
Ⅳ 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樣式
-webkit-box、-moz-box、-o-box、-ms-box、box這些都是指同一個屬性即box,前面帶有-號的是分別針對不同的瀏覽器的,其中
-webkit- 針對Chrome和Safari瀏覽器
-moz- 針對FireFox瀏覽器
-o- 針對Opera瀏覽器
-ms- 針對IE瀏覽器
也就是說凡是帶有這樣的前綴的都是這些瀏覽器的私有屬性,只有各自的瀏覽器內部才有效。之所以這樣,是因為有些css屬性是帶有實驗性質的(尤其是css3),各主流瀏覽器尚未對它完全支持,這樣就會使用私有屬性來進行試驗,而其他瀏覽器則會自動忽略該屬性。因此,網頁為了兼容各種不同的瀏覽器,就會把所有的私有屬性都放上去,也包括不帶前綴的標准屬性。而瀏覽器的版本眾多,很可能低版本的瀏覽器對某個屬性處於試驗性質,而高版本則已經完全支持了(也就是說可以不用前綴了),比如box屬性就是如此,因此你把其他帶有前綴的屬性去掉不影響效果。但是,既然是網頁,就不會是只有你一個人看的,要是其他用戶用的是低版本的瀏覽器呢?所以,從兼容性角度出發,你最好不要刪掉這些屬性,除非你能保證其他用戶用的瀏覽器與你的完全一樣。
Ⅶ css樣式怎麼寫
css樣式是HTML的一個補充,簡單的css使用樣式如下:
<html>
<body>
<divid=div></div>
</body>
<styletype="text/css">
width:300px;//設置div的寬度300像素
height:500px;//設置div高度500像素
background-color:red;//設置div的背景顏色為紅色
</style>
</html>
css代碼位於style之間,詳細的css代碼解釋見代碼注釋。
Ⅷ 在jsp頁面定義CSS樣式怎麼寫
1、打開WebContent文件。
Ⅸ 怎麼給html標簽寫css樣式
1、直接使用行內樣式,即在html標簽上使用style
<divstyle="width:100px;height:100px;background:red;">div內容</div>
2、先定義css樣式,再給html的class屬性賦值
<style>
.content{
width:100px;
height:100px;
background:red;
}
</style>
<divclass="content">
div測試內容
</div>
總結:兩種方式效果是一致的,只是第二種方式可進行重用,只要html元素class屬性相同即可
Ⅹ HTML網頁怎麼使用CSS樣式
在製作一個網頁的時候,Css樣式的添加一共有四種方式,一起來看看這四種方式:
一、使用STYLE屬性: 將STYLE屬性直接加在個別的元件標簽里。
<元件(標簽) STYLE="性質(屬性)1: 設定值1; 性質(屬性)2: 設定值2; ...}
例如:
<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"標楷體"; line-height:150%>
這種用法的優點 是可靈巧應用樣式於各標簽中,但是缺點則是沒有整篇文件的『統一性』。
二、使用STYLE標簽: 將樣式規則寫在<STYLE>...</STYLE>標簽之中。
通常是將整個的 <STYLE>...</STYLE>結構寫在網頁的<HEAD> </HEAD>部份之中。這種用法的優點就是在於整篇文件的統一性,只要是有聲明的的元件即會套用該樣式規則。缺點就是在個別元件的靈活度不足。
三、使用 LINK標簽: 將樣式規則寫在.css的樣式檔案中,再以<LINK>標簽引入。
假設我們把樣式規則存成一個example.css的檔案,我們只要在網頁中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">
即可套用該樣式檔案中所制定好的樣式了。 通常是將LINK標簽寫在網頁的<head></head>部份之中。這種用法的優點就是在於可以把要套用相同樣式規則的數篇文件都指定到同一個樣式檔案即可。缺點也是在個別文件或元件的靈活度不足。
四、使用@import引入: 跟LINK用法很像,但必放在<STYLE>...</STYLE> 中。
要注意的是,行末的分號是絕對不可少的!這種方式也可以把