• 04-选择器/css


    #### css选择器
      * 伪类选择器 (伪类:在某种状态下) 爱恨法则 (love hate)
        + 选择器:link **a标签**未点击之前的状态
        + 选择器:visited **a标签**访问过后的状态
        + **选择器:hover** 鼠标滑过某个标签的状态 可以是所有的标签
        + 选择器:active 鼠标在**a标签**按下的状态
      * 后代选择器
        + 选择器 选择器 {}  
          - 每个选择器之间有后代的关系
          - 后代可以嵌套多个
          - 只要是后代关系就可以使用后代选择器
      * 群组选择器 将相同的样式写到群组选择器里面
        + 选择器,选择器{} 
          - 选择器可以是任何选择器
          - 可以放置多个选择器  
      * 选择器的权重(优先级)  
        + 权重值
          - 内联样式 权重值 1000
          - id选择器 权重值 100
          - class选择器和伪类选择器 权重值 10
          - 标签选择器  权重值 1 
        + 特点
          - 权重值越高,优先级就越高,优先显示该样式
          - **后代选择器的权重值为所有选择器的权重值的和**
          - **继承样式的优先级是最低的,自己本身的要高于继承得来的样式**
          - **群组选择器的权重值为自己本身的权重值**
          - **权重值相同的情况下,根据就近原则**  
      * 层叠
        + 用不同的选择器选择同一个元素,设置了通用的css属性,但是设置了不同的属性值,会产生样式的冲突,根据选择器的权重值来优先显示,权重值越高,优先显示该样式,没有冲突的样式照常显示
    #### css属性
      * 文本属性
        + 字体大小 font-size 默认字体大小 16px
          - 数值+px
          - 数值+em 1em=16px 几个em就表示是**父元素**字体大小的几倍
          - 数值+rem 1rem=16px 几个rem就表示是**根元素(html)**字体大小的几倍 移动端使用
        * 字体类型 font-family
          - 中文,必须要加引号
          - 英文,一个单词的字体类型可以不加引号,多个单词的字体类型要加引号
          - 多个字体类型之间用逗号隔开,浏览器会从左向右检索字体类型,如果存在该字体则显示,检索到组后不存在就显示默认的字体类型
        * 文本加粗 font-weight
          - bold 加粗
          - **normal 去掉加粗标签的加粗样式**
          - 数值 100-900之间的数,并且整百增加,**不要加单位**  100-400偏细 500正常 600-900加粗  
        * 文本倾斜 font-style
          - italic 倾斜
          - **normal 去掉倾斜标签的倾斜样式**
        * 文本颜色 color
          - 颜色的单词
          - 十六进制 #313131
          - rgb(r,g,b); r,g,b(0-255) 
        * 文本水平对齐 text-align 
          - left 左对齐
          - center 居中对齐
          - right 右对齐
          - justify 两端对齐 文字或单词两端对齐 增大之间的空隙 
        * 垂直对齐 vertical-align **对图片生效,这个属性加在img标签**
          - top 顶部对齐
          - middle 居中对齐
          - baseline 基线对齐 图片和文字默认的对齐方式
          - bottom 底部对齐  
        * **行高 line-height**
          + 数值 表示是字体大小的倍数
          + 数值+px 
            - 单行文本垂直方向居中对齐 将行高和高度的值设置成一样的 
            - 添加多行文本之间的间距,多行文本之间间距的量取是从第一个的头到第二行的头
        * 文本修饰 text-decoration
          + **none 去掉下划线**
          + underline 下划线
          + overline 上划线
          + line-through 删除线
        * 大小写的转换 text-transform
          + capitalize  每个单词的首字母大写
          + uppercase 字母全部大写
          + lowercase 字母全部小写
          + none 默认值
        * 字体简写/复合写法 font
          + 顺序: font-style(字体样式) font-weight(字体加粗) font-size(字体大小)/line-height(行高) font-family(字体类型)
          + font-style和fong-weight可以省略不写,为默认样式
          + 后面的顺序必须是一定的,且不能省略
        * 字符间距 letter-spacing 可以为负数
          + 英文:字母之间的间距 数值+px
          + 中文:汉字之间的间距 数值+px
        * 词间距 word-spacing 对于英文来说
          + 单词之间的距离
        * 文本缩进 text-indent 
          + 数值+px
          + 数值+em 相对当前的字体大小 
          + 悬挂式缩进 设置值为负数  



            






  • 相关阅读:
    Wpf 简单制作自己的窗体样式(2)
    Wpf 简单制作自己的窗体样式
    Microsoft Expression Blend 4制作简单的按钮
    Jest和enzyme 前端单元测试工具
    使用socket.io实现多房间通信聊天室
    如何快速开发一个微信小游戏--实例《打气球》
    使用flow来规范javascript的变量类型
    前端开发工具icestar
    vue.js和vue-router和vuex快速上手知识
    react.js插件开发,x-dailog弹窗浮层组件
  • 原文地址:https://www.cnblogs.com/qdbj2020/p/13438182.html
Copyright © 2020-2023  润新知