在前端開(kāi)發(fā)中，CSS（層疊樣式表）是不可或缺的一部分。CSS不僅影響網(wǎng)頁(yè)的布局，還有著很多實(shí)用的設(shè)置規(guī)則，下面就來(lái)介紹一下常用的CSS設(shè)置規(guī)則。
第一，字體設(shè)置。在CSS中，通過(guò)font-family屬性來(lái)設(shè)置字體，可以使用系統(tǒng)自帶字體，也可以通過(guò)導(dǎo)入外部字體庫(kù)的方式來(lái)擴(kuò)展字體的選擇范圍。同時(shí)，也可以通過(guò)font-size屬性來(lái)控制字體的大小。
例如：
pre {
font-family: monospace;
font-size: 14px;
}
第二，文本設(shè)置。在CSS中，可以設(shè)置文本的顏色、對(duì)齊方式、行高等屬性。例如，通過(guò)color屬性可以設(shè)置文本的顏色，通過(guò)text-align屬性可以設(shè)置文本的對(duì)齊方式，通過(guò)line-height屬性可以設(shè)置文本的行高。
例如：
p {
color: #333;
text-align: center;
line-height: 1.5;
}
第三，背景設(shè)置。在CSS中，可以設(shè)置元素的背景顏色、背景圖片等屬性。例如，通過(guò)background-color屬性可以設(shè)置元素的背景顏色，通過(guò)background-image屬性可以設(shè)置元素的背景圖片。
例如：
body {
background-color: #fff;
background-image: url(background.jpg);
}
第四，邊框設(shè)置。在CSS中，可以設(shè)置元素的邊框?qū)挾取⑦吙蝾伾⑦吙驑邮降葘傩浴＠纾ㄟ^(guò)border-width屬性可以設(shè)置元素邊框的寬度，通過(guò)border-color屬性可以設(shè)置元素邊框的顏色，通過(guò)border-style屬性可以設(shè)置元素邊框的樣式。
例如：
pre {
border-width: 1px;
border-color: #ccc;
border-style: solid;
}
第五，布局設(shè)置。在CSS中，可以通過(guò)float屬性控制元素的浮動(dòng)方式，通過(guò)position屬性控制元素的定位方式，通過(guò)display屬性控制元素的顯示方式。
例如：
img {
float: left;
margin-right: 10px;
}
div {
position: relative;
top: 20px;
left: 20px;
display: flex;
}
以上就是一些常見(jiàn)的CSS設(shè)置規(guī)則。通過(guò)靈活的運(yùn)用這些規(guī)則，可以實(shí)現(xiàn)很多炫酷的效果，使網(wǎng)頁(yè)更加漂亮和美觀。
上一篇jquery span
下一篇常用的reset.css