JAVA前端————CSS—文本样式—超链接伪类—列表—背景渐变

美化网页

span标签——重要的字用span标签标出
 span{
            font-size: large;
            font-weight: bold;
            color: blueviolet;
        }
    style>
head>
<body>
属性定义及使用说明
<br>
<span>margin-right属性span>设置元素的右边距。

文本样式

  • 颜色
  1. color
  2. rgb(255,0,0):red green bule三色混合选择
  3. rgba (125,0,0,0.3):red green bule三色混合 a: 透明度 0~1之间
  • 文本对齐方式
  1. text-align :center ——居中对齐
  2. text-align :left ——靠左对齐
  3. text-align :right——靠右对齐
  • 首行缩进

text-indent:2em

  • 行高

line-weight: 20px

  • 文本装饰(下划线加粗等)

text-decoration:none

  • 文本图片水平对齐

vertical-align:miidle ——居中对齐

  • 阴影

text-shadow: 阴影颜色 水平偏移(正—偏右 负—偏左)垂直偏移(正—偏下 负—偏上)阴影半径

<style>
        h1{
             color: rgba(50,50,50,0.6);
            text-align: center;
             text-shadow: darkgrey 5px -5px 2px;
        }
        p{
            text-indent: 2em;
        }
        .p1{
            background: pink;
            height: 100px;
            line-height: 50px;
        }
        .p2{
            text-decoration: underline;
        }
        .p3{
            text-decoration: line-through;
        }
        .p4 {
            text-decoration: overline;
        }
        a{
            text-decoration: none;
            color: green;
        }
        img{
            vertical-align: middle;
        }
    style>
head>
<body>
<h1>CSS简介h1>
<p class="p1">
    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)
    或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配
    合各种脚本语言动态地对网页各元素进行格式化。
p>
<p class="p2">
    CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,
    拥有对网页对象和模型样式编辑的能力。
p>
<p class="p3">
    1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。
p>
<p class="p4">
    从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用
    户提供页面效果的控制。最初的HTML只包含很少的显示属性。
p>
<p class="p5">
    随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,
    HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。
p>
<a href="https://baike.baidu.com/item/CSS/5457?fr=aladdin">CSS百度百科a>
<img src="9e3df8dcd100baa1d0fded644f10b912c9fc2e1f.jpg" alt="CSS">

超链接伪类

  • a{ } a:hover{ } ———— 鼠标悬浮状态
 a{
            text-decoration: none;
            color: green;
   }
 a:hover{   
            color: orange;
            font-size: large;
   }

列表

list-style 参数如下

  1. none 去掉原点
  2. circle 空心圆
  3. decimal 数字
  4. square 正方形
 ul{
            background: gainsboro;
        }
        ul li{
            height: 30px;
            list-style: square;
            text-indent:2em;
        }
    style>
head>
<body>
<ul>
    <li>胡一菲li>
    <li>诸葛大力li>
    <li>张伟li>
    <li>咖喱酱li>
    <li>赵海棠li>
    <li>吕子乔li>
    <li>陈美嘉li>

背景+渐变

背景
  • 格式:background-repeat 参数如下
  • repeat:背景图像将向垂直和水平方向重复————默认
  • repeat-x:只有水平位置会重复背景图像
  • repeat-y:只有垂直位置会重复背景图像
  • no-repeat:不会重复
渐变
  • 格式:background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)

linear-gradient()————创建一个线性渐变的 “图像”(从上到下)
radial-gradient()————用径向渐变创建 “图像”。 (center to edges)

  p{
            background-image:linear-gradient(115deg, #ff150e 20%, #01800b 40%, #061097 80%);
            height: 739px;
            width: 985px;
        }
        span{
            font-size: large;
            font-weight: bold;
            color: blueviolet;
        }
    style>
head>
<body>
<p><span>margin-right属性span>设置元素的右边距。p>

你可能感兴趣的:(JAVA前端————CSS—文本样式—超链接伪类—列表—背景渐变)