常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏
文本:1.letter-spacing/*字间距*/2.word-spacing/*词间距*/3.text-decoration/*下划线*/4.text-align/*对齐*/5.text-indent/*缩进*/6.line-height/*行高*/7.color/*颜色*/8.word-break/*文本折行*/
字体:1.font-family/*字体类型*/2.font-size/*字体大小*/3.font-style/*字体样式*/4.font-weight/*字体粗细*/

*注意：font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

/*font字体的简写:font:style weight size/line-heigt font-family*/ /*要求必须出现的2个是 size font-family*/ 其次word-break: break-all;/*文本折行 自动换行，中文的会自动换行，单词ok，字母的不会，默认文本添加overflow: auto;word-break: break-all;*/

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>11种常用css样式之文本字体学习</title>

     <style type="text/css">

         div.box1{

         /*字体*/

         font-family:"Microsoft Yahei";/*字体类型 添加引号有无均正常展示，建议添加*/

         font-size:24px;/*字体大小*/

         font-style:italic;/*字体外观,斜体等同em*/

         font-weight:900;/*字体粗细 默认100-900，常用bold粗体等同值900 normal正常 lighter细体*/

         font:30px/1em "黑体";

         }

         /*font字体的简写:font:style weight size/line-heigt font-family*/ /*要求必须出现的2个是 size font-family*/

         font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

         /*文本*/

         div.box2{

         letter-spacing:1px;/*字间距*/

         word-spacing: -5px;/*词/字符间距*/

         text-decoration: line-through;

         /*下划线 underline overline line-through*/

         text-align:justify;/*对齐 left right center justify*/

         text-indent: 100px;/*缩进*/

         /* height: 40px;

         background-color: #ccc; */

         /*块级元素高度与行高一致，文本垂直居中展示*/

         line-height: 40px;

         color: rebeccapurple;/*颜色 16进制 rgb 单词*/

         /*恶意输入字母，系统不换行，出现滚动条， word-break: break-all*/

         overflow: auto;

         word-break: break-all;/*文本折行*/

         }

     </style>

 </head>

 <body>

     <div class="box1">

         愿星空不问赶路人，时光不负有心人“你的压力来源于：无法自律，只是假装很努力；现状跟不上内心的欲望；所以你焦虑又恐慌”

     </div>

     <div class="box">

 文本:1.letter-spacing/*字间距*/2.word-spacing/*词间距*/3.text-decoration/*下划线*/4.text-align/*对齐*/5.text-indent/*缩进*/6.line-height/*行高*/7.color/*颜色*/8.word-break/*文本折行*/

     </div>

     <div class="box2">

         https://www.cnblogs.com/dhnblog/May the starry sky not ask passers-by, time is worthy of the people who care about you "Your pressure comes from: you ca n’t discipline yourself, just pretend to work hard; the status quo can't keep up with your inner desires; so you are anxious and panic"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

     </div>

 </body>

 </html>

11种常用css样式之开篇文本字体学习的更多相关文章

  1. 11种常用css样式之鼠标、列表和尺寸样式学习

    鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...

  2. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  3. 11种常用css样式之表格和定位样式学习

    table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...

  4. 11种常用css样式之border学习

    边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-st ...

  5. 11种常用css样式之background学习

    background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的backgroun ...

  6. Day 31：CSS选择器、常用CSS样式、盒子模型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 获取jQuery对象的第N个DOM元素 && table常用css样式

    获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...

  8. 在线生成CSS样式和兼容的字体格式

    http://www.fontsquirrel.com/tools/webfont-generator 在线生成CSS样式和兼容的字体格式.

  9. 常用css样式(布局)

    兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项 ...

随机推荐

  1. 制作一个类“全能扫描王”的简易扫描软件(opencv)

    相信很多人手机里都装了个“扫描全能王”APP,平时可以用它来可以扫描一些证件.文本,确实很好用,第一次用的时候确实感觉功能很强大啊算法很牛逼啊.但是仔细一想,其实这些实现起来也是很简单的,我想了下,实 ...

  2. 【阿K学Python系列】一Python基础语法(二)

    前言 通过上一章的学习[阿k学Python]一Python入门(一),我们已经初步了解到Python是一种解释型.面向对象.动态数据类型的高级程序设计语言,当然也是一门脚本语言,像前端需要学习的Jav ...

  3. Day3-Python3基础-函数

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 1.函数的定义 定义: 函数是指将一组语句的集 ...

  4. 爬虫之协程，selenium

    1.什么是代理?代理和爬虫之间的关联是什么? 2.在requests的get和post方法常用的参数有哪些?分别有什么作用?(四个参数) - url headers parmas/data proxi ...

  5. ios---cocoapods 安装与使用 （AFNetworking为例）

    cocoapods 安装与使用 一.CocoaPods是什么? CocoaPods是一个用Ruby写的.负责管理iOS项目中第三方开源库的工具,CocoaPods能让我们集中的.统一管理第三方开源库, ...

  6. 笔记常用Linux命令(三) 查看服务器日志

    服务器日志 用于记录服务器的运行情况 查看服务器日志 tail:查看后面几行 n 显示行数 f 持续侦测后面的内容,查看服务器日志常用 查看最新的服务日志(静态) 命令格式:tail -n 行数 日志 ...

  7. 10个很多人不知道的Redis使用技巧

    前言 Redis 在当前的技术社区里是非常热门的.从来自 Antirez 一个小小的个人项目到成为内存数据存储行业的标准,Redis已经走过了很长的一段路.随之而来的一系列最佳实践,使得大多数人可以正 ...

  8. .Net Core初识以及启动配置

    .net程序员为什么要学习.net core .Net Core 是.Net的未来,微软在19年 5月已经明确说明,未来只有.Net 5(=.NET Core vNext),.Net 5是.net c ...

  9. NOIP2018PJ游记

    \(NOIP2018\)普及AFO记 178pt,2=,in ZJ_Hangzhou_学军中学 \(Day\) \(0\) 中午就请假回家打模板了 \(Day\) \(1\) \(A.M.8-12\) ...

  10. python中map()和dict()的用法

    map()用法 map()是python的内置函数,会根据提供的函数对指定序列做映射. 语法: map(func, iter, ...) 其中func为一个功能函数,iter表示可迭代参数序列.map ...