CSS 背景+CSS文本样式

CSS背景

background-image:url(图片路径; 插入背景图(如果背景图不足以覆盖整元 素,是自己重复,以至于铺满整个元素)
background-repeat:no-repeat; 背景图不重复
background-repeat:repeat-x; 水平重复
background-repeat:repeat-y; 垂直重复
background-position:水平位置 垂直位置;
水平:left center right
垂直:top center bottom
这是水平和垂直方向的三个位置,当然,位置也可以写像素
background-size: 宽 高; 设置背景图大小

CSS文本样式

font-family:" "; 改变文字字体 ,中文字用引号 一般默认是微软雅黑,也可以百度搜索web安全字体
font-size: ; 改变文字大小
font-weight: bold;文字加粗
font-style:italic; 字体倾斜
text-shadow:h-shadow v-shadow blur color;
h-shadow: 设置水平阴影的位置,允许负值
v-shadow: 设置垂直阴影的位置,允许负值
blur: 设置模糊的距离
color:设置阴影的颜色
text-decoration:underline; 加下划线
text-decoration:line-through;删除线
——————————————————————
练习代码如下:

<p>建立一个宽度300px高度300px的div,内部含有一个h1标签和一个无序列p>
<p>给div红色的背景色   背景图 使其不重复  位置水平垂直都居中p>
<p>给h1标签设置字号50px,黑体 倾斜 水平居中 加文字阴影 加下划线 p>
<P>给无序列表的列表符号清除改成图片并改变位置在li内部P>
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">meta>
        <title>小练习title>
        <style>
            div{
                background-color: red;
                width: 300px;
                height: 300px;
                background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fad%2Fd1%2F1d%2Fadd11d981e4d91bda0ce7091f53e33df.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651391286&t=a0d5428b20733c8aadbf160156806127) ;
                background-size: 230px 230px;
                background-repeat: no-repeat; 
                background-position: center center;
            }
            h1{
                font-size: 50px;
                font-family: "黑体";
                font-style: italic;
                text-align: center;
                text-decoration: underline;
                text-shadow: 5px 5px 10px blue;
            }
            li{
                list-style-type: none;
                list-style-image:url(./img/1648800046\(1\).jpg);
                list-style-position: inside;
            }
        style>
    head>
    <body>
        <div>
            <h1>hello worldh1>
            <ul>
                <li>hello worldli>
                <li>hello worldli>
                <li>hello worldli>
            ul>
        div>
    body>
html>

————————————————————————————
今天就到这里吧

你可能感兴趣的:(html,前端,css)