html -- 使用CSS修改樣式01

    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>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容