美化网页元素

最新推荐文章于 2024-08-24 21:32:07 发布

大猩猩StudyData

最新推荐文章于 2024-08-24 21:32:07 发布

阅读量277

点赞数

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

本文链接：https://blog.csdn.net/weixin_39391878/article/details/121771761

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了HTML中的标签用于突出显示文本，并讲解了如何利用伪类如:hover和:active来设置元素的样式。此外，详细阐述了字体、文本、阴影、背景和列表的CSS样式应用，包括颜色、大小、对齐、背景图片、列表样式以及渐变效果的实现。还展示了如何通过

和

等元素组织内容并调整布局。

摘要由CSDN通过智能技术生成

1、span标签

重点要突出的字，使用span标签套起来
<span></span>
可以在span标签里面加上class id等属性
然后就可以利用span标签，对这个关键字特殊处理

2、伪类

1、hover 鼠标悬浮到一个元素上的样式
标签：hover{ color:red; }
2、active 鼠标点击一个元素的样式
标签：hover{ color:red; }

3、字体样式


 <!--
    font-family 字体
    font-size 字体大小
    font-weight 字体粗细
    color 颜色
    -->
    <style>
        body{
            font-family: Farisi;
            font-size: 15px;
            font-weight: bold;
            color: red;
        }

4、文本样式

<!--
    color 颜色
    text-align 排版，居中等
    text-indent: 2em 首行缩进两个字符
    line-height 行高
    height:  块高，如果行高和块高一样，整个字体就会居中
    text-decoration:underline 下划线
    text-decoration:none 去掉下划线，a标签自带了一个下划线，用这个去
    -->
    <style>
        h1{
            color:red;
            text-align: center;
        }
        a{
            text-indent: 2em;
            line-height: 50px;
            height: 50px;
            text-decoration:underline;
        }

5、阴影

<!--
text-shadow: 颜色  水平偏移 上下偏移 半径;
-->
<style>
    h1{
        text-shadow: red 10px -10px 5px;
    }
</style>

6、背景

背景颜色 background：color
背景图片 background-image
background: red url("…/…/images/11.png") 10px 20px no-repeat ; 颜色图片地址图片位置平铺方式

<!-- 
       background-image: url("../../imageS/11.png") 默认平铺repeat，
       background-repeat: repeat-x; 只在第一行平铺，以下的几个内容的前提都是要有第一行，图片地址
       background-repeat: repeat-y; 只在第一列平铺
       background-repeat: no-repeat;不平铺
       
    -->
    <style>
        .div{
            width: 300px;
            height: 300px;
            border: 1px solid red ;
            background-image: url("../../images/11.png");
        }
    </style>
</head>
<body>
<div class="div"></div>
</body>

7、列表

   <!--
    list-style: none 去掉列表的圆点
    list-style: circle 空心圆
    list-style:decimal 数字
    list-style:square 正方形
    一般都喜欢用一个div将内容框起来，然后给div设置一个整体、大小基调
    -->
    <style>
        #nav{
            width: 300px;
            background: #788796;
        }

        ul li{
            list-style: none;
            text-indent: 1em;
            line-height:30px;
        }


    </style>
</head>
<body>
<div id="nav">
<h1 class="title">全部商品</h1>
<ul>
    <li><a href="#">图书</a>&nbsp;<a href="#">音像</a>&nbsp;<a href="#">数字商品</a>&nbsp;</li>
    <li><a href="#">电脑</a>&nbsp;<a href="#">手机</a>&nbsp;<a href="#">平板</a>&nbsp;</li>
</ul>
</div>

8、渐变

渐变案例
可以在上面找一些渐变的案例，复制里面的代码，就能达到渐变的效果

大猩猩StudyData

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
美化网页元素

1、span标签重点要突出的字，使用span标签套起来<span></span>可以在span标签里面加上class id等属性然后就可以利用span标签，对这个关键字特殊处理2、伪类1、hover 鼠标悬浮到一个元素上的样式标签：hover{ color:red; }2、active 鼠标点击一个元素的样式标签：hover{ color:red; }3、字体样式 <!-- font-family 字体 font-size 字体大小
复制链接

扫一扫

专栏目录