断更了两周了，因为纠结之后在学java啦，但是还是要把学过的前端知识更完

以下的一些文本属性是CSS最常用的属性：

【长度单位】：px(像素)
【颜色单位】：
　　十六进制：#ffffff 分别对应红绿蓝的比例；最常用
　　颜色名称：red
　　rgb颜色：rgb（255,255,255）
【尺度属性】：
　　width、min-width、max-width
　　height、min-height、max-width
【文本属性】：
　　1、字体字号型：
　　font-weight：字体粗细 ；bold加粗、lighter细体、100-900数值（其中400为正常，700=bold）
　　font-size：字体大小 **px、**%（浏览器默认字体大小的百分比，绝大部分默认16px）
　　font-family：字体族，设置字体。
　　多个字体样式之间用逗号分隔，浏览器解析时，从左往右依次解析，直到选择到可用字体；
　　一般前面使用具体名称，最后一个使用字体族类名称（常用字体族类：衬线体serif、非衬线体sans-serif[常用]、等宽体Monospace）
　　例如：font-family=Arial,'Microsoft Yahei',sans-serif;
　　font-style：字体样式
　　（了解）font缩写形式：font-style font-variant font-weight font-size/line-height font-family
　　》》使用注意事项：顺序必须严格按照上述顺序；多个样式之间用空格个分隔，而且font-size/line-height必须作为一对 用/分隔；

　　　　font-size和font-family必须指定，其他样式不指定将采用默认样式显示
　　》》例如：font: italic bold 75%/1.8 "microsoft yahei",sans-serif;
　　　　　　　　　　倾斜 加粗 字号/行高 字体族（微软雅黑，非衬线字体族）
　　2、字体颜色：
　　　　color
　　　　opacity：透明度 css3的新属性；调整时，控件及子空间均透明，而用 rgba调整时，只会使本控件透明，子空间不发生变化
　　3、行距、对齐等：
　　　　line-height：行高 写法：像素单位48px；不带px 正常行高的倍数；百分数
　　　　》》典型应用，调整空间中，文字垂直居中的方式：控件的heijht=控件的line-height
　　　　text-align：块级元素中，文字的水平对齐方式
　　　　letter-spacing：字符之间的距离
　　　　text-decoration：文本修饰 下划线underline;删除线line-through;上划线overline；none
　　　　overflow：控制超出范围文本的显示方式
　　　　　　　　auto 根据文字多少自动显示滚动条
　　　　　　　　scroll 显示滚动条
　　　　　　　　hidden 隐藏超出范围的部分
　　　　text-overflow：设置多于文字的显示方式
　　　　　　　　clip 裁剪；
　　　　　　　　ellipsis 省略号显示
　　　　【重点】让每行多余文字显示省略号：
　　　　　　　　white-space: nowrap; 如果是中文，需设置行末不断行
　　　　　　　　overflow: hidden; 设置超出控件范围隐藏
　　　　　　　　text-overflow: ellipsis; 设置多余文本省略号显示
　　　　white-space: nowrap; 设置中文不换行，显示滚动条
　　　　word-break:设置英文行末断行显示 break-all按字母断行；break-word按单词（空格）断行
　　　　text-shadow：文本阴影，有四个属性值：水平阴影距离；垂直阴影距离；阴影模糊距离；阴影颜色
　　　　　　　　　　例：text-shadow: 4px 4px 3px red;
　　　　text-indent：首行缩进，其他行正常，可用像素值调整缩进大小
　　　　text-stroke：描边 例如：-webkit-text-stroke: 1px blue;

 <style type="text/css">

             .div1{

                 width: 100px;

                 height: 50px;

                 background-color: rgb(0,255,0);

                 /*font: italic bold 75%/1.8 "microsoft yahei",sans-serif;*/

                 font-weight: normal;    /*字体粗细正常*/

                 font-size: 18px;

                 font-family: "微软雅黑",sans-serif;

                 line-height: 50px;    /*行高*/

                 font-style: italic;

                 opacity: 0.5;   /*整个div都透明，包括背景和字体等*/

                 white-space: nowrap;

                 overflow: hidden;

                 text-overflow: ellipsis;

             }

             .div2{

                 width: 200px;

                 height: 150px;

                 color: orange;

                 font-size: 35px;

                 font-weight: bold;

                 background-color: rgba(0,255,0,0.5);

                 /*只是背景色,即只改变要求改变的颜色和透明度*/

                 line-height: 150px;

                 letter-spacing: 10px;

                 text-align: center;

                 /*text-decoration: underline;*/

                 text-decoration: line-through;

                 text-shadow: 5px 5px 3px red;

                 /*字体阴影*/

                 text-indent: 40px;

                 /*字体首行缩进40px*/

                 -webkit-text-stroke: 1px blue;

                 /*字体描边*/

                 overflow: auto;

                 /*超出字体的显示形式：自动*/

                 white-space: nowrap;

                 /*不换行*/

             }

         </style>

     </head>

     <body>

         <div class="div1">

             我是第一港口股好了回家了给你明显

         </div>

         <div class="div2">

             我是第二个人哦

         </div>

     </body>

CSS常用属性还有背景，关于背景比较多，下一篇专门单独写一篇详细讲背景的内容

CSS样式表之常用文本属性的更多相关文章

  1. CSS样式有哪些常用的属性？

    一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border CSS样式有哪些常 ...

  2. css样式表中四种属性选择器

    学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...

  3. css常用文本属性

    [CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal, ...

  4. 【3-24】css样式表分类、选择器、样式属性

    一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> ...

  5. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

  6. div+css样式表的id,class的常用命名规则

    div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...

  7. css样式表及属性

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  8. 一个DOM元素同时拥有多个类名时的样式产生冲突时 属性取决于css样式表中后读取到的属性

    如果一个DOM元素包含多个类名,其中的两个类名的属性产生冲突,并不是根据htnl中类名的顺序来决定DOM元素的属性, 而是根据css样式中的顺序来决定DOM元素的属性,它取决于css样式表中后读取到的 ...

  9. 8.20 css样式表：样式分类，选择器。样式属性，

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

随机推荐

  1. 9、JcomboBox下拉框事件监听

    9.JcomboBox下拉框事件监听 JComboBox()的事件监听类ItemListener.其范例代码如下: import java.awt.*; import java.awt.event.* ...

  2. Java基础知识二次学习--第七章 容器

    第七章 容器   时间:2017年4月27日15:08:30 章节:07章01节~07章04节 视频长度:20:21 +12:38 +3:55 +2:57 内容:容器API 心得: Java API ...

  3. 省市联动_简单的Demo，适用于各种二级菜单联动

    最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...

  4. Java生成二维码--QRGen

    最近公司需求需要生成一个二维码 , 由于之前没有接触过 , 故此做个记录 . 在网上找到了不少二维码生成工具,都蛮好用的. 不过要集成二维码生成功能到应用开发中,就要选择最好用成熟的库了,最终决定采用 ...

  5. React+ajax+java 上传图片并预览

    之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图 ...

  6. XInput和DirectInput

    原文链接:https://msdn.microsoft.com/en-us/library/windows/desktop/ee417014(v=vs.85).aspx XInput是一个允许应用从W ...

  7. zabbix server安装详解

    简介 zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以 ...

  8. gradle windows 环境变量

    我的电脑 ->  高级环境变量 GRADLE_HOME    D:\soft\gradle-3.5 path %GRADLE_HOME%\bin

  9. sqlserver使用job删除过期备份文件

    享下链接:http://blog.csdn.net/xieyufei/article/details/33770067(注意这里主要说明怎么设置删除过期备份文件) 先说下sqlserver使用job删 ...

  10. 转自52 梦回凉亭的她 Java常见问题，面试题

    收集整理分享# 相关概念## 面向对象的三个特征封装,继承,多态.这个应该是人人皆知.有时候也会加上抽象.## 多态的好处允许不同类对象对同一消息做出响应,即同一消息可以根据发送对象的不同而采用多种不 ...