欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS基础学习-简单的CSS语句

程序员文章站 2024-01-26 15:09:22
...

文章目录

CSS第二课

简单的css语句

用处 语法 注意
设置字体大小 font-size 添加的内容和买衣服大小一样，xl大于l，大于s，也可以使用数值设置字体大小，选择需要的单位
字体是否加粗 font-weight 添加内容为bold加粗，bolder（比加粗稍微粗一点）lighter（比加粗细一点）或者加粗数值，为有几个选项可供选择
字体是否倾斜 font-style 如果是添加italic
设置字符字体 font-family 需要用什么字体就添加什么字体就行了，如果字体为多个单词拼写，需要单引号括起来，可以直接写中文字体名字，可以添加多个，按照就近原则
小型大写字母 font-variant 把小写的字母转换成大写字母，但是个头不变，如果存在小写字母。后面加入small-caps就可以
设置文本缩进 text-indent 添加缩进字符，一般设置首行缩进两个字符2em
设置文本对齐 text-align center居中对齐\left左对齐\right右对齐\justy两端对齐
设置行间距 text-align 可以添加数值，最好是用em形式的，em和word里面的倍数一样，比如1.5em就是1.5倍行间距
修饰文本 text-decoration 可以给文本增加线条，overline上划线，underline下划线，line-through删除线。还可以设置样式和颜色，去掉超链接的下划线需要加none
大小写转换 text-transform capitalize首字母大写，lowercase字母小写，uppercase字母大写
修改颜色 color 后面可以直接添加颜色的英文名称，还可以使用RGB形式，或者16进制的形式
字符间距 letter-spacing 添加数值即可
英文单词间距 word-spacing 添加数值即可，只对英文单词才有用
设置文字方向 direction ltr默认。文本方向从左到右，rtl文本方向从右到左。
添加背景，对body进行添加 background-color 添加需要添加的颜色即可
添加背景图片 background-image:url（图片地址） 图片地址中加入自己的图片地址即可
背景图片平铺 background-repeat repeat水平和垂直都平铺， repeat-x水平方向平铺，repeat-y垂直方向平铺，no-repeat不平铺
背景图片位置 background-position center居中平铺\left左平铺\right右平铺\right top右上角\right bottom右下角\left top左上角\left bottom左下角，也可以使用数值的方式，相对方式50% 50%代表位于宽百分之50的与长百分之50的地方，60px 30px代表宽60px与长30px的地方
设置背景图片大小 background-size 100% 100%代表水平100%垂直100%，contain代表不失真的情况下占比最大，cover也是最大，只不过不管失真不失真
背景图片静止 background-attachment: fixed; 这样的话，就不会随着齿轮滑动而动，会固定

实例代码应用

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <style>
    body{
        background-color:#cccccc;
    }
    h1{
        color: white;
        font-weight:lighter;
        background-color: red;
    }
    .c0{
        color: white;   
        font-family:楷体;     
        font-style:italic;
        direction:rtl;

}   
    .c1{
        color: red;
        font-size:24px;
        font-weight: 500;
        font-family: 宋体;
        font-weight:bold;
    }
</style> 
 </head> 
 <body> 
  <h1>日 志</h1> 
  <hr /> 
  <p class="c0">分类：心情点滴</p> 
  <p class="c1">女性的美丽</p> 摘要：魅力女性是美丽的.她使世界变得温馨,使世界永远保持青春和活力,使世界永远充满迷人和浪漫。魅力是什么?字典上的解释是，能吸引人的力量.常听有人这么评价某个女人：她不漂亮，可她很有魅力.魅力是一种深层次的美，比一切外在的美都更富有生命力，让人一见难以忘怀....... 查看全文 
  <br />
  <br /> 
  <p class="c2">2007.3.8 13:27 作者：诗香雅韵 引用:6 | <a style="text-decoration:none" href="http://www.baidu.com">收藏</a> | 评论：56 </p> 
  <p class="c0">分类：情感驿站</p> 
  <p class="c1">情感解析：写给三十左右男人的一些密语</p> 摘要：一、不放弃理想，不放弃梦想。有梦的生活，才会有颜色；二、有一套*的西服，或者一只经典的手表，或者有一个奢华的打火机，或者。总之，有一个可以传给自己孩子的并值得讲述历史的东西；三、重新甄选自己的朋友。留一两个知己，用一生去维护;四、三十岁。知道很多的细节。包括穿西服的时候... 查看全文 
  <br />
  <br /> 
  <p class="c2">2011.11.9 00:17 作者：诗香雅韵 引用:0 | <a style="text-decoration:none" href="http://www.baidu.com">收藏</a> | 评论：1</p> 
  <p class="c0">分类：精品赏析</p> 
  <p class="c1">美丽如画!世界海洋摄影佳作揭晓(组图) </p> 摘要：据国外媒体报道，近日世界优秀海洋摄影照片揭晓，从中我们可以欣赏到美丽的海洋景色、认识许多奇特的海洋生物，此外摄影师精湛的摄影技术也令人赞叹。以下就是2010年海洋摄影优秀作品。摄影师评价：“在晚上，小巴哈马海岸的斑点海豚会潜入深海寻找乌贼... 查看全文 
  <p class="c2"> 2011.10.28 23:53 作者：诗香雅韵 引用:1 | <a style="text-decoration:none" href="http://www.baidu.com">收藏</a> | 评论：1 </p>  
 </body>
</html>

效果图

CSS基础学习-简单的CSS语句

如若有和我一样的初学者，不懂的可以在评论区评论出来，我们一起解决！

相关标签： 笔记 CSS

上一篇： Docker教程（八）——本地镜像发布到阿里云

下一篇： css 弹性盒整理笔记

推荐阅读