CSS

作者: Plenari | 来源:发表于2020-02-18 08:54 被阅读0次

    0.基础

    1. title属性
      当鼠标放在元素上时显示提示

    2. 盒子模型
      内容content 包裹一层padding
      然后是border外办再包裹一层margin

    3. 配置背景图片
      background : red url() no-repeat center right 10%;

    2.组合选择器

    1. id 选择器

    #para 选择id=para

    2. class 选择器

    .center 选择class=center
    p.center选择 <p class=center>

    3. 后代选择器(以空格分隔)

    div p 选取所有 <p> 元素插入到 <div> 元素

    4. 子元素选择器(以大于号分隔)

    div>p 选择了<div>元素中所有直接子元素 <p>

    5. 相邻兄弟选择器(以加号分隔)

    div+p 选取了所有位于 <div> 元素后的第一个 <p> 元素,紧挨着

    6 后续兄弟选择器(以破折号分隔)

    div~p 选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

    7. 属性选择器

    7.1. [title] 所有包含标题title的所有元素
    7.2. [title=abc] 属性和值选择器

    7.3 attribute 属性以 value 开头

    [attribute^=value] 属性的前几个字母是 value 就可以
    

    7.4. attribute 属性中包含 value

    [attribute|=value] 属性中必须是完整且唯一的单词,或者以 - 分隔
     [attribute~=value] 属性中包含独立的单词为 value
     [attribute*=value]`属性中做字符串拆分,只要能拆出来 value 这个词就行
    

    7.6 attribute 属性以 value 结尾

    • [attribute$=value] 属性的后几个字母是 value 就可以

    7.7 class 多个属性

    • 两个属性中间有空格就是后代
    • 没有空格就是子代
    • 正则表达式
    // id=sections 后代div 的id以s开头的所有元素背景设置为红色;
    #sections div[id^='s'] {
       color: red;  
    }
    

    4. 高级

    1. 文本

    名称 注释
    strong 强调
    small xiaohao
    i 斜体
    b 粗体
    cite 斜体引用
    q 加引号,有bug
    blockquote 块引用
    sup 2 上标
    del <del>删除</del>
    ins <ins> love </ins> 插入,下划线
    code <code>hello </code>
    pre 不删除任何空格

    2. 继承

    并不是所有样式都可以继承
    
    字体会被继承
    
    所有背景相关都不会被继承
     每一个属性都有是否可以继承的默认值
    

    3. position

    元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。

    描述
    absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。离他最近的开启了定位(position 不等于static)的祖先元素进行定位。如果都没有定位元素,则相对于浏览器窗口。绝对定位开启后会使元素提升一个层级。
    fixed 相对于浏览器窗口进行定位元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。不随着滚动条滚动。可以盯着一个地方看到。
    relative 相对于其正常位置进行定位。"left:20" 会向元素的 LEFT 位置添加 20 像素。使元素提升一个层级
    static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
    inherit 规定应该从父元素继承 position 属性的值。难道宽度和高度也可以自己获得吗?
    absolute

    4. display

    名称 理解
    block 行级块元素,相当于自动换行
    inline 行内元素
    flex 水平平均排列

    5. background

    名称 理解
    background-color 颜色
    background-image 图片
    background-repeat 重复
    background-position 位置
    background 可以一次全写,没有顺序和数量要求

    6. 表格

    名称 理解
    colspan 横向合并单元格,在td里设置
    rowspan 向合并单元格
    border-spacing 边框直接的距离
    border-collapse 边框合并,合并之后设置边框距离就失效了。
    thead 表头,然后砸中间设置tr
    tbody 主题
    tfoot

    7. input

    名称 理解
    name 提交给服务器的时候的变量变量
    type text,data,....buttom
    value 默认值
    checked checked 默认选择
    radio 单选
    checkbox 多选
    select 下拉列表
    option 单选,
    optgroup 分组,label分组标签
    textaera 文本域
    label for 指定表单input的id
    fieldset 给不同的输入分组
    legend 表单注释

    8. iframeset

    不能和body同时出现在页面中。

    名称 理解
    frameset cols, rows
    frame src

    3.其他选择器

    3.1 伪类

    名称 理解
    :link 没访问过的
    :visited 访问过
    :hover 鼠标移入
    :active 已经选中
    :focus 获取焦点 input
    ::selection 选中的元素,两个冒号为p中选中的文字设置样式
    ::-moz-selection 火狐专用选中文字
    • 注意: a标签的伪类顺序lvha

    3.2 伪元素 选择器

    名称 注释
    :first-child 这是是父类的第一个子元素
    :first-letter 第一个子单词
    :first-line 第一行
    :before 在指定元素开始标签之后的时候添加内容,使用content指定插入内容
    :after 指定元素结束标签之前添加内容
    :nth-child(even) 偶数个子元素
    :first-of-type 该类的的一个
    :nth-of-type 该类的的一个
    :not(选择器) 不要选择个选择器
    • 选择器优先级


      选择器优先级

    当包含多个选择器时,要先将选择器优先级加起来,然后在比较。
    多个相同的选择器相加不会超过他的数量级。
    优先级相同的用后边的。

    当给样式添加!important 超过内联样式,尽量避免使用,js也不能修改。

    相关文章

      网友评论

          本文标题:CSS

          本文链接:https://www.haomeiwen.com/subject/ddqlfhtx.html