【前端】CSS3学习笔记（二）——美化网页元素

更新时间:2023-04-03 21:37:39 阅读：评论：0

课程链接

【狂神说java】css3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

学习笔记

span标签

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title></head>    <style>        #title1{            font-size: 30px;            color: red;        }    </style><body>    普通内容<span id="title1">被凸显的内容</span></body></html>

字体样式

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title>    <!-- font-family 字体        font-size 字体大小        font-weight 字体粗细        color 字体颜色     -->    <style>        body{            font-family: "arial black","楷体";            color: gray;        }        h1{            font-size: 50px;            font-size: 2em;        }        .p1{         胎教故事   font-weight: bolder;            /* font-weight: lighter; */        }    </style></head><body><h1>css</h1><p class="p1">层叠样式表(英文全称：cascading style sheets)是一种用来表现html（标准通用标记语言的一个应用）或xml（标准通用标记语言的一个子集）等文件样式的计算机语言。</p><p>css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p><p>stray birds of summer come to my window to sing and fly away. and yellow leaves of autumn, which have no songs, flutter and fall there with a sigh.</p></body></html>

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title>    <!-- 字体风格 -->    <style>        p{            font:oblique lighter 30px "楷体";        }    </style></head><body>    <p>css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p></body></html>

文本样式

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>document</title>    <!-- 颜色：        单词        rgb 0~f             #000000            #ff0000 红            #00ff00 绿            #0000ff 蓝            #ffffff            rgb(0,255,255)        rgba            a 0~1    text-align: center 排版(文本居中)    text-indent: 2em; 段落首行缩进    行高 和 块 高度一致 单行文字上下居中    height: 100px;    line-height: 100px;    -->    <style>        h1{            /* color:#0000ff; */            color: rgba(0,255,255,0.5);            text-align: center;        }        .p1{            text-indent: 2em;        }        .p3{            background: cornsilk;            height: 100px;            line-height: 100px;        }        /* 下划线 */        .l1{            text-decoration: underline;        }        /* 中划线 */        .l2{            text-decoration: line-through;        }        /* 上划线 */        .l3{            text-decoration: overline;        }        /* 超链接去下划线 */        a{            text-decoration: none;        }        /* 文本图片水平对齐 */        img,span{            vertical-align: middle;        }    </style></head><body>    <a href="">去掉下划线</a>    <p class="l1">111</p>    <p class="l2">111</p>    <p class="l3">111</p>    <h1>css</h1>    <p class="p1">层叠样式表(英文全称：cascading style sheets)是一种用来表现html（标准通用标记语言的一个应用）或xml（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>    <p>css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>    <p class="p3">stray birds of summer come to my window to sing and fly away. and yellow leaves of autumn, which have no songs, flutter and fall there with a sigh.</p>    <br>    <hr>    <br>    <p>        <img src="images/demo.png" alt="">        <span>被居中的字体</span>    </p></body></html>

贵州旅游十大景点排名超链接伪类

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>document</title>    <style>        /* 默认颜色 */        a{            text-decoration: none;            color: black;        }                /* 选择所有未被访问的链接 */        a:link{            color: brown;        }        /* 选择所有已访问的链接 */        a:visited{            color: red;        }        /* 选择鼠标悬停其上的链接 （需要记住）*/        a:hover{            color: orange;            font-size: 20px;        }        /* 选择活动的链接 */        a:active{            color: green;        }        /* 水平阴影 垂直阴影 模糊的距离 阴影的颜色 */        #price{            text-shadow: 10px -5px 2px blue;        }    </style></head><body>    <a href="#">        <img src="images/demo.jpg" alt="">    </a>    <p>        <a href="#">码出高效：java开发手册</a>    </p>    <p>        <a href="">作者：孤尽</a>    </p>    <p id="price">        ￥99.00    </p></body></html>

列表

#nav{    width: 300px;    background: gray;}.title{    font-size: 20px;    font-weight: bold;    text-主观题indent: 1em;    line-height: 35px;    /*颜色 图片 图片位置 平铺方式*/    background: red url("../images/箭头-向下.png") 260px no-repeat;}/* list-stylenone 去掉原点circle 空心圆decimal 数字square 正方形 */ul{    background: gray;}ul li{    height: 30px;    list-style: none;    text-indent: 1em;    background-image: url("../images/箭头-向右.png");    background-repeat: no-repeat;    background-position: 220px 2px;}a{    text-decoration: none;    font-size: 14px;    color: black;}a:hover{    color: orange;    text-decoration: underline;}

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>document</title>    <link href="css/style洛克王国圣龙的心愿大电影.css" rel="stylesheet" type="text/css"/></head><body>    <div id="nav">        <h2 class="title">全部商品分类</h2>        <ul>            <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音响</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>            <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>            <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>            <li><a 战胜困难href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>            <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>            <li><a href="#">礼品鞋帽</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>            <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>            <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>        </ul>    </div></body></html>

背景

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>document</title>    <style>        div{            width: 1000px;            height: 700px;            border: 1px solid red;            /* 默认全部平铺 */            background-image: url("images/demo.png");        }        .div1{            background-repeat: repeat-x;        }        .div2{            background-repeat: repeat-y;        }        .div3{            background-repeat: no-repeat;        }    </style></head><body>    <div class="div1"></div>    <div class="div2"></div>    <div class="div3"></div></body></html>

渐变

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>document</title>    <!-- 径向渐变 圆形渐变 -->    <!-- /d/file/titlepic/ -->    <style>        body{            /*background-color: #4158d0;*/            /*background-image: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);*/            background-color: #0093e9;            background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);        }    </style></head><body>    </body></html>