html css学习笔记-背景与文字

最新推荐文章于 2021-07-23 21:15:30 发布

绿叶清风

最新推荐文章于 2021-07-23 21:15:30 发布

阅读量732

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/PZ0605/article/details/45750653

版权

html/css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{background-color: greenyellow;background-image: url("aa.img");}
        p{background-color:yellow;padding: 10px; }/*padding可以加宽*/
    </style>
</head>
<body>
<!--
css3允许应用纯色作为背景，也允许使用背景图片做为背景
background-image:url();
background-position:设置背景图片的起始位置
   right:代表right（当前图片所在视图的位置）和center（图片显示的位置）
   right top:右上显示
   right left:
   center center:
   100px 100px:
background-repeat:设置图片是否可以重复 （默认允许重复）
   no-repeat:不允许重复
   repeat-x:x重复
   repeat-y:y重复
backgroud-attachment:设置背景图片是否滚动
backgroud-size:规定背景图片的尺寸
backgroud-origin:规定背景图片的定位区域
backgroud-clip：规定背景的绘制区域

-->
   <p>测试一下背景是否可以继承(不能继承)</p>
<!--
 css文本：
 color:文本颜色 （具有继承性，如在父节点中设置了颜色，会影响子节颜色）
 direction:文本方向
 line-height:
 letter-spacing 字符间距
 text-align:对齐元素中的文本
 text-decoration:向文本添加修饰
 text-indent：缩进元素中文本的首行
 text-transform:元素中的字母
 unicode-bidi:设置文本方向
 white-space:元素中空白的处理方式
 word-spacing:字间距
-->
  <p style="color:red;text-align: right;">hello word!</p>
  <div>
      <h6 style="text-indent: 2em;">静思</h6><!--首行缩进（也可以按百分比缩进）-->
      <p>床前明月光</p>
      <p>床前明月光</p>
      <p>床前明月光</p>
      <p>床前明月光</p>
  </div>
  <!--text-transform lowercase:所有单词首字母大小  uppercase:全部大写-->
 <p style="text-transform:lowercase ;">this is  my web page</p>
 <p style="text-transform: uppercase;">this is  my web page</p>
  <!--设置文字背景效果： text-shadow:距左位置， 距上方位置，清晰度，背景-->
  <p style="text-shadow: 5px 4px 5px #FF0000;">text-shadow:距左位置， 距上方位置，清晰度，背景</p>
  <!--自动换行:text-wrap-->
  <p style="text-wrap: normal;width: 60px;">床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光</p>
</body>

绿叶清风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html css学习笔记-背景与文字

body{background-color: greenyellow;background-image: url("aa.img");} p{background-color:yellow;padding: 10px; }/*padding可以加宽*/ <!--css3允许应用纯色作为背景，也允许使用背景图片做为背景background-image:url();
复制链接

扫一扫

专栏目录