文字修饰与样式表

• 一般加给行内块元素

  

• 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; }
  • </style>
• 链接样式（外链式）
• 将css写入单独的一个文件中
• link 关系 现指链接
• stylesheet 样式表
• 在另一个html中引入css样式
• 例：
• <link rel="stylesheet" href="#"> # css样式的打开方式

• 

• link标签的作用就是引入外部文件，通过fref属性，属性值是文件地址
• rel属性的值如果是"stylesheet" ,代表的就是引入样式表
• 通过引入css文件到html文件中，从而实现样式的加载
• css文件不需要写任何标签 只需要写css选择器和代码 因为css文件内部是不允许书写html骨架的
• 行内元素优先级是最高的
• 内嵌式外链式谁离boby标签近谁的优先级高
• 一般顺序：行内，内嵌，外链
• 导入式
• @import "css文件路径"；

• 

• 导入式必须书写在style标签的最顶部
• 四种样式的权重和区别以及优缺点

• 

• 

•