頻道欄目
首頁 > 資訊 > 其他 > 正文

學習CSS的第一天

18-08-24        來源:[db:作者]  
收藏   我要投稿

偽類元素:::before ::after 必須添加content屬性 默認是行級元素,如果想設置寬高必須轉換成塊級元素,無順序。

其他偽類選擇器:p::first-letter :獲取到p標簽中第一個字符 p::first-line :獲取到p標簽中第一行內容 p::selection:當前選中內容的樣式(背景顏色,字體顏色)

文字環繞兩種方法:

第一種:利用圖片屬性實現

設置標簽的屬性align=”right”即可,如果想讓圖片居左,文字在右環繞,可以將align屬性設置為left,其中 vspace 表示圖片與文字的上下距離,hspace表示左右距離。


HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局HTML文字環繞圖片布局

±3-¨·|

第二種:利用CSS屬性實現

修改float=”right / left” 即可實現圖片在右,左文字在左環繞;修改float=”none” 即可實現圖片與其標題獨占一行,如下圖:

圖像標題
CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局CSS文字環繞圖片布局

¨·|-¨3

修改float=”right” 即可實現圖片在右,文字在左環繞;修改float=”none” 即可實現圖片與其標題獨占一行,如下圖:

è

首字下沉:


p::first-letter{
 font-size:40px;
 float:left;
 color:red;
}

opacity 和rgba的區別:


相同點:取值都是0~1
不同點:opacity具有繼承性,父元素設置opacity,子元素默認有opacity特性,父元素的Padding border content均有opacity特性
 rgba(255,255,255,0~1);
 //ragba(紅色值,綠色值,藍色值,透明度);可以設置border,background-color; color;
  

陰影:

文字陰影:text-shadow:左上 為負 右下為正


添加陰影 text-shadow:offsetX offsetY blur color
offset:背景偏移的長度,blur:光分散的長度,背景及光的顏色
/*多層陰影的效果*/
text-shadow: 0px 0px 30px #fff,0px 0px 50px red,0px 0px 70px #fff;
/*立體浮雕效果*/
 text-shadow: -1px -1px 0px #eee,-2px -2px 0px #ddd,-3px -3px 0px #ccc;

在CSS3里可以使用RGBA和HSLA兩種色彩模式:
 RGBA指的是“紅色、綠色、藍色和Alpha透明度
 hsla中 前三個參數則分別代表色調(0-360)、飽和度(0%-100%)和亮度(0%-100%)。透明度的取值從
 0(完全透明)到1(完全不透明)
 text-shadow: 0px 0px 8px hsla(30,100%,30%,0.6);

添加盒模型 box-sizing:border-box 改變/添加 padding border content-box值盒子大小不發生變化

添加邊框圓角:border-radius:左上,右上,右下,左下 如果只設置一個默認四個角取值相同 ,兩個對角相同

 

相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片