zoukankan      html  css  js  c++  java
  • 背景边框列表链接和更复杂的选择器

    1. 背景

    背景指的是元素内容、内边距和边界下层的区域
    (可用background-clip修改)

    • background-color  背景色
    • background-image  背景图片(url)
    • background-repeat  背景重复
      • repeat  在水平垂直方向上都平铺
      • repeat-x / repeat-y  只在水平/垂直方向上重复
      • no-repeat  不允许图像在任何方向上平铺
    • background-position  背景定位
      • top、bottom、left、right 和 center(可以一水平一垂直成对出现,只出现一个默认center)
      • 长度值,如 100px 或 5cm(只应用于元素,偏移点是图像的左上角) 先水平再垂直
      • 百分数值(百分数值同时应用于元素和图像,左上角为0% 0%)
    • background-attachment  相对于可视区是固定的(fixed)/默认值滚动(scroll)

    2. 边框

    样式

    solid、dotted、dashed、double、groove、ridge、inset、outset、none、inherit

    实线上边框、点线右边框、虚线下边框和一个双线左边框:

    border-style: solid dotted dashed double;    //top-right-bottom-left 的顺序

    宽度

    border-width:指定长度值,比如 2px 或 0.1em/3 个关键字之一,它们分别是 thin 、medium(默认值) 和 thick

    "border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。

    颜色

    border-color

    可以所有边框属性在一个声明中:border: medium double rgb(250,0,255);

    3. 列表

    要修改用于列表项的标志类型,可以使用属性 list-style-type

    想对各标志使用一个图像,这可以利用 list-style-image 属性(url)

    4. 链接

    • a:link - 普通的、未被访问的链接
    • a:visited - 用户已访问的链接
    • a:hover - 鼠标指针位于链接的上方
    • a:active - 链接被点击的时刻

    次序规则:

    a:hover 必须位于 a:link 和 a:visited 之后

    a:active 必须位于 a:hover 之后

    5. 选择器

    选择器的分组与继承

    分组:逗号隔开

    继承:特殊规则就可以摆脱继承

    派生选择器

    通过依据元素在其位置的上下文关系来定义样式(上下文选择器)

    伪类选择器

    CSS 伪类用于向某些选择器添加特殊的效果。
    CSS 伪元素用于将特殊的效果添加到某些选择器。

    两者区别在于: 伪类的效果可以通过添加一个实际的来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到

    用于选择处于特定状态的元素,例如,它们是其类型的第一个元素,或者它们被鼠标指针悬停。(因为行为被定义为一个类)

    1. 简单伪类

    • :last-child

    • :only-child

    • :invalid

    • :first-child

    2. 用户操作伪类

    • :hover - 上文提到的; 仅当用户将指针移动到元素(通常是链接)上时才适用。
    • :focus - 仅在用户使用键盘控件聚焦元素时适用。

    伪元素:::before::after伪元素与content属性一起使用称为“生成的内容”

    组合

    1. 后代组合器 有共同的祖先(直接空格

    2. 子组合器 第一个选择器的直接子元素(用>连接) //比如选择的是ul>li 那么ul-span-li就不能算了

    3. 相邻同级组合器 与第一个选择器同级的第一个选择器2元素(用+连接)

    4. 通用同级组合器 与第一个选择器同级的所有选择器2元素(用~连接)

    6. 选择器的优先级

    层叠

    ①按特殊性排序,特殊性高的优先
    ②按出现顺序排序,越后出现的权重就越大。
    !important总是优先于其他规则

    特殊性:

    内联样式1000;

    ID属性100;

    类属性/属性选择/伪类010;

    元素/伪元素001

    通用选择(*),组合子(+>~,'“),以及否定伪类(:not)对特异性没有影响。

    继承控制:

    inherit将应用于选定元素的属性值设置为其父元素的属性值。实际上,这“继承”。

    initial将应用于选定元素的属性值设置为该属性的初始值

    unset将属性重置为其自然值,这意味着,如果该属性是自然继承的,则其行为类似于inherit,否则,其行为类似于initial

    重置所有属性值: all: unset;

  • 相关阅读:
    【转】IOS开发:[1]Xcode5界面入门
    【转】Xcode中的iOS模拟器(iOS Simulator)的介绍和使用心得
    特征选择
    EM算法
    算法之美--3.2.3 KMP算法
    算法之美--3.2.2 MP算法
    图像质量评价方法PSNR+SSIM&&评估指标SROCC,PLCC
    C/C++二进制读写png文件
    大津法---OTSU算法
    一些优秀的面试笔试总结
  • 原文地址:https://www.cnblogs.com/hermionepeng/p/13050533.html
Copyright © 2011-2022 走看看