CSS样式——文本、链接、鼠标、滚动条、背景

傷城~ 2022-06-17 09:20 249阅读 0赞

# CSS——样式 #

### 1.文本样式 ###

(1)class选择器：  <h2 class="k1">1234567890</h2>
    (2)id选择器：     <h2 id="xxx">12345</h2>

**style**

**链接外部样式**

**字体样式**

文字字体：font-family:"微软雅黑"
    文字大小：font-size:14px
    文字粗细：font-weight:normal/bold(粗体)           数值：【100】细【400】正常【700】粗
    文字风格：font-style:normal/italic 斜体/oblique 斜体
    
    文字大小写：font-variant:
        normal  默认值。浏览器会显示一个标准的字体。
        small-caps  浏览器会显示小型大写字母的字体。
        inherit 规定应该从父元素继承 font-variant 属性的值。

**文本样式**

文本颜色：color:red;                  
    背景颜色：background:gray
    字符间距：letter-spacing:2em          
    空格间距：word-spacing    
    
    行高：line-height:14px
    首行缩进：text-indent：2em / 30px / 30%
    
    水平对齐【仅可块元素中使用】：text-align:center / left / right /justify(文本两端对齐)
    垂直对齐【仅内联元素中使用】：vertical-align:bottom / middle / top
    
    x:link:设置链接未访问过的状态                  x表示class名
    x:visited:设置连接访问过的状态
    x:hover:设置链接的鼠标激活的状态（鼠标移动到该位置才显示）
    
    ps: 单位em是相对于字体大小而定的，是个相对单位
        一个文字大小是14px

**装饰文本** text-decoration

text-decoration文本装饰：
    none:默认的一个文本（无样式）
    underline：下划线       
    overline:上划线            
    line-through:中划线(删除线)
    
    bink:文本闪烁效果
    
    a标签的下划线去除可以使用
    
            <style >
                .underline{
         text-decoration: underline;}
                a{
         text-decoration: none;}
            </style>

**文字下沉**

![文字下沉][SouthEast]  
![文字下沉][SouthEast 1]

#### 列表样式 ####

![这里写图片描述][SouthEast 2]

### 2.链接样式 ###

**:link**

/*通过link类指定了页面内的链接颜色*/
    <div>
        a:link{
        color:#cc3333}  
    <div>

**:hover**

设置页面中鼠标放在超链接上时的显示效果，并且可以在里面设置文本样式和字体大小等属性
    <div>
        a:hover{
            属性：属性值
            color:#333;
            font-size:18px;
            ·····
        }  
    <div>

**鼠标悬停**  
![鼠标悬停][SouthEast 3]  
  
**滚动条样式**

![这里写图片描述][SouthEast 4]

### 3.背景样式 ###

**背景属性**

背景颜色：background-color:#11D0F7;
    背景图像：background-image:url('img261769original.png')
    背景大小：background-size:100% 50%;
    图像填充：background-repeat:no-repeat;
    图像定位（位移操作）：background-position:    值：x,y   eg:【center center】

**背景图片属性**

图像以什么方式重复：background-repeat:
    repeat:以平铺方式重复（默认）
    repeat-x:以x水平方向重复
    repeat-y:以y垂直方向重复
    no-repeat:不重复（填充）
    
    规定图像大小：
    background-size:
    50px 100px;设置背景图像的宽高与img中的宽高相同
    50% 50% 为所在版块显示的百分之50   当没有设置该板块的宽高时候，不会显示
    cover;使图像覆满最大尺寸，不够时会超出
    contain;使图像撑到最大尺寸，以使其宽度和高度完全适应内容区域

![背景图片滚动][SouthEast 5]

[SouthEast]: /images/20220617/7679fd2b67d24e9299491f69a46f8530.png
[SouthEast 1]: /images/20220617/8099683fc26640e19a4140d909b1ffe6.png
[SouthEast 2]: /images/20220617/00c7c85b0a8747d1be49a8dfea076bdc.png
[SouthEast 3]: /images/20220617/8ec0d440efb9481d9c7b47224898eb00.png
[SouthEast 4]: /images/20220617/eea22ea5d4884b9fbdb4a4cad086fcf3.png
[SouthEast 5]: /images/20220617/02f0f22f073d428394cb9e942a288ab8.png