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

最新推荐文章于 2024-04-06 00:41:41 发布

雾幻

最新推荐文章于 2024-04-06 00:41:41 发布

阅读量500

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 样式标签

本文链接：https://blog.youkuaiyun.com/lb812913059/article/details/70471133

css 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了CSS中的文本样式、链接样式及背景样式的设置方法。包括class与id选择器的应用、字体样式调整、文本颜色与背景颜色设定、链接状态样式设置等。此外还涉及了装饰文本的技巧以及如何自定义背景图片的大小、重复方式与定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS——样式

1.文本样式

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

style

<style>
    p{color:green;background:red;}
    h2{}                //所有的h2标签 
    .k1{}               //class选择器
    #xxx{}             //id选择器                          
    *{}                 //所有样式       
</style>

链接外部样式

<link rel="stylesheet" type="text/css" href="css.css">
relationship的英文缩写  关联

字体样式

文字字体：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>

文字下沉

文字下沉

列表样式

这里写图片描述

2.链接样式

:link

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

:hover

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

鼠标悬停

滚动条样式

这里写图片描述

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;使图像撑到最大尺寸，以使其宽度和高度完全适应内容区域

背景图片滚动