CSS基本语法(2)_html/css_WEB-ITnose-html教程-PHP中文网

this is a test of background !

首页

web前端

html教程

CSS基本语法(2)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:44 AM

CSS基本语法（2）

一、文本字体属性

1、文本属性：line-height，text-align，letter-spacing，text-decoration，white-space

2、字体属性：font，font-family，font-size，font-weight

 1 <html> 2    <head> 3        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 4        <style type = "text/css"> 5               li{ 6                  font: 15px 宋体; 7                  text-align: left; 8                  line-height: 28px; 9               }10               .title{11                  letter-spacing:5px;12                  white-space: nowrap;13                  text-decoration:underline;14               }15               .bigfont{16                  font-size:16px;17                  color:red;18               }19        </style>20    </head>21    <body>22        <div>23           <ul>24              <li class="title">CSS基本语法(2)</li>25              <li class="bigfont">坚持不懈，努力学习CSS基本语法，为成为css高手而奋斗！</li>26              <li>CSS的文本属性</li>27              <li class="bigfont">学习CSS的下一步，是要更努力的学习javascript！</li>28              <li>CSS的字体属性</li>29           </ul>30        </div>31    </body>32 </html>

登录后复制

二、背景属性

背景属性参数： background、background-color、background-img、background-repeat、background-position

1、background-repeat属性的取值：

repeat 横向纵向同时平铺，默认值

repeat-x 横向平铺

repeat-y 纵向平铺

no-repeat 背景图不重复平铺

2、background-position属性的取值

Xpos Ypos X表示水平方向 Y表示垂直方向（正值表示正向偏移，同时向下向左；负值表示反向偏移，同时向上向右）

X% Y% 使用百分比表示背景出现的位置（30% 50%垂直方向居中，水平方向偏移30%）

X方向关键词 Y方向关键词水平方向关键词left，center ，right 垂直方向关键词top，center，bottom

 1 <html> 2    <head> 3        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 4        <style type = "text/css"> 5               div{ 6                  background:url(img/test.jpg) no-repeat; 7                  background-position:-100px 0px; 8               } 9        </style>10    </head>11    <body>12        <div>13           <h3 id="this-is-a-test-of-background">this is a test of background !</h3>14           <h3 id="this-is-a-test-of-background">this is a test of background !</h3>15           <h3 id="this-is-a-test-of-background">this is a test of background !</h3>16           <h3 id="this-is-a-test-of-background">this is a test of background !</h3>17           <h3 id="this-is-a-test-of-background">this is a test of background !</h3>18           <h3 id="this-is-a-test-of-background">this is a test of background !</h3>19        </div>20    </body>21 </html>

登录后复制

三、列表常用属性

1、list-style 属性用于定义列表项的各类风格，list-style属性取值说明如下：

none 无修饰符

disc 实心圆

circle 空心圆

square 实心正方形

decimal 数字

2、float 属性用于定义元素的浮动方向。

 1 <html> 2    <head> 3        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 4        <style type = "text/css"> 5               li{ 6                  width:150px; 7                  color:red; 8                  font:28px; 9                  list-style:none;10                  float:right;11               }12        </style>13    </head>14    <body>15        <div>16           <ul>17              <li>铅笔</li>18              <li>钢笔</li>19              <li>水笔</li>20              <li>毛笔</li>21              <li>画笔</li>22           </ul>23        </div>24    </body>25 </html>

登录后复制

坚持每天进一步一点点，加油！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7333

Java教程

1627

CakePHP 教程

1351

Laravel 教程

1262

PHP教程

1209

显示更多

Related knowledge

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？ Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，