CSS基础知识1

最新推荐文章于 2024-05-21 21:13:29 发布

中小庸

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量45

点赞数

分类专栏： Web 文章标签： css css3 web html

本文链接：https://blog.csdn.net/qq_49556725/article/details/118530911

版权

Web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS 层叠样式表

HTML表达结构,CSS表达样式
样式和内容/结构是分离的
CSS :
- 背景
- 段落

<!DOCTYPE html>
<!--DOCTYPE 是指定当前的html的版本，这里默认指定的是html5-->
<html>
<!--这里是html文件中的框架，将html文件括起来-->
<head>
  <meta charset="utf-8">
  <style>
    p {background-color: #b3d4fc}
    <!--在首部给出样式-->
  </style>
</head>



<body style="background-color: #bdcaff">
<!--设置全局的背景颜色-->
<p style="background-image: url(tile.png); background-repeat:no-repeat;
background-position:top right; background-attachment: fixed">

<!--指定参数,背景的样式，是否重复啥的
position : 位置信息 有top right left "100px 100px"这些选项
repeat : 是否重复
background-attachment : 是否随着文字滚动
-->
  中文异常
  <br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>

<!--
<p style = "background : 直接跟上参数，但是一定要按照一定的顺序给出">
-->
<p style="background-color: coral">
  <!--内嵌式样式展示-->
  <!--颜色 : transparent 透明
  rgb 颜色 #FF00FF or rgb(255,255,0)
  or rgba(,,,0到1之间的浮点数) 在rgb的基础上加上透明度-->
  橙色的背景
  我的第一个HTML文件
</p>

<p style="color: red;">
  <!--文字的颜色-->
  嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！
  <br>
</p>
<p style="text-indent: -2em;
padding: 2em; line-height: 2;
text-align: right; word-spacing: 30px;
letter-spacing: 10px; text-transform: lowercase;
text-decoration: underline overline; white-space: normal;
direction: ltr">
  <!--text-indent : 缩进的em(相对大小的值)/cm/dm/mm/px/pt数
      % : 缩进整个页面的宽度
      也可以是负值，就是向前再缩进，第一个字被吞掉
  -->
  <!--paddingpadding : 向后推多少个字符-->
  <!--line-height : 2em/normal 当前字体尺寸的倍数-->
  <!--text-align : 对齐方式 right left center justify两端对齐-->
  <!--word-spacing : 对中文无用，对英文有用，用空格分割的东西-->
  <!--letter-spacing : 字中间的空格-->
  <!--text-transform : 字体大小写调整 capitalize 单词首字母大小-->
  <!--text-decoration : 对文字进行装饰，例如下划线underline 上划线overline 中间线through-line -->
  <!--white-space : normal多个看成一个 pre有回车则有回车，有空格也有空格，无卷绕 pre-wrap 又有空格又有卷绕
                    pre-line : 又有空格又有换行
  -->
  <!--文字书写的方向 ltr : left to right-->
  勃，三尺微命，一介书生。无路请缨，等终军之弱冠；
  <br>
  有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？
</p>

</body>

</html>

显示效果：
在这里插入图片描述

中小庸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础知识1

CSS 层叠样式表HTML表达结构,CSS表达样式样式和内容/结构是分离的CSS :背景段落<!DOCTYPE html><html><head> <meta charset="utf-8"> <style> p {backgroun.
复制链接

扫一扫