zoukankan      html  css  js  c++  java
  • css权威指南读书笔记

    今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来。

    1.属性选择器
    p.one class名为one的p元素
    p[class][name] 含有class和name属性的p元素
    p[class="one"][name="two"] class属性为one且name属性为two的p元素
    p[class~="one"] class属性包含one的p元素
    p[class^="one"] class属性以one开头
    p[class$="one"] class属性以one结尾
    p[class*="one"] class属性包含one
    p[class|="one"] class属性为one或以之开头


    2.伪类
    链接的伪类:link :visited :focus :hover :active
    :lang(fr) 类似于|=,意为语言为法语的元素

    3.伪元素
    :first-letter
    :first-line
    :before {content:"前面插入的内容";color:red;}

    4.特殊性值
    ID # 0,1,0,0
    Class 0,0,1,0
    P标签名 0,0,0,1
    通配符* 0,0,0,0
    伪类 特殊性值没有

    5.字体变形
    font-variant:small-caps 小型大写字母
    text-transform:uppercase 字母大写
    capitalize 首字母大写
    字体下载
    @font-face{font-family:"name";src: url("www");}

    6.文本格式
    p{text-indent:3em;}段落首行缩进3字符
    text-align:center;居中
    word-spacing:1em文字间隔
    letter-spacing:1em 字母间隔

    7.DOM可见性
    visibility 属性
    hidden 元素不可见,但保留在文档中的位置(该属性可继承,如果要求部分子元素显示要显式声明此部分visibility:visible)

    而overflow的hidden,元素不可见的同时也不会占据文档流

    8.定位
    Relative 相对定位元素
    当发生冲突时bottom=-top值,right=-left

    Absolute绝对定位元素
    如果不定义height、width;left、right的值将影响元素大小(拉伸/压缩)

    9.表格
    Border-collapse:collapse
    用于表格单元格中间空隙合并

    table{border-space:1px 3px;}
    表单元格之间x轴空隙1px;y轴空隙3px。

    li{list-style-image:url(...);}
    为列表标志改变默认样式(改用图片)

    li{list-style-position:inside;}
    将标志(小圆点)置于列表项内部,默认值是outside,所以我们通常看到的小圆点是在外面的

    10.a标签手势
    a:hover{cursor:pointer;}
    该属性使得光标形状变成“手”
    crosshair十字准星

    11.边框轮廓

    outline-style
    轮廓样式,类似于元素边框,可以包在边框外面

  • 相关阅读:
    Mysql有什么办法批量去掉某个字段字符中的空格
    Mysql order by 排序 varchar 类型数据
    JS将人民币小写金额转换为大写
    禁止表单输入中文(禁止粘贴)
    abp vnext 开发快速入门 3 实现权限控制
    abp vnext 开发快速入门 2 实现基本增删改查
    abp vnext 开发快速入门 1 认识框架
    从零开始一起学Blazor WebAssembly 开发(4)
    发布一个自己做的图片转Base64的软件,Markdown写文章时能用到
    一起学Blazor WebAssembly 开发(3)
  • 原文地址:https://www.cnblogs.com/eco-just/p/9330878.html
Copyright © 2011-2022 走看看