本文目錄導(dǎo)讀：

1. 字體設(shè)置
2. 圖片設(shè)置
3. 綜合應(yīng)用

CSS設(shè)置字體與圖片的方法

在CSS中，我們可以使用多種屬性來設(shè)置字體和圖片，以下是一些基本的設(shè)置方法：

字體設(shè)置

1、字體大小：使用font-size屬性可以設(shè)置字體大小，

p {
  font-size: 16px;
}

2、字體顏色：使用color屬性可以設(shè)置字體顏色，

p {
  color: #333;
}

3、字體類型：使用font-family屬性可以設(shè)置字體類型，

p {
  font-family: Arial, sans-serif;
}

圖片設(shè)置

1、圖片大小：使用width和height屬性可以設(shè)置圖片大小，

img {
  width: 500px;
  height: 300px;
}

2、圖片位置：使用position屬性可以設(shè)置圖片位置，

img {
  position: absolute;
  top: 0;
  left: 0;
}

3、圖片邊框：使用border屬性可以設(shè)置圖片邊框，

img {
  border: 1px solid #ccc;
}

綜合應(yīng)用

在實際應(yīng)用中，我們可以根據(jù)需求綜合使用這些屬性，以達(dá)到更好的視覺效果，我們可以為一段文本設(shè)置字體大小和顏色，同時為圖片設(shè)置大小和位置，以下是一個示例：

p {
  font-size: 16px;
  color: #333;
}
img {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #ccc;
}

在HTML中，我們可以為元素添加class或id，以便在CSS中更***地控制它們的樣式。

<p class="text">這是一段文本。</p>
<img id="image" src="image.jpg" alt="圖片">

在CSS中，我們可以使用這些class或id來設(shè)置樣式：

.text {
  font-size: 16px;
  color: #333;
}
#image {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #ccc;
}