HTML美化网页

2023-12-21 16:32:13

使用CSS3美化的原因

用css美化页面文本,使页面漂亮、美观、吸引用户 可以更好的突出页面的主题内容,使用户第一眼可以看到页面主要内容 具有良好的用户体验 <span>标签 作用 能让某几个文字或者某个词语凸显出来

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

字体样式：

font声明属性?字体属性的顺序：字体风格-字体粗细-字体大小-字体类型
font-family设置字体类型宋体? ?楷体
font-size设置字体大小?px;em;mm;cm;pc;pt
font-style设置字体风格? ?italic：斜体? ? ? ?oblique：斜体? ???normal：正常?
font-weight设置字体粗细?bold：粗体? ? bolder：更粗? ? ?lighter：更细? ??normal：默认
 <style>
        .aa{color: #640000;
        font-weight: bolder}
        p{color: coral;
        line-height: 50px}
        #ss{text-align: center}
    </style>

  <p><span class="aa">如何犁地、播种和收获？</span>

运行结果如下

文本属性：

color设置文本颜色RGB
text-align水平线对齐?
?left：左边? ? ?right：右边? ? ?center：中间? ? ? justify：俩端对齐
text-indent：设置行的缩进
line-height设置文本的行高
text-decoration设置文本的装饰none：默认值? ? underline：下划线? ? ?overline：上划线
line-through设置文本删除线
vertical-align垂直方式middle（中间） ,top(顶部) ,bottom(底部)
text-indent设置行的缩进
color属性
RGB
  1. 十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后的两位表示蓝色的分量
  2. rgb(r, g, b)：正整数的取值为0~255
color:#A983D8;
color:#EEFF66;
color:rgb(0, 255, 255);
color:rgba(0, 0, 255, 0.5);

运行结果如下

文本阴影：

text-shadow:color? Xpx? Ypx? 半径px

text-shadow:color  Xpx  Ypx  半径px


#jcyykt{
    font-family: 楷体;
    font-weight: bold;
    text-shadow: #999999 5px 5px 5px;
    text-align: center;
    font-size: 20px;
}
运行结果如下

文本装饰：

text-decoration属性

none：默认值

underline：设置文本下划线

overline：设置文本上划线

line-through：设置文本删除线

underline：设置文本下划线
     .aa{color: #640000;
            text-decoration: underline;
        font-weight: bolder}

    <p><span class="aa">如何犁地、播种和收获？</span>
运行结果如下：
overline：设置文本上划线
   .aa{color: #640000;
            text-decoration: overline;
        font-weight: bolder}


  <p><span class="aa">如何犁地、播种和收获？</span>

运行结果如下：

line-through：设置文本删除线
     .aa{color: #640000;
            text-decoration: line-through;
        font-weight: bolder}

运行结果如下：

CSS设置超链接：

  • a:link——未单击访问超链接样式
  • a:visited——单击访问后超链接样式
  • a:hover——鼠标悬浮其上超链接样式
  • a:active——鼠标单击未释放超链接样式
  • 设置伪类的顺序：a:link-a:visited-a:hover-a:active

a:hover——鼠标悬浮其上超链接样式

     .aa:hover{
            color: #e91a5b;
        }

鼠标悬浮其上效果

a:visited——单击访问后超链接样式

  .aa:visited{
            color: #d45353;
        }

 <p><span class="aa"><a href="book_no01.gif">如何犁地、播种和收获？</a></span>

单机访问后的效果

一个变色的超链接


<style>
    .ys:link{color: red}
    .ys:visited{color: black}
    .ys:hover{color: chartreuse}
    .ys:active{color: blue}
</style>


<a href="https://home.firefoxchina.cn/?from=extra_start" target="_blank" class="ys">这是一个变色的超链接</a>
运行如下

列表样式：

list-style-type:none无标记符号
text-decoration:none（超链接）
list-style-type:disc实心圆，默认
list-style-type:circle空心圆
list-style-type:square实心正方圆
list-style-type:decimal数字
list-style-type:disc------实心圆，默认
   li{
            list-style-type:disc
        }



   <ul>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
        </ul>

如下图

list-style-type:circle--------空心圆
       li{
            list-style-type:circle
        }



   <ul>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
        </ul>

如下图

list-style-type:square---------实心正方圆
       li{
            list-style-type:square
        }



   <ul>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
        </ul>

如下图

list-style-type:decimal-------数字
   li{
            list-style-type:decimal
        }


   <ul>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
        </ul>

如下图

可以去除列表前面默认的实心圆点 
li{
	list-style:none;
}
#可以去除列表前面默认的实心圆点

背景颜色：

background-color：(颜色) 
.bj{background-color: darkgreen;


  <td>畅销书排行<img src="bang.gif" class="tb">
如下图
背景图像：
background-image：（图片路径：）
代码示例： 
.listLeft{
	font-size:18px;
	color:black;
	text-indent:1em;
	line-height:35px;
	background:#red url("图片位置" 20px 20px no-reapeat)
}


#说明
#red:背景颜色
url():背景图片
20px 20px:背景定位
no-repeat:不重复显示
背景重复方式：
background-reqeat：属性
——reqeat：沿水平和垂直俩个方向平铺
——no-reqeat：不平铺，只显示一次
——reqeat-x：只沿水平方向平铺
——reqeat-y：只沿垂直方向平铺
背景定位：
Xpos：表示水平线位置? ?单位：px
Ypos：表示垂直位置? ? ? ?单位：px
X% - Y%：使用百分比表示背景位置
X - Y方向关键词：
X水平线：?left：左边? ? ?right：右边? ? ?center：中间
Y垂直：middle(顶部) ,center(中部) ,bottom(底部)
背景颜色-背景图像-背景定位-背景不重复显示
背景尺寸：
background-size
属性值描述
auto

默认值,使用背景图片保持原样

percentage

当使用百分值时,不是相对于背景的尺寸大小来计算的，

而是相对于元素宽度来计算的

cover

整个背景图片放大填充了整个元素

contain

让背景图片保持本身的宽高比例,将背景图片缩放到

宽度或者高度正好适应所定义背景

css3渐变：

linear-gradient(podition-渐变方向，color1，color2.....)
线性渐变

颜色沿一条直线过渡：从左到右、从右到左、从上到下等

径向渐变

圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

font-weight: bolder;
    background: linear-gradient(powderblue, cyan)}

如下图

文章来源:https://blog.csdn.net/liyil66464/article/details/135126716
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。