zoukankan      html  css  js  c++  java
  • 属性选择符 伪类选择符 层级选择器 阴影 文本换行处理 背景图

    属性选择符:

    选择符的目的:选择标签对标签做css样式渲染  通过html属性,对html标签做选择

    1,选择符[属性]{css样式}   说明:只要带有当前属性就会被选中

    2,选择符[属性:”属性值”]{css样式}  说明:指定属性名也必须指定属性值则匹配成功

    3,选择符[属性~=”属性值”]{属性值}  说明:当前属性值是一个以空格隔开的‘词列表’只要包含当前指定的属性值则匹配成功

    4,选择符[属性^=”属性值”]{css样式} 说明:当前属性值是以当前字符开头的就会匹配成功,不需要空格

    5,选择符[属性$=”属性值”]{css样式}

    6,选择符[属性*=”属性值”]{css样式}  说明:属性值只要包含当前指定的字符 则匹配成功

    7,选择符[属性/=”属性值”]{css样式}  说明:属性值如果是以指定属性一开头的则匹配成功,仅是一个单词的时候只要开头是就行

    结构伪类选择符:

    元素:first-child{css样式} 选择当前“子集”第一个

    元素:last-child{css样式} 选择当前子集最后一个

    元素:nth-child(第几个){css样式} 选择当前子集第几个

    元素:nth-last-child{css样式}  选择当前子集倒数第几个

    元素:only-child{css样式}  当前子集只有一个的时候则被选中

    类型选择把child换成 of-type

    注:如果子集都是同类标签用child   如果子集不是同类标签用 of-type

    结构伪类:

    root{css样式 } 选择根标签-html

    empty{css样式}  当前元素没有任何内容才会被选中

    目标伪类:

    元素:target{css样式}  当前元素被相关超链接指向执行的样式

    动态伪类:

    focus  聚焦时候做的css样式

    层级选择器:

    1,父元素>子元素   说明:选中父元素最近的一层子元素(不包括孙子辈的元素)

    2,兄弟元素+兄弟元素  说明:选择当前元素下面最近的一个兄弟元素

    3,兄弟元素~兄弟元素  说明:选择当前元素下面所有兄弟元素

    状态伪类:

    inputenabled   匹配所有用户界面(form表单)中处于可用状态的E元素

    inputdisabled    处于不可用状态的E元素

    checked+(元素)(兄弟元素才行)  处于选中状态的E元素

    selection  处于部分高亮显示状态的元素

    P::selection  只能改变背景颜色和字体颜色

    文本阴影:

    text-shadowX Y 阴影大小  颜色

    多阴影设置

    text-shadowx(大小)  y(颜色) , x(大小) y(颜色);

    Box-shadow  盒子阴影

    box-shadow10px 10px 20px 0px gray

    x  y   z   大小 颜色

    文本换行处理:

    浏览器默认对英文或数字的换行处理 如果放不下,会尝试把长单词换到下一行 但是如果在下一行仍然超出则不会换行处理:

    word-wrapbreak-word;  说明:如果放不下长单词,首先把长单词换到下一行显示,如果把长单词仍然超出则会断句

    word-breakbreak-all;  说明:不会尝试把长单词换到下一行,而是直接在单词内部断句

    背景图:

    1,背景图的起始位置

    background-origin:;

    属性值:

    (默认位置) padding-box  padding区域开始

    border-box  border区域开始

    contentbox  内容区域开始

     

    2,背景的裁切(背景图/背景色)

    background-clip:;

    padding-box      padding  区域开始

    (默认值)border-box  边框区域开始

    content-box      内容区域开始

     

    3,背景图的大小

    background-size:;

    属性值:高度   宽度(都要存在)

        100%  100%

        100px  100px

    cover  背景图等比放大铺满

    contain 等比放大当宽或者高达到最大则停止

     

    4,多背景设置:

    backgroundurl(),url();

    backgroundcolor

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    将数据导入带模板EXCEL
    c#.net循环将DataGridView中的数据赋值到Excel中,并设置样式
    c#.net对excel的操作——创建一个excel报表两个sheet就是2个表分别添加内容
    Sharepoint2013 中想要将网站另存为模板步骤
    使用SharePoint 2010 母版页
    命令添加用户到组
    随机生成10个数,填充一个数组,然后用消息框显示数组内容,接着计算数组元素的和,将结果也显示在消息框中
    大道至简第五章感悟
    Ljava.lang.Object;@ba8a1dc
    字符串最简单的加密与解密
  • 原文地址:https://www.cnblogs.com/ht955/p/13835726.html
Copyright © 2011-2022 走看看