個人博客靜態網頁的樣式需要使用CSS來實現,其中包括文字的大小、顏色和排版等方面的設計。下面我們來介紹一些常用的CSS樣式:
/* 文字樣式 */ p { font-size: 16px; /*文字大小*/ color: #333; /*文字顏色*/ line-height: 1.5; /*行高*/ } h1 { font-size: 30px; /*標題字號*/ font-weight: bold; /*加粗*/ margin: 20px 0; /*上下空白*/ } /* 邊框樣式 */ .container { border: 1px solid #ccc; /*容器邊框*/ padding: 20px; /*內邊距*/ } /* 背景樣式 */ body { background-color: #f9f9f9; /*頁面背景*/ } .header { background-color: #3a3a3a; /*頭部背景*/ color: #fff; /*文字顏色*/ } /* 布局樣式 */ .container { max-width: 800px; /*最大寬度*/ margin: 0 auto; /*水平居中*/ } .header { height: 80px; /*高度*/ display: flex; /*flex布局*/ justify-content: space-between; /*兩端對齊*/ } .logo { font-size: 24px; /*字號*/ font-weight: bold; /*加粗*/ line-height: 80px; /*行高*/ } .nav { display: flex; /*flex布局*/ justify-content: space-between; /*兩端對齊*/ } .nav a { margin-left: 20px; /*左側距離*/ text-decoration: none; /*去除下劃線*/ } /* 盒模型樣式 */ .box { width: 200px; /*寬度*/ height: 200px; /*高度*/ padding: 20px; /*內邊距*/ border: 1px solid #ccc; /*邊框*/ margin: 20px; /*外邊距*/ }
以上是常用的CSS樣式,通過調整它們的屬性值可以實現各種樣式的設計。另外,需要注意樣式表的引入方式,一般是在
標簽內使用標簽進行引入。