CSS基礎2--屬性

亦世發表於2018-08-09

width    min-width    max-width

height   min-height  max-height

overflow: scroll|hidden|auto

font-size瀏覽器預設的字型大小是16px,設定的是字型高度,寬度自動縮放

font-weight 字型粗細  lighter|normal|bold|bolder

font-style: italic|oblique|normal  斜體|傾斜  oblique強制字型傾斜

<em>預設斜體,有語義,強調

font-family:有空格的或者中文需要加雙引號 如"Times New Roman"

通用字型:arial

color: 英文單詞顏色設定|十六進位制的顏色值

光學三原色

red         green        blue

00-ff       00-ff          00-ff     ->十六進位制

0-255     0-255       0-255      ->rgb(0,0,255)


border: 1px solid #000;

可視區域:(width+左邊框+右邊框)*(height+上邊框+下邊框)

border-style:dotted|dashed|solid|double|groove|ridge|inset|outset

三角形的寫法


text-align:right|center|left;     對齊必須是相對有寬高的容器

line-height     文字行高 預設22


文字縮排

text-indent:2em;   預設 1em=16px;  若想1em=10px可設定font-size:52.6


text-decoration:none|underline|line-through|overline

                                       ins                del

cursor: pointer(游標小手)|not-allowed(禁用)


單行文字截斷和顯示省略號的三大件

white-space: nowrap;       //不換行

overflow-x: hidden;

text-overflow: ellipsis;    //隱藏部分加省略號


display

block|inline-block|


偽類選擇器:

hover  滑鼠移動上邊的樣式

disabled

checked


display:none  和  visibility:hidden 的區別

visibility:hidden保留被隱藏元素所佔據的HTML文件空間

display:none 不保留被隱藏元素所佔據的HTML文件空間


opacity:值越大透明度越低,值越小透明度越高

label的for起作用的三個條件:1同父級 2相鄰  3在其之後

改變CheckBox的樣式的方法:

input:focus{border:1px solid green}  聚焦後有綠色邊框


div span:first-child{}

div span:last-child{}

:nth-child(odd)   偽類      n   sixth

vertical-align: middle|top|bottom|畫素


容器內多行文字居中的方法:

1容器  display:table

2容器內文字  display:table-cell(表格單元格屬性)

3容器內文字 vertical-align:middle


通處理:

ul{

padding: 0;

margin: 0;

list-style: none;

}

h1,h2,h3,h4,h5,h6{ font-weight:normal;}

input,textarea,button{

outline:none;

}

a{text-decoration:none;}

i,em{font-weight:normal;}

相關文章