css 文本样式

最新推荐文章于 2024-07-24 20:11:59 发布

CNReva

最新推荐文章于 2024-07-24 20:11:59 发布

阅读量174

点赞数

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

本文链接：https://blog.csdn.net/m0_63338904/article/details/121512380

版权

html 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

文本属性样式

属性	含义	举例
color	设置文本颜色	color:#00c;
text-align	设置水平对齐方式	text-align:right；
text-indent	设置首行文本的缩进	text-indent:20px;
line-height	设置文本的行高	line-height:25px;
text-decoration	设置文本的装饰	text-decoration：underline;
vertical-align	垂直对齐方式，居中	vertical-align: middle;

页面文字默认大小为：16px

最小为12px

一般用于去除a标签的下划线：text-decoration:none；

a标签的伪类

hover伪类

<html>
    <head>
        <style>
            #box{
                width:100px;
                height:100px;
                background-color:red;
                /*过渡十秒时间*/
                transition:10s;
            }
            /*hover伪类
            作用：但光标移入元素时，生效指定的样式
            */
            #box:hover{
                 background-color:gold;
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
</html>

viited伪类

link伪类

active伪类


<html>
    <head>
        <style>
            /*link：连接没有访问之前的样式（从来没有访问过）*/
            a:link{
                
            }
            /*visited:单机访问后超链接样式（之前已经访问）*/
            a:visited{
                
            }  
            /*hover：鼠标悬浮其上的超链接样式*/
            a:hover{
                
            }
            /*active：点击的时候的样式*/
            a:active{
                
            }
            /*
                a标签伪类设置的顺序：a:link- >a:visited- >a:hover- >a:active
            */
        </style>
    </head>
    <body>
      <h1>
          <a href="http://www.360.com">嗓子干</a>
        </h1> 
    </body>
</html>

光标的样式

<html>
    <head>
        <style>
            #box{
                width:200px;
                heiht:200px;
                background:red;
            }
            #box:hover{
                background:green;
                /*cursor:改变鼠标放上去后的样式
                cursor:wait;程序正在忙
                cursor:text;指示文本
                cursor:help;指示可用的帮助             
                */
                cursor:pointer;
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
</html>

列表样式：

list-style:none;(去除ul标签前的小黑点)

背景：

背景颜色

background-color:red;

背景图片

background-image:url(图片地址);

设置背景不重复

background-repeat:no-repeat;

设置背景图片的位置

background-position:100px 200px;

设置背景图片的大小

background-size:100px 200px;

background属性：他是一个复合属性，包含上面所有元素

注意：斜杠前面的一定要是位置，后面一定是大小

background：red url() no-repeat 100px 200px / 100px 200px;

圆角：

将div设置成圆角

当四个值时：

border-radius:100px 100px 100px 100px ；

左上右上右下左下;

当一个值时

border-radius:50%;

当两个值时：左上右下右上/左下

border-radius:100px 10px;

当三个值时：左上右上/左下右下

border-radius:100px 10px 10px;

颜色的取值方式：

第一种：

background-color：red;

第二种：

background-color：#fffffff;

第三种：

background-color：rgb(255,255,255);

第四种：

样式rgba（红色，绿色，蓝色，透明值）

rgba的透明仅仅只是背景的透明

opacity是整个元素标签的透明

background-color：rgba(0,0,255,0);

透明度：

<html>
    <head>
        <style>
            #box{
               width:200px;
                height:200px;
                background-color:red;
                /*opacity属性：设置透明度 取值范围为0-1*/
                opacity:0;
               
            }
        
            
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
</html>

CNReva

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 文本样式

文本属性样式属性含义举例 color 设置文本颜色 color:#00c; text-align 设置水平对齐方式 text-align:right； text-indent 设置首行文本的缩进 text-indent:20px; line-height 设置文本的行高 line-height:25px; text-decoration 设置文本的装饰 text-decoration：underline;
复制链接

扫一扫

专栏目录