CSS初級屬性

2021-10-12 21:30:26 字數 2195 閱讀 1450

設定字型的屬性

1. font-size屬性

font-size 可以設定字型大小,可以無限放大,但是不能無限小,

最小是12

值為長度單位:

px 畫素單位

em 乙個漢字的大小

ex 乙個英文x的大小

% 百分比

1 font-size:20px;   //可以無限放大

2 font-size:12px; //不可以無限小,最小為12px的字型;

2.color屬性

color 設定字型的顏色,注意 千萬別寫成font-color

值為顏色值:

英文單詞:red (紅色), green (綠色)

rgb模式

hex模式 如果三種顏色的每兩位值都相同例如:#ffffff,可以縮寫成#fff

1 color:red;   //這是紅色  rgb模式

2 color:#000; //這是黑色 hex模式

錯誤示範 : font-color:red; //注意 這是錯的寫法

font-weight 屬性

font-weight設定字型的粗細

屬性值只有兩個:

normal   正常字型

bold 粗體或者可以寫成800

1 font-weight:normal;   //正常字型

2 font-weight:400; // //同樣也是正常字型 注意 不能加 px(單位)

3 font-weight:bold; //加粗字型

4 font-weight:800; //同樣也是加粗字型 注意 不能加 px(單位)

font-style 屬性

font-style 設定字型的風格,是否斜體

normal   正常字型

italic 斜體 或者 oblique

1 font-style:normal;   //正常字型

2 font-style:italic; //斜體

3 font-style:oblique; //斜體

font-variant 屬性

font-variant 設定字型的字母的大小寫

normal  正常字型

small-caps 設定為小型大寫字母

1 font-variant:normal;   //這是字母的預設字型

2 font-variant:small-caps; //把小寫字母轉為大寫字母

font-family 屬性

font-family設定字型的型別

各種字型的名稱,字型必須是客戶端中存在的字型

list-style : none  去掉無序列表前面的小圓點

width: 寬度

height:高度

border-radius:圓角屬性

text-align:設定文字對齊方式

text-align; 這個屬性的屬性值還有:

left //靠左對齊

right //靠右對齊

center //居中對齊

1 list-style:none;   //去掉無序列表前面的小圓點

2 width:200px; //這個是設定寬度 單位為px;

3 height:200px; //這個屬性是設定高度 單位是px;

4 border-radius:50%; //這個屬性是設定圓角屬性 值為50% 單位是%;

5 text-align:center; //這個屬性是設定文字居中

山腰很擠,我們不妨去山頂看看

這句話也送給正在學習的你 — 加油!

CSS初級入門 連線屬性

連線屬性 在 html 檔案裡的超連線文字經過瀏覽器的解釋後都會以加下劃線的方式來顯示,並沒有動態的效果,通過 css 之 anchor pseudo classes,大家可以將超連線文字的顯示方式做到幾種不同的變化。例如 www.webjx.com 以上的超級連線經過在瀏覽器頁面上是以加下劃線的方...

css學習初級入門

先體驗下css的魅力,哈哈 乙個簡單的html 頁面層容器 頁面頭部 側邊欄主體內容 頁面底部 基本資訊 body a link,a visited a hover 頁面層容器 container 利用padding 20px 20px 0 0來固定選單位置 menu 新增了float right使...

前端學習 css 初級

web開發中,html的每個元素都是盒子,盒子可以裝內容 content 可以有填充物 padding 有外殼 border 和 外保護層 margin 下圖為控制台中的盒子詳解 瀏覽器的控制台是我們了解乙個元素最好的乙個工具,下圖可以清晰的看出乙個盒子所擁有的屬性。元素的實際寬高 上圖可清晰的看出...