CSS样式表之常用文本属性
断更了两周了，因为纠结之后在学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样式表之常用文本属性的更多相关文章
- CSS样式有哪些常用的属性？
一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border CSS样式有哪些常 ...
- css样式表中四种属性选择器
学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...
- css常用文本属性
[CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal, ...
- 【3-24】css样式表分类、选择器、样式属性
一.css样式表分类: (一)内联样式表:代码写在标签内的样式表 控制精确 代码重用性差 优先级最高 格式:<p style="样式属性">内容</p> ...
- css样式表和选择器的优先级以及position元素属性值的区别
css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...
- div+css样式表的id,class的常用命名规则
div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...
- css样式表及属性
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- 一个DOM元素同时拥有多个类名时的样式产生冲突时 属性取决于css样式表中后读取到的属性
如果一个DOM元素包含多个类名,其中的两个类名的属性产生冲突,并不是根据htnl中类名的顺序来决定DOM元素的属性, 而是根据css样式中的顺序来决定DOM元素的属性,它取决于css样式表中后读取到的 ...
- 8.20 css样式表：样式分类，选择器。样式属性，
样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...
随机推荐
- Struts2入门(一)
今天学习Struts2首先struts是一个成熟的框架.Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Cont ...
- mybatis xml配置文件要点说明
mapper映射方式: 1 一一具体列举的方式 2扫描package 如: <mappers> <!-- 告知映射文件方式1,一个一个的配置 <mapper resource= ...
- 对 Servlet 的改进--------Struts2 引入
通过上一篇博客:Servlet 的详解 http://www.cnblogs.com/ysocean/p/6912191.html,我们大致知道了 Servlet 的基本用法.但是稍微分析一下 Ser ...
- 阿里云 Centos7.3安装mysql5.7.18 rpm安装
卸载MariaDB CentOS7默认安装MariaDB而不是MySQL,而且yum服务器上也移除了MySQL相关的软件包.因为MariaDB和MySQL可能会冲突,故先卸载MariaDB. 1.安装 ...
- GPU编程--kernels（2）
"如何区分不同的数据单位单位呢?" "如何确定程序是在CPU端执行,还是GPU端执行呢?" "如何确定要调用的GPU线程数呢?" 下面举一个 ...
- Vue单文件组件基础模板
背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...
- ZooKeeper数据模型
ZooKeeper有一个分层的命名空间,类似分布式文件系统.它们唯一的区别就在于在命名空间中每个节点可以有数据关联作为它们的子节点.这就像有一个文件系统允许文件也作为文件目录.节点路径通常表示为规范的 ...
- Web压力测试软件webbench
官方网站:http://home.tiscali.cz/~cz210552/webbench.html下载地址:http://home.tiscali.cz/~cz210552/distfiles/w ...
- 日常踩坑 searter
目录 es7中的async, await Django生成二维码并转为base64 Django配置404页面 很傻逼的坑 no module named pil 其他 es7中的async, awa ...
- 用excel公式生成有规律的代码，减少编程工作量
1.在excel中如何输入公式 在excel表格中输入 & 符号是字符串的连接符,比如: 在excel表格中输入 ="sherlock"&"mina&q ...