CSS美化网页元素

最新推荐文章于 2024-07-16 22:46:17 发布

taraex

最新推荐文章于 2024-07-16 22:46:17 发布

阅读量298

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/taraex/article/details/93035657

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

为什么使用CSS？

有效的传递页面信息
使用CSS美化过的页面文本，漂亮，美观，可以吸引用户
可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
具有良好的用户体验

span 和 div

span标签的作用
能让某几个文字或者某个词语凸显出来
行内元素
div标签
块级元素

span标签的使用示范：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>

    <style>
        #dream{
            font-size: 30px;
            color: red;
            font-weight: bold;
        }
        span[class="abc"]{
            font-size: 24px;
            color: blue;
            font-weight: bold;
        }



    </style>


</head>
<body>


<p>享受西开教学服务</p>
<p>在 <span>西开</span>学习 , <span id="dream">成就IT梦想</span></p>
<p>请选择 <span class="abc">西部开源</span>吧</p>



</body>
</html>

样式：
在这里插入图片描述

字体样式

属性名	含义	举例
font-family	设置字体类型	font-family:"楷书";
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体粗细	font-weight:bold;
font	在一个声明中设置所有字体属性	font:italic bold 36px "宋体";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>

    <style>
      p{
          font-family: 楷体;
          font-size: xx-large;
          font-weight: bolder;
          font-style: italic;
      }


    </style>


</head>
<body>


<p>快点学习吧，时间不等人</p>


</body>
</html>

样式：
在这里插入图片描述

文本样式

属性名	含义	举例
color	设置文本颜色	color: red;
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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../resources/css/测试.css">

</head>
<body>


<!--
px  ->像素
em  ->字符
-->



<h1>公司简介</h1>

<p>发布人: <span id="author">腾讯</span>  &nbsp; &nbsp; &nbsp; &nbsp;  时间: <span id="time">2024-01-01</span></p>

<p>腾讯科技股份有限公司（港交所：700）是中国规模最大的互联网公司，1998年11月由马化腾、张志东、陈一丹、许晨晔、曾李青5位创始人共同创立，总部位于深圳南山区腾讯大厦。腾讯业务拓展至社交、娱乐、金融、资讯、工具和平台等不同领域。目前，腾讯拥有中国国内使用人数最多的社交软件腾讯QQ和微信，以及中国国内最大的网络游戏社区腾讯游戏。在电子书领域 ，旗下有阅文集团，运营有QQ读书和微信读书。

    腾讯于2004年6月16日在香港交易所挂牌上市，于2016年9月5日首次成为亚洲市值最高的上市公司[3]，并于2017年11月21日成为亚洲首家市值突破5000亿美元的公司[4]。2017年，腾讯首次跻身《财富》杂志世界500强排行榜，以228.7亿美元的营收位居478位[5]。</p>

<p class="sj">微信是腾讯旗下针对智能手机平台开发的带有网络社交功能的即时通讯应用。由张小龙担任部门负责人。

<p class="sj">腾讯QQ，原名OICQ，是腾讯公司创始人马化腾于1999年开发的即时通讯软件。因与另一款1996年11月开发的即时通讯软件ICQ（目前ICQ已经归AOL旗下所有，腾讯间接控股）名字相似而被控侵权。虽然腾讯最终胜诉，但仍然将 OICQ 更名为 QQ[34]。
</p>
　　

</body>
</html>

CSS：

#author{
    font-family: 楷体;
}

#time{
    font-style: italic;
}

/* text-indent文本首行缩进 */
.sj{
    text-indent: 2em;
}

h1{
    text-shadow: aqua -1px 1px 10px;
}

在这里插入图片描述

文本阴影

text-shadow属性在CSS2.0中出现，但迟迟未被各大浏览器所支持，因此在 CSS2.1中被废弃，如今在CSS3中得到了各大浏览器的支持

text-shadow : color x-offset y-offset blur-radius;
color—>阴影颜色
x-offset—>X轴位移，用来指定阴影水平位移量
y-offset—>y轴位移，用来指定阴影垂直位移量
blur-radius—>阴影模糊半径，代表阴影向外模糊的模糊范围

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        h1{
            text-shadow:blue 5px 5px 10px;
        }

    </style>

</head>
<body>


<h1>中国</h1>
<h2>陕西省</h2>
<h3>西安市</h3>
<h4>长安区</h4>

</body>
</html>

在这里插入图片描述

超链接伪类

伪类名称	含义	举例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;}
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}

设置伪类的顺序：a:link->a:visited->a:hover->a:active

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../resources/css/测试.css">
</head>
<body>


<a href="https://www.baidu.com" target="_blank">点击进入...</a>


</body>
</html>

CSS:


a:visited{
    color: blue;
}


/*产生事件的伪类在同一个元素只能绑定一个*/
a:active{
    color: yellow;
}

/*:hover鼠标悬停样式*/
a:hover{
    color: red;
}

当鼠标没在上面是是蓝色，悬停在上面时是红色

列表样式

list-style-type
list-style-image
list-style-position
list-style

演示去除列表小黑点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li{
            list-style-type: none;
        }
    </style>

</head>
<body>

<ul>
    <li>java</li>
    <li>python</li>
    <li>c/c++</li>
    <li>Linux</li>
    <li>Bash</li>
</ul>



</body>
</html>

在这里插入图片描述

网页背景

背景颜色
background-color
背景图片
background-image
背景定位
background-position
背景重复方式
background-repeat
简写
background

background:#C00 url(…/image/xxxx.jpg) 205px 10px no-repeat;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       body{
           background-image:url("../resources/image/desktop.jpg");
           background-repeat: no-repeat;
       }
    </style>

</head>
<body>

<ul>
    <li>java</li>
    <li>python</li>
    <li>c/c++</li>
    <li>Linux</li>
    <li>Bash</li>
</ul>



</body>
</html>

在这里插入图片描述

背景尺寸

如果不对背景进行控制，就会产生上面的情况，图片在网页中的比例不好，不能全覆盖，这时就需要背景尺寸的调节来使得我们的网页变得好看

设计师如何对背景图片的大小进行控制呢？
背景尺寸： background-size

属性值	描述
auto	默认值，使用背景图片保持原样
percentage	当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover	整个背景图片放大填充了整个元素
contain	让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

使用上面那个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       body{
           background-image:url("../resources/image/desktop.jpg");
           background-repeat: no-repeat;
           background-size: cover;

       }
    </style>

</head>
<body>

<ul>
    <li>java</li>
    <li>python</li>
    <li>c/c++</li>
    <li>Linux</li>
    <li>Bash</li>
</ul>



</body>
</html>

在这里插入图片描述

此时可以看见这张图片刚好放进网页，看着很舒服

CSS3渐变

线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

浏览器兼容性

属性名	IE	Firefox	Chrome	Opera	Safari
Gradient	10+	19.0+	26.0+	12.i+	5.1+

IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-

线性渐变
语法
linear-gradient ( position, color1, color2,…)
position 渐变方向
color1 第一种颜色
color2 第二种颜色

因为所用的浏览器为谷歌浏览器，为了兼容，在前面加上-webkit-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      body{
          background: -webkit-linear-gradient(  left,blue,black);
      }
    </style>

</head>
<body>

<ul>
    <li>java</li>
    <li>python</li>
    <li>c/c++</li>
    <li>Linux</li>
    <li>Bash</li>
</ul>



</body>
</html>

展示：
在这里插入图片描述

taraex

关注

0
点赞
踩
0

收藏

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

为什么使用CSS？有效的传递页面信息使用CSS美化过的页面文本，漂亮，美观，可以吸引用户可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容具有良好的用户体验span 和 divspan标签的作用能让某几个文字或者某个词语凸显出来行内元素div标签块级元素span标签的使用示范：<!DOCTYPE html><html lang...
复制链接

扫一扫

专栏目录