- 一般加给行内块元素
- indent 首行缩进 后面跟单位 正值为首行缩进 负值为首行悬挂
- 例:text-indet:20px;
- text-decoration:** 文本修饰
- underline 下划线
- line-through 中划线
- overline 上划线
- none 文本无修饰 可以删除下划线
- 例:
- 行内样式
- 在html中,使用<style>行内样式
- <div style="color:red">***</div>
- 英文大小写的转换
- text-transform:**
- uppercase 全大写
- lowercase 全小写
- capitalize 单词首字母大写
- 例:
- 英文文本
- 字母与字母之间的距离 汉字与汉字之间的距离 可以有负值
- letter-spacing:**px
- 例:
- 单词与单词之间的距离
- word-spacing:**px;
- 例:
-
- 单行省略标记
- <nobr></nobr> 不换行平时不用
- white-space: nowrap; 不换行
- overflow:visible;溢出部分可见
- overflow:hidden;溢出部分隐藏
- overflow:scroll ;显示滚动条
- overflow:auto;浏览器自动处理有没有滚动条
- text-overflow:ellipsis; 文本溢出显示省略标记
- 例:
- 文本多行显示再省略
- .p { overflow : hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;}
- 内嵌式
- 把style放在head中 是为了打开网页可以优先加载
- <style>
- ***{ ** } ***给元素名称的命名 后续使用可以直接引用命名 **元素
- </style>
- 例:
- <style type="text/css" > html载入的文本/css层叠样式表
- div{ bockground-color:gray;
- width: 31.25rem;
- height: 37.5rem; }
- div{ bockground-color:gray;
- </style>
- <style type="text/css" > html载入的文本/css层叠样式表
- 链接样式(外链式)
- 将css写入单独的一个文件中
- link 关系 现指链接
- stylesheet 样式表
- 在另一个html中引入css样式
- 例:
- <link rel="stylesheet" href="#"> # css样式的打开方式
-
- link标签的作用就是引入外部文件,通过fref属性,属性值是文件地址
- rel属性的值如果是"stylesheet" ,代表的就是引入样式表
- 通过引入css文件到html文件中,从而实现样式的加载
- css文件不需要写任何标签 只需要写css选择器和代码 因为css文件内部是不允许书写html骨架的
- 行内元素优先级是最高的
- 内嵌式外链式谁离boby标签近谁的优先级高
- 一般顺序:行内,内嵌,外链
- 导入式
- @import "css文件路径";
-
- 导入式必须书写在style标签的最顶部
- 四种样式的权重和区别以及优缺点
-
-
-