码迷,mamicode.com
首页 > Web开发 > 详细

CSS语法规则

时间:2019-11-09 00:47:24      阅读:494      评论:0      收藏:0      [点我收藏+]

标签:php   包括   声明   enc   嵌套   mda   sre   优先级   优先   

一、At-rule

    一种以@开头的声明语句,以分号;结尾。语法规则为: @IDENTIFIER (RULE); 。

    At-rule主要用作表示CSS的行为,参考: https://www.cnblogs.com/wuyinghong/p/3700519.html

        1、@charset—定义被样式表使用的字符集

        2、@import——告诉CSS引擎包含外部的CSS样式表

        3、@namespace——告诉CSS引擎所有的内容都必须考虑使用XML命名空间前缀

        4、嵌套at-rules

            (1)@media——条件组规则。如果设备符合标准定义的条件查询则使用该媒体

            (2)@font-face——描述了一个将从外部下载的字体

            (3)@keyframes——描述了中间步骤在CSS动画的序列

            (4)@page——描述了文件的布局变化,当要打印文档时。

            (5)@supports——条件组规则,如果浏览器满足给出的规则,则把它应用到内容中

            (6)@document——条件组规则,如果被用到文档的CSS样式表满足了给定的标准,那么将被应用到所有的内容中。

  例子:  
  dot { display: inline
-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden; } dot::before { display: block; content: ‘...\A..\A.‘; white-space: pre-wrap; animation: dot 3s infinite step-start both; } @keyframes dot { 33% { transform: translateY(-2em); } 66% { transform: translateY(-1em); } }

二、CSS规则定义

    p {color:red;text-align:center;}

    由选择器后面跟着一对{}花括号,花括号内部有一条或多条声明语句;每条声明语句使用"属性: 值;"的形式,中间用冒号,结尾用分号。

    注释以 "/*" 开始, 以 "*/" 结束。

    CSS规则的定义涉及到两个方面: 属性和选择器,参考: http://phpstudy.php.cn/css3/

 

三、CSS的属性

    参考: https://www.runoob.com/cssref/css-reference.html

 

四、CSS的选择器

    CSS选择器的权值: important(最高,在设置属性值后面添加"!important")、内联(1000)、ID(100)、Class(10)、Tag(1)。

    CSS选择器的优先级: 根据选择器的权值计算,组合选择器的权值会进行叠加。

        同一个元素应用可能多个选择器时,权值大的优先;如果权值相同,那么则选择最后加载的选择器。

        如果选择器设置为class="A B C",最终选择的选择器不是按A/B/C的先后顺序,而方式按照A/B/C的CSS加载顺序。

 

1、基本选择器

    (1) 标签选择器(元素选择器)

        直接写元素标签名字,比如p。其中比较特殊的是*,它表示选择所有元素。

    (2) 类选择器

        .class,其中class就是元素的class属性需要填写的值。

    (3) ID选择器

        #id,其中id就是元素的id属性值。(HTML页面中能够重复使用相同的ID)

    (4) 属性选择器

        元素[属性=值][...]的基本格式,如果没有"=值"的部分就表示元素需要包括该属性。

        可以多个属性同时使用;其中=又扩展为~=、|=、^=、$=、*=。

 

2、派生选择器

    (1) 后代选择器

        用空格隔开的多个选择器名字,比如div p表示div包含的所有p元素,不管是div直接包含还是间接包含。

    (2) 子元素选择器

        用>号表示,比如div>p表示div下的所有子元素p,只能直接包含。

    (3) (普通)兄弟选择器

        用~号表示,比如div~p表示div之后的所有同级兄弟p元素,但是div之前的兄弟元素p不包含在内。

    (4) 相邻兄弟选择器

        用+号表示,比如div+p表示div后面相邻的p元素。(div和p在同一个层次上,并且p刚好在div后面)

    (5) 并集选择器

        用,号表示,比如div,p表示所有的div元素和p元素。

    (6) 交集选择器

        用.号表示,比如h3.special只能用于<h3 class="special">这样的标签中。

        注意它和h3 .special不一样,中间有空格和没空格是有区别的。

    (7) 伪类选择器

        用:号表示,一个选择器可以同时使用多个伪类。

        伪类是为了弥补选择器的不足。

    (8) 伪元素选择器

        用::表示,一个选择器只能使用一个伪元素。

        伪元素的本质则是创建一个虚拟元素然后在应用样式。

转载自:https://www.cnblogs.com/ringboow/p/11134373.html

CSS语法规则

标签:php   包括   声明   enc   嵌套   mda   sre   优先级   优先   

原文地址:https://www.cnblogs.com/planetwithpig/p/11823732.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!