Html----day05----CSS3美化网页元素

桃扇骨 2024-04-29 11:08 5阅读 0赞

## 学习目标： ##

`提会使用CSS设置字体样式和文本样式 会使用CSS设置超链接样式 会使用CSS设置列表样式 会使用CSS设置背景样式 会使用CSS设置渐变效果`

--------------------

## 学习内容： ##

## 1.<span>标签 的作用 ##

能让某几个文字或者某个词语凸显出来

<p>享受<span class="show">“北大式”</span>教育服务</p>
    <p>在北大青鸟，有一群人默默支持你成就
    <span id="dream">IT梦想</span></p>
    <p class="bird">选择<span>北大青鸟</span>，成就你的梦想</p>

## 2.字体样式 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>属性</td> 
   <td>含义</td> 
   <td>示例</td> 
  </tr> 
  <tr> 
   <td>font-family</td> 
   <td>设置字体类型</td> 
   <td>font-family:"隶书";</td> 
  </tr> 
  <tr> 
   <td>font-size</td> 
   <td>设置字体大小</td> 
   <td>font-size:12px;</td> 
  </tr> 
  <tr> 
   <td>font-style</td> 
   <td>设置字体风格</td> 
   <td>font-style:italic;</td> 
  </tr> 
  <tr> 
   <td>font-weight</td> 
   <td>设置字体的粗细</td> 
   <td>font-weight：bold</td> 
  </tr> 
  <tr> 
   <td>font</td> 
   <td>在一个声明中设置所有字体属性<br> font字体属性的顺序：字体风格→字体粗<br> 细→字体大小→字体类型</td> 
   <td>font:italic bold 36px "宋体"</td> 
  </tr> 
 </tbody> 
</table>

## 3.文本属性 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>属性</td> 
   <td>含义</td> 
   <td>示例</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>设置文本颜色</td> 
   <td>color:#00C;</td> 
  </tr> 
  <tr> 
   <td>text-align</td> 
   <td>设置元素水平对齐方式</td> 
   <td>text-align:right;</td> 
  </tr> 
  <tr> 
   <td>text-indent</td> 
   <td>设置首行文本的缩进</td> 
   <td>text-indent:20px;</td> 
  </tr> 
  <tr> 
   <td>line-height</td> 
   <td>设置文本的行高</td> 
   <td>line-height:25px;</td> 
  </tr> 
  <tr> 
   <td>text-decoration</td> 
   <td>设置文本的装饰</td> 
   <td>text-decoration:underline;</td> 
  </tr> 
 </tbody> 
</table>

## 4.文本阴影 ##

text-shadow:color x-offset y-offset blur-radius;

从左到右的顺序依次是：阴影颜色 ；x轴位移，用来指定阴影水平位移；Y轴位移，用来指  
定阴影垂直位移量；阴影模糊半径，代定阴影向外模糊的模糊范围

## 5.超链接伪类 ##

伪类样式

语法：标签名:伪类名\{声明;\}

示例

a:hover {
    color:#B46210;访问后，紫色
    text-decoration:underline;
    }

使用CSS设置超链接

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>伪类名称</td> 
   <td>含义</td> 
   <td>示例</td> 
  </tr> 
  <tr> 
   <td>a:link</td> 
   <td>未单击访问时超链接样式</td> 
   <td>a:link{color:#9ef5f9}</td> 
  </tr> 
  <tr> 
   <td>a:visited</td> 
   <td>单击访问后超链接样式</td> 
   <td>a:visited {color:#333;}</td> 
  </tr> 
  <tr> 
   <td>a:hover</td> 
   <td>鼠标悬浮其上的超链接样式</td> 
   <td>a:hover{color:#ff7300;}</td> 
  </tr> 
  <tr> 
   <td>a:active</td> 
   <td>鼠标单击未释放的超链接样式</td> 
   <td>a:active {color:#999;}</td> 
  </tr> 
 </tbody> 
</table>

**设置伪类的顺序：a:link->a:visited->a:hover->a:active**

## 6.列表样式 ##

list-style-type

list-style-image

list-style-posion

list-style

示例

li {
    list-style:none;
    }

## 7.背景样式 ##

背景颜色：background-color属性

背景图像：background-image属性

背景重复方式：background-repeat属性

背景定位：background-position属性

背景样式简写：background属性

### 7.1:设置背景图像 ###

背景图像：background-image属性

语法

background-image:url(图片路径);

背景重复方式：background-repeat属性

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

### 7.2：设置背景图像 ###

背景定位：background-position属性

![1ab8e3f84b8d4c63818ca54c611dc44f.png][]

简写

background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;

## 8.CSS3渐变 ##

线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

语法：

linear-gradient (to position,  color1,  color2,…)

径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个  
起点朝所有方向混合

## 9.小图片与文本垂直居中对齐显示 ##

img{
        vertical-align: middle;
    }

![a18660a84c5b4dca90e6e8da4ca05dfa.png][]

[1ab8e3f84b8d4c63818ca54c611dc44f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/76a7df0a497e444995fc320324de31b8.png
[a18660a84c5b4dca90e6e8da4ca05dfa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/ca33836e4c214bd2b9df55a7fc50b77f.png