首页 > 其他分享> 文章详细

CSS作用和字体样式

2022-06-03 10:00:20 阅读：144 来源： 互联网

标签：indent 样式 text height color 字体 font CSS size

字体样式

font

1；文本样式

颜色

RGB

RGBA；最后是透明度

2；文本对齐方式

text-align ;center 居中

3；首行缩进

text-indent;缩进

4；行高

line-height:

5；装饰

text-decoration

A标签去下划线

6；文图水平对齐

vertical-align :middle

文本阴影超链接伪类

/*阴影*/
#price{
    text-shadow: 3px 3px 2px fuchsia;
}

/*鼠标悬浮颜色*/
a:hover{
    color: #02ff00;
    font-size: large;
}
/*鼠标点击颜色*/
a:active{
    color: fuchsia;
}


</head>
<body>

<a href="#">
    <img src="images/3.jpg" alt="壁纸" width="100px" height="120px">
</a>

<p>
    <a href="#">一个壁纸：不用的</a>
</p>
<p>
    <a href="">作者；steam</a>
</p>
<p id="price">
    $:99
</p>

</body>
</html>

列表样式练习

#nav{
    width: 240px;
}


.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 36px;
    background-color: red;
    
}
/*ul  li*/
/*
list-style
none:去掉原点
circle 空心圆
decimal 数字
spuare 正方形

*/

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-color: gainsboro;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}
a:hover{
color: orange;
}

标签：indent,样式,text,height,color,字体,font,CSS,size
来源： https://www.cnblogs.com/xyzaa/p/16339592.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS作用和字体样式