1.通過標簽來修改樣式的缺點:
1.1 需要記憶那些標簽又那些屬性,如果該標簽沒有這個屬性,那么設置了也沒有什么效果
1.2 當需求變更時我們需要修改大量的代碼才能滿足現有的需求
1.3 html只有一個作用就是用來添加語義
所以在企業開發中修改樣式都交給css來做
2.通過CSS來修改樣式的好處:
2.1 不用記憶那些屬性屬于那些標簽
2.2 當需求變更時不需要修改大量的代碼就可以滿足需求
2.3 在前端開發中CSS只有一個作用,就是用來修改樣式
<style type="text/css">
h1{
text-align: center;
color: red;
font-family: "微軟 雅黑";
}
p{
text-align: center;
color:green;
font-family: "微軟 雅黑";
font-size: 30px;
}
</style>
<h1 >成功的法則</h1>
<p >遲到毀一生</p>
<p >早退窮三代</p>
<p >按時上下班</p>
<p >必成高富帥</p>
3.注意點:
3.1 style標簽必須寫在head標簽的開始標簽和結束標簽之間,(也就是必須和title標簽是兄弟關系)
3.2 style標簽中的type屬性其實可以不用寫,默認就是type="text/css"
3.3 設置樣式時必須按照固定的格式來設置,key: value 其中不能省略,分號大多數情況下不能省略(無論是否可以省略,但是都不要省略)
<style>
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: "楷體";
}
</style>
<!--1.規定文字樣式的屬性
font-style: italic;
normal: 正常的,默認就是正常的
italic: 傾斜的樣式
快捷鍵: fsi 然后按下table
fsn 然后按下table
2.規定文字粗細的屬性
字母取值
bold:加粗
bolder:比加粗還要粗
lighter:細線,默認就是的細線
快捷鍵:
fwb 然后按下table font-weight: bold;
fwbr 按下table font-weight: bolder;
數字取值
100 ~ 900 之間整百的數字
3.規定文字大小的屬性
font-size: 40px;
單位:px(像素 pixel)
注意點:通過font-size設置大小一定要帶單位,也就是一定要寫px
快捷鍵:
fz font-size:
fz30 font-size:30px;
4.規定文字字體的屬性
font-family: "楷體";
注意點:
1.如果取值是中文的話,需要使用單引號或者雙引號括起來
2.設置的字體必須使用戶電腦里面安裝的字體
3. ff 然后按下table
-->
<!--設置的字體就是不存在
怎么辦?
1.如果設置的字體不存在,那么系統會使用默認的字體來顯示
2.如果設置的字體不存在,而我們又不想使用默認字體怎么辦?
font-family:"發件方垃圾分類","微軟雅黑",,,,;備選方案
3.如果想給中文和英文設置不同的字體怎么辦?
但凡中文字體,里面都包含了英文
但凡英文字體,里面都沒有包含中文
注意點:如果想給界面中的英文單獨設置字體,必須把英文寫在前面
補充:在企業開發中最常見的字體有以上幾個:
中文:宋體,黑體,微軟雅黑 系統自帶
英文:Times New Roman /Arial 系統自帶
還需知道:就是并不是名稱是英文就一定是英文字體,
因為中文字體其實都有自己的英文名稱,所以是不是
中文字體主要看能不能處理中文
宋體 SimSum
黑體 SimHei
微軟雅黑 Microsoft YaHei
-->
<style>
p{
/*font-family:"發件方垃圾分類","微軟雅黑";*/
font-family:"Times New Roman","微軟雅黑";//備選方案用與中文
}
</style>
html -- 使用CSS修改樣式01
最后編輯于 :
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
推薦閱讀更多精彩內容
- 最近再做Again的項目。在用Readability降噪頁面后,返回一串html的字符串。使用loadHTMLSt...
- 今天一位朋友提出了一個很有意思的需要:“現在淘寶后臺在不增加CSS相應權限情況下,如何把以前的Css文件里的內容快...
- 一、 放入 redis 中(PHP 需要安裝 redis 擴展) yum 安裝 redis 擴展 修改 php.i...