iOS开发笔记 一天到晚游泳的余

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 547|回复: 0

CSS读书笔记

[复制链接]
  • TA的每日心情
    发光
    2019-4-19 14:50
  • 签到天数: 366 天

    [LV.9]以坛为家II

    发表于 2018-1-8 13:26:26 | 显示全部楼层 |阅读模式
    本帖最后由 Sian 于 2018-1-8 13:26 编辑

    1、过滤所有外加样式:normalize.css

    https://cdn.bootcss.com/normalize/7.0.0/normalize.css

    2、属性选择器


    2.1、包含title属性的元素
    [CSS] 纯文本查看 复制代码
            input[title] { 
                    color: red,
            }
    2.2、包含title并且值为"submit"的元素
    [CSS] 纯文本查看 复制代码
            input[title="submit"] {
                    color:red
                    border: 1px solid #000;// dotted,dashed
            }
    2.3、包含href并且值中包含"yusian.com"
    [CSS] 纯文本查看 复制代码
            a[href*="yusian.com"]{
                    color:red
            }
    2.4、包含href并且以"http://yusian.com"开头
    [CSS] 纯文本查看 复制代码
            a[href^="http://yusian.com"]{
                    color:red
                    border: 1px dotted #000;
            }
    2.5、包含href并且以"yusian.com"结尾
    [CSS] 纯文本查看 复制代码
            a[href$="yusian.com"]{
                    color:red
                    border: 1px dashed #000;
            }
    3、后代选择器

    3.1、类a元素下面的类b的元素被选中
    [CSS] 纯文本查看 复制代码
            .a .b {
                color : red;
            }
    3.2、同时含有类a和类b的元素将被选中
    [CSS] 纯文本查看 复制代码
            .a.b {
                    color : red;
            }
    4、相邻选择器

    4.1、相邻的下一个
    [CSS] 纯文本查看 复制代码
            .a + div {
                color: yellow;
            }
    4.2、相邻通用选择器,相邻以下的所有
    [CSS] 纯文本查看 复制代码
            .a ~ div {
                background: gray;
            }
    5、伪类选择器

    5.1、超链接伪类选择器,注意先后顺序,因为会相互覆盖,所以状态放前面
    [CSS] 纯文本查看 复制代码
            a:link {color: #FF0000}
            a:visited {color: #00FF00}
            a:hover {color: #FF00FF}
            a:active {color: #0000FF}
    5.2、input的伪类选择器
    [CSS] 纯文本查看 复制代码
            input:focus{
                    outline: none;
                    border: 1px dashed red;
            }
    6、伪元素选择器

    6.1、元素开头加"*"
    [CSS] 纯文本查看 复制代码
        p:before {content: "*"}
    6.2、元素结尾加“[?]”
    [CSS] 纯文本查看 复制代码
            p:after {content: "[?]"}
    6.3、元素第一个字符渲染红色
    [CSS] 纯文本查看 复制代码
            p:first-letter {color: #FF0000}
    6.4、第一个元素
    [CSS] 纯文本查看 复制代码
            p:first-child {color: blue;}
    6.4、最后一个元素
    [CSS] 纯文本查看 复制代码
            p:last-child {color: green;}
    6.5、第n个元素
    [CSS] 纯文本查看 复制代码
            p:nth-child(n) {color: #00FFFF;}
    7、选择器权重

    内联 > id选择器 > 类/属性/伪类选择器 > 元素选择器

    8、display的几个属性值

    8.1、inline
    左右可伸缩,尽可能的向左上角靠;
    8.2、block
    上下左右可伸缩,成块出现,不可换行或折断,并且不与其他元素同行
    8.3、inline-block
    上下左右可伸缩,成块出现,不可换行或折断,可与其他元素同行
    8.4、none
    隐藏不显示;

    9、在线商城项目

    9.1、box-sizing 属性:content-box、border-box、inherit,边框与内边距是否计算入框中
    [CSS] 纯文本查看 复制代码
            * {
                    box-sizing:border-box;
                    -moz-box-sizing:border-box; /* Firefox */
                    -webkit-box-sizing:border-box; /* Safari */
                    width:50%;
                    float:left;
            }
    9.2、清除浮动
    A、在div中,所有元素均设置成float时,母元素的高度会塌陷,从而无法设置可见样式;
    B、要解决这个问题,最简单的办法是在所有子元素的后面添加一个空div,并且清除浮动,使得母元素形态上能够扩展到最后一个元素;
    C、还有一个办法是通过伪类选择器的方式添加一个空元素清除浮动,在相关的元素中添加这个类即可;
    [CSS] 纯文本查看 复制代码
            .clear-float:before,
            .clear-float:after {
                    content: "";
                    display: block;
                    clear: both;
            }

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2020-8-15 06:37 , Processed in 0.223466 second(s), 19 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表