CSS美化网页

最新推荐文章于 2024-02-05 16:08:07 发布

啊侠

最新推荐文章于 2024-02-05 16:08:07 发布

阅读量173

点赞数 1

分类专栏： Java学习文章标签： CSS美化网页

本文链接：https://blog.csdn.net/weixin_44821160/article/details/92846755

版权

Java学习专栏收录该内容

35 篇文章 0 订阅

订阅专栏

CSS美化网页

span标签

span标签的作用：能让某几个文字或者某个词语凸显出来；

span标签写在行内元素中。

字体样式

属性名称	含义	典型例子
font-family	设置字体样式类型	font-family:“隶书”;
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体粗细	font-weight:bold;
font	在一个声明中设置所有字体属性	font:italic bold 36px “宋体”;

文本样式

属性	含义
color	设置文本颜色
text-align	设置元素水平对齐方式
text-indent	设置首行文本缩进
line-height	设置文本的行高
text-decoration	设置文本的装饰
vertical-align	设置文本对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页美化</title>
    <style>
        s{vertical-align: middle}
        q{color: aqua}
        .aa{text-align: center}
        .bb{text-index: 40px;color: brown}
        #cc{line-height: 30px}
        #dd{text-decoration: underline}
    </style>
</head>
<body>
<q>网页美化的文字内容1</q>
<p class="aa">网页美化的文字内容2</p>
<p class="aa">网页美化的文字内容3</p>
<p class="bb">网页美化的文字内容4</p>
<p class="bb">网页美化的文字内容5</p>
<p id="cc">网页美化的文字内容6</p>
<p id="dd">网页美化的文字内容7</p>
<s>网页美化的文字内容8</s>
</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

网页背景

背景颜色：background-color
背景图片：background-image
背景定位：background-position属性
背景重复方式：background-repeat
举例：background:#C00 url(…/image/小啊侠.jpg) 205px 10px no-repeat;
背景尺寸：background-size：
1. auto属性：默认值，使用背景图片保持原样；
2. percentage属性：当使用百分值时，不是相对于背景尺寸大小来计算的，而是相对于元素宽度来计算的；
3. cover属性：整个背景图片放大填充整个图片；
4. contain属性：让背景，将背景图片缩放到宽度或者高度正好适应所定义背景的区域。

CSS3渐变

线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等。
线性渐变语法：linear-gradient ( position, color1, color2,…)。其中position是渐变方向，color1是第一种颜色值，color2是第二种颜色值。
径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合。
CSS3渐变浏览器兼容：
1. IE浏览器是Trident内核，加前缀：-ms-；
2. Chrome浏览器是Webkit内核，加前缀：-webkit-；
3. Safari浏览器是Webkit内核，加前缀：-webkit-；
4. Opera浏览器是Blink内核，加前缀：-o-；
5. Firefox浏览器是Mozilla内核，加前缀：-moz-。

啊侠

关注

1
点赞
踩
3

收藏

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

CSS美化网页span标签span标签的作用：能让某几个文字或者某个词语凸显出来；span标签写在行内元素中。字体样式属性名称含义典型例子font-family设置字体样式类型font-family:“隶书”;font-size设置字体大小font-size:12px;font-style设置字体风格font-style:italic;...
复制链接

扫一扫