CSS2 | 青训营笔记

用户9813748575324
52 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第4天
2、伪元素 概念：创建一些不在文档树中的元素，并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。)它可以用于
• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容

                height:20px;
            width:20px;
            background-color:rgb(255,0,0);
            display:block;}
        </style>
    </head>
    <body>
        <div></div>
    </body>

• div::after表示在div元素后插入内容。
• 在元素上，content 的初始值为 ‘normal’.在:before和:after上，如果指定了content 的初始值为 ‘normal’，则计算为 ‘none’ 。content 的值设置为 ‘none’ 不会生成伪元素。所以:before和:after才需要指定一个看似无意义的 content: ""; 来初始化content的值。
• 题目规定了宽高，为了使宽高设置有效又必须显式定义该伪元素为块级元素，也就是语句 display:block
多字体用逗号隔开，按照顺序解析
Google默认字体为 微软雅黑
颜色：0最弱，255最强
十六进制：0-9 A-F
十六进制调色：两位为一组，分别代表rgb
字体：100细体lighter；400正常normal；700加粗bold；900更粗体bolder（有强调作用）
Text-align: justify两端对齐
文本间距：词间距，字符间距
Letter-spacing：字符间距（取负值字符会交叉）
Text-indent：取2em（空2个字符大小的位置），让空格随着字符大小变化而变化（只用于首行)
文本修饰线text-decoration
大小写：text-transform\

每个单词首字母大写
Lowercase：全部转化为小写
Uppercase：所有字母转为大写\

        p{font:italic bold 20px/1em 宋体}
    </style>

简写font：顺序不能换，字体和大小和行高必须要写，（斜体/加粗等备注不一定要，可以省略）\

        ul{list-style-type:square;}
    </style>

List-style-image:url(img/i.jpg). （相对路径）\

        .li2{list-style-image:url(img/2.jpg)} */

List-style-position用的很少，仅用于放置在列表内外（如果不设置边框，很难看出区别）\

.ul1{
            list-style:none url(img/1.jpg) inside;
        }

复合简写（顺序可以随便换） 背景属性

avatar
文章
阅读
粉丝