重学前端学习笔记---css的组成成分

骑猪看日落 2022-03-02 06:30 278阅读 0赞

css的顶层样式表由两种规则组成，一种是at-rule，也就是at规则，另一种是qulified rule，也就是普通规则。

1.css的at规则也就是@再加一个关键字的语法

（1）@page 用于打印文档时修改某些css属性，只能修改margin,orphas,window和page breaks of the document四个属性

描述：

*  size：指定页面纸张大小
 *  marks：向文档添加剪切标记或注册标记
 *  bleed指定一个超出页面盒模型的区域，在这个区域的页面内容将被裁剪

比如 @page:first\{rule\} --设置页面容器第一页使用的样式

@page:left\{rule\}--设置页面容器位于装订线左边的所有页面的样式

（2）@couter-style：自定义列表序号符号

拥有的属性

*  system：指定一个算法，用来将计数器的整数值转化为字符串表示，取值有以下几种

fixed:只用一遍符号，如果后面跟一个数字，表示开始的地方

alphabetic:小写字母循环

cyclic循环使用符号

*   指定用于标记的符号，可以包含字符串，图片或者自定义的识别码

...其他属性用到再学吧

比如

@counter-style mylist{
    
        system:fixed;
    
        symbols:"①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩";
    
        suffix:" ";
    
    }
    
    .item li{
    
        list-style: mylist;
    
    }

(3)@fontface定义一种字体

使用src引入字体文件，font-family定义字体名字。

2.普通规则

普通规则主要是由选择器和声明区块构成，声明区块又由属性和值构成。

普通规则的组成要点如下：

*  选择器
 *  声明列表

声明列表的组成又如下：

*  属性
 *  值（值的类型、函数）

首先来看选择器，选择器的构成主要有标签选择器、id、class、属性选择器、伪类，它们中只要出现一个，就形成了构造器。

如果它是伪类，则在这个结构之后追加伪元素，只有伪类可以出现在伪元素之后。那么伪类和伪元素又有哪些呢？

其中伪类又分为状态伪类和结构性伪类，状态伪类是基于元素当前状态进行选择的，在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据状态呈现不同的样式，当元素处于某状态会呈现该样式，而进入另一状态后，该样式也会失去。状态伪类主要包括以下几种

*  :link应用于未被访问过的连接
 *  :hover应用于鼠标悬停的元素
 *  :active应用于被激活的元素
 *  :visitived应用于被访问过的连接，与:link互斥
 *  :focus应用于拥有键盘输入焦点的元素

而结构性伪类利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class属性和id属性来定义。

*  :first-child选择符合条件的第一个元素

例如一个ul下面的一个li，我想选择这些li的第一个li，应该这样写

.item li:first-child{
    
        color: rebeccapurple;
    
    }

*  :last-child选择符合条件的最后一个子元素
 *  :nth-child()选择符合条件一个或多个特定的元素

比如我选择li列表中的所有偶数项或奇数项

.item li:nth-child(2n){
    
    //偶数项
    
         color: rebeccapurple;
    
    }
    
    .item li:nth-child(2n+1){
    
    //奇数项
    
         color: rebeccapurple;
    
    }

*  :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算
 *  :nth-of-type选择指定的元素（跟nth-child差不多）
 *  nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算
 *  :first-of-type选择符合条件的第一个元素

.item li:first-of-type\{

color: rebeccapurple;

*  :last-of-type 选择符合条件最后一个元素；
 *  :only-child 选择的元素是它的父元素的唯一一个子元素；

li:only-child\{

color: rebeccapurple;

*  :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
 *  :empty 选择的元素里面没有任何内容

而伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。需要注意的是，伪元素的内容是和元素相同的，但它本身是基于元素的抽象，并不存在与文档结构。常见的伪元素选择器如下：

*  :first-letter选元素文本的第一个字或者第一个字母
 *  :first-line选择元素文本的第一行
 *  :before在元素内容的最前面添加内容，需要指定content
 *  :after在元素内容的最后面添加新内容。

声明：属性和值

声明部分是一个由属性:值组成的序列

值可以为函数。