在網頁設計中，字體和圖片是非常常用的元素。CSS是一種很好的控制字體和圖片的樣式的工具。下面我們來看看如何使用CSS來控制字體和圖片的樣式。

/*控制字體的樣式*/
body {
font-family: Arial, sans-serif; /*用Arial或sans-serif字體*/
font-size: 16px; /*字體大小為16px*/
font-weight: 400; /*字體粗細為400*/
color: #333; /*文字顏色為#333*/
}
h1 {
font-size: 28px; /*h1標簽的字體大小為28px*/
font-weight: 700; /*h1標簽的字體粗細為700*/
color: #000; /*h1標簽的文字顏色為黑色*/
}
p {
line-height: 1.5; /*行高為1.5倍文字高度*/
}
/*控制圖片的樣式*/
img {
width: 100%; /*圖片寬度為父元素的100%*/
height: auto; /*高度會按比例自動調整*/
display: block; /*圖片設置為塊級元素*/
margin: 0 auto; /*水平居中*/
border: none; /*去掉邊框*/
}

以上代碼中，我們使用了font-family屬性來控制字體的樣式，我們可以指定一個字體，如Arial，如果該字體不存在，則會自動使用系統默認的sans-serif字體。font-size屬性用來設置字體大小，font-weight屬性用于控制字體的粗細程度。color屬性用于設置文字顏色。

對于圖片，我們使用了width屬性設置其寬度為100%，并將高度按比例自動調整，以保持圖片的原始比例。display屬性將圖片設置為塊級元素，這樣可以讓圖片獨占一行。margin屬性用于控制圖片的外邊距，實現水平居中的效果。border屬性可以控制圖片是否帶有邊框。

這就是CSS如何控制字體和圖片的樣式，通過簡單的幾行代碼，我們可以輕松地指定所需的樣式，讓網頁看起來更加美觀。