• 【CSS】H5_css美化

    文章目录

    第五章CSS3美化网页元素

    span标签

    在p标签中嵌套span标签，加入字体样式，能让某几个文字或者某几个词语凸显出来

    字体样式

    属性名含义举例
    font-family设置字体类型font-family:“隶书”;
    font-size设置字体大小(单位：px;em、rem、cm、mm、pt、pc)**font-size:**12px;
    font-style设置字体风格 (normal、italic斜体和oblique斜体)**font-style:**italic;
    font-weight设置字体的粗细**font-weight:**bold;
    font在一个声明中设置所有字体属性**font:**italic bold 36px “宋体”;
    font-family：类型
    font-size：字体大小

    单位：

    • px：像素
    • em：父容器（父级）字体的大小×em
    • rem：根容器 html 的字体大小×rem
    font-style：倾斜
    font-weight：粗细
    值说明
    normal默认标准的正常粗细
    bold粗体
    bolder更粗的字体
    lighter更细的字体
    100、200、300、400、500、600、700、800、900定义由细到粗的字体，400等同于normal,700等同于bold，最大900
    font属性

    • 字体属性的顺序：字体风格 → 字体粗细 → 字体大小 → 字体类型

    • font-size大小和font-family类型必须存在

      font:italic bold 20px "宋体";

      • 1

    文本样式

    属性含义举例
    color设置文本颜色color:#00C;
    text-align设置元素水平对齐方式text-align:right;
    text-indent设置首行文本的缩进text-indent:20px;
    line-height设置文本的行高line-height:25px;
    text-decoration设置文本的装饰text-decoration:underline;
    文本颜色color

    • RGB:十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量

      rgb(r,g,b)：正常数的取值为0~255

    • RGBA：在RGB基础上增加alpha透明度的参数，其中这个透明通道值为0~1

    • 16进制 #000 黑 #eee 灰 #fff 白

    • 颜色英文单词 red、blue、green

    排版文本段落
    text-align：文本左右中
    text-indent:首行缩进：em或者px
    line-height:行高px
    值说明
    left把文本排列到左边。默认值：由浏览器决定
    right把文本排列到右边
    center把文本排列到中间
    justify实现两端对齐文本效果

    在这里插入图片描述

    


	
    设置行高  一般行高和容器高度一致
    


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述

    文本修饰和垂直对齐
    text-decoration文本装饰:
    值说明
    none默认值，定义的标准文本
    underline设置文本的下划线
    overline设置文本的上划线
    line-through设置文本的删除线
    vertical-align垂直对齐方式:

    • 值：middle、top、bottom

      文字与图片高度的中间对齐，属性加在img里面

      文本阴影
      text-shadow : color  x-offset  y-offset  blur-radius;

text-shadow:black 1px 1px 2px;

      • 1
      • 2
      • 3
      • color：阴影颜色
      • x-offset：x轴位移，用来指定阴影水平位移量
      • y-offset：y轴位移，用来指定阴影垂直位移量
      • blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围

    超链接伪类

    伪类名称含义示例
    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】

    a:link{
	color:blue;
}
a:hover{
	color:red;
}
a:active{
	color:green;
}
a:visited{
	color:black;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    列表样式×

    • list-style-type
    • list-style-image
    • list-style-position
    • l**ist-style:**一般都会把列表前面的圆心去掉
    值说明语法示例
    none无标记符号list-style-type:none;
    disc实心圆，默认类型list-style-type:disc;
    circle空心圆list-style-type:circle;
    square实心正方形**list-style-type:square; **
    decimal数字list-style-type:decimal;

    网页背景

    • 背景颜色：background-color
    • 背景图片：background-image
    background-image:url(图片路径);

    • 1

    • 背景重复方式：background-repeat:repeat；沿水平或者垂直方向平铺

      ​ background-repeat:no-repeat；不平铺，即只显示一次

      repeat-x：只沿水平方向平铺

      repeat-y：只沿垂直方向平铺

    • 背景定位：background-position

    值含义
    Xpos Ypos**单位：**px， Xpos表示水平位置，Ypos表示垂直位置
    X% Y%使用百分比表示背景的位置
    X、Y方向关键词水平方向的关键词：left、center、right ;垂直方向的关键词： top、center、bottom

    • 背景尺寸background-size：X Y 100% 100%

      <style>
div{
    width: 100px;
    height: 100px;
    background-image: url(img/wallpaper.jpg);
    background-size: cover;
  背景图片大小用cover的话，如果图片过大，将会裁剪只显示部分图片，
  可以使用100%这样图片会显示完整，但会变形
}
style>
<body>
    <div>111div>
body>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13

    【看背景发生的变化】

    在这里插入图片描述在这里插入图片描述

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

    CSS渐变

    线性渐变

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

    background:linear-gradient ( position,color1,color2,…)
							渐变方向   两种颜色
background:-webkit-linear-gradient(#E6F2FA,#C0E0F7,#E6F2FA);
                                  两边颜色浅，中间颜色深


    • 1
    • 2
    • 3
    • 4
    • 5
    径向渐变

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

    浏览器渐变兼容性（前缀）

    • IE浏览器是Trident内核，加前缀：-ms-
    • Chrome浏览器是Webkit内核，加前缀：-webkit-
    • Safari浏览器是Webkit内核，加前缀：-webkit-
    • Opera浏览器是Blink内核，加前缀：-o-
    • Firefox浏览器是Mozilla内核，加前缀：-moz-
  • 相关阅读:
    《canvas》之第8章 像素操作
    基于x86架构的CentOS7虚拟机通过qemu安装ARM架构OpenEuler虚拟机
    树状数组维护权值线段树
    Webmin -- Filesystem Backup模块
    面试经典刷题）挑战一周刷完150道-Python版本-第2天（22个题）
    【目标检测】Generalized Focal Loss V1
    MobileNet系列(5):使用pytorch搭建MobileNetV3并基于迁移学习训练
    zabbix监控windows进程
    SpringCloud无介绍快使用，nacos注册中心的基本使用（十八）
    LeetCode HOT 100 —— 4.寻找两个正序数组的中位数
  • 原文地址：https://blog.csdn.net/m0_70083523/article/details/127766136