css_4_字体样式_文本样式_hover伪类

CN_山居

于 2021-12-07 12:58:51 发布

阅读量165

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/Kemperorster/article/details/121766552

版权

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了CSS中字体属性如`font-size`、`font-weight`、`font-family`和`font-style`的使用，以及文本属性如`color`、`text-align`、`text-indent`、`line-height`和`text-decoration`。通过实例展示了如何设置文本样式，包括首行缩进、行高调整和文本修饰。此外，还提到了`hover`伪类在实现过渡效果中的应用。

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

字体样式

字体属性	作用
font-size	设置字体大小(最小12px)
font-weight	文字加粗(bold，100-900)
font-family	字体(宋体、楷体…)
font-style	文字风格(normal[正常]、italic[倾斜])
font	同时包含以上四个属性(像这样的属性我们一般称作为复合属性)

font设置的先后顺序

h1{  
    font: 字体风格 字体加粗 字体大小 字体；
    /* 
        font属性必须有font-size font-family；其他可选
        必须严格按照font-style font-weight font-size font-family顺序写
        */    
}

文本属性样式

属性	含义
color	设置文本颜色
text-align	设置元素的水平对齐方式
text-indent	设置首行文本的缩进(一个文字缩进为16px)
line-height	设置文本的行高(每一行的高度)
text-decoration	设置文本的修饰(none值一般用于去掉a标签的下划线)

hover伪类

作用：当光标移入元素时，该样式才生效

div{
    width:500px;
    height:500px;
    background-color:gold;
    
    /* 过渡 */
    transition:10s;
}

/* 当光标移入时，div花10秒样式变成高100，宽100，颜色为红 */
div:hover{
    width:100px;
    height:100px;
    background-color:red;
}