css3新增屬性選擇器的功能描述,css3的作用及角色?
CSS3是CSS2的升級版本,3只是版本號,它在CSS2.1 的基礎上增加了很多強大的新功能,目前主瀏覽器 Chorme、Safari、Firefox、Opera、甚至360都已經支持了CSS3大部分功能了,IE10以后也開始全面支持CSS3了。在編寫CSS3樣式時,不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規則尚未成為W3C標準的一部分。是瀏覽器的私有屬性雖然目前較新版本的瀏覽器都是不需要前綴的,但為了更好的向前兼容,前綴還是少不了的。
Chrome 和 Safari:-webkit
Firefox:-moz
IE:-ms
Opera:-o
CSS3 把很多以前需要使用的圖片和腳本來實現的效果,甚至動畫效果,現在只需要短短幾行代碼就能搞定。比如:圓角、圖片邊框、文字陰影和盒陰景、漸變、個性化字體、多圖片背景、變形處理(旋轉、縮放、傾斜、移動)、過渡、動畫、多欄布局、媒體查詢等。還有選擇器,簡化了前端開發工作人中山小欖的設計過程,加快頁面載入速度。
css3的用途是什么?
html5是萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言(HTML)的第五次重大修改。css3特性(Class:CSS3)在不犧牲性能和語義結構的前提下,CSS3中提供了更多的風格和更強的效果。此外,較之以前的Web排版,Web的開放字體格式(WOFF)也提供了更高的靈活性和控制性。
使用css樣式定義文本大小需要設置文本屬性?
這個是表示客戶端沒有的字體,在服務器端設置; 具體操作如下: 版本:CSS3 繼承性:無 語法:
@font-face :{屬性: 取值;} 取值:font-family:設置文本的字體名稱。
font-style:設置文本樣式。
font-variant:設置文本是否大小寫。
font-weight:設置文本的粗細。
font-stretch:設置文本是否橫向的拉伸變形。
font-size:設置文本字體大小。
src:設置自定義字體的相對路徑或者絕對路徑,注意,此屬性只能在@font-face規則里使用。說明:@font-face 能夠加載服務器端的字體文件,讓客戶端顯示客戶端所沒有安裝的字體。【微軟的IE 5已經是開始支持這個屬性,但是只支持微軟自有的.eot (Embedded Open Type) 格式,而其他瀏覽器直到現在都沒有支持這一字體格式。然而,從Safari 3.1開始,網頁重構工程師已經可以設置.ttf(TrueType)和.otf(OpenType)兩種字體做為自定義字體了。】 支持的瀏覽器有各大瀏覽器最新版本,IE6+就開始支持了;
中間自適應寬度的css布局?
對于左右定寬中間自適應這種css布局,其實有很多實現方法,下面簡單介紹幾種,供大家參考;
絕對定位+margin原理是將左右兩邊的div使用絕對定位分別定位到左右兩邊,中間的div使用margin屬性,留出左右div的寬度,將其中間的div寬度設為100%即可,代碼如圖
flex布局(彈性盒子)在外層包一層div,設置屬性display:flex,里面的子元素設置屬性flex:1,具體實現,看下圖代碼
float(浮動布局)float布局將左右div分別浮動到左右,中間使用margin屬性,留出左右的寬度,這個跟絕對定位布局有點相似,代碼如下圖
效果圖:總結:
實現這種左右定寬,中間自適應的css布局,其實有很多種實現方法,比如還有“圣杯布局”、“雙飛翼布局”;個人比較推薦flex布局方式,這也是css3新屬性,實現起來比較方便;如有疑問,歡迎在評論下方留言,大家一起討論