CSS 款式的应用方法、挑选器

日期:2021-01-20 类型:科技新闻 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

在html中应用css的3种方法:

1、行内款式:同过元素的style特性来设定

<p style="font-size:20px; color:red">hello</p>

特性之间分号分隔。

2、內部款式:在<head>的<style>元素中界定css款式

<style>
    p{font-size: 20px;color: red}    
</style>

3、外界款式:在css文档中界定css款式,随后在html的<head>中根据<style>引进外界款式表

p{font-size: 20px;color: red}
<link href="xxx.css" type="text/css" rel="stylesheet" />

css文档中不加<style>标识,立即写css款式就ok。

內部|外界款式的英语的语法: 挑选器 {特性名1:特性值1; 特性名2:特性值2}

3种方法,特性之间全是分号分隔。

css注解:

/*  注解  */

css挑选器

1、元素挑选器、类挑选器、id挑选器

p{color: red}  /* 元素挑选器,给全部p元素设定款式*/
.red{color: red}  /* 类挑选器,在元素中根据class="red"引入 */
#user{color: red}  /* id挑选器,在元素中根据id="user"引入,数最多只能应用1次 */

2、通用性挑选器、排序挑选器

*{color: red}  /*通用性挑选器,给全部元素设定款式 */
h1,.red{color: red}  /*排序挑选器,另外给好几个挑选器设定同样的款式 */

3、子孙后代挑选器、子挑选器、邻近弟兄挑选器、后续弟兄挑选器

div p{color: red}  /*子孙后代挑选器,挑选<div>中全部的<p>元素,无论<p>是<div>的儿子、孙子、重孙......要是<p>是<div>的子孙后代就行*/
div>p{color:red}  /*子挑选器,挑选的是<p>,<p>务必是<div>的儿子*/
div+p{color:red}  /*邻近弟兄挑选器,挑选的是<p>,<p>务必是<div>后边的第1个弟兄元素 */
div~p{color:red}  /*后续弟兄挑选器,挑选<div>后边全部的<p>,<p>务必是<div>的弟兄元素 */

4、特性挑选器

[attr]  /*含有attr特性*/
[attr=value]  /*有attr特性,且特性值为value*/
[attr^=value]  /*有attr特性,且特性值以value开始(要是value是开始就ok*/
[attr|=value]  /*有attr特性,且特性值以value开始、value和后边一部分以-联接 */
[attr$=value]  /*有attr特性,且特性值以value末尾*/
[attr*=value]  /*有attr特性,且特性值中含有value(含有就ok)*/
[attr~=value]  /*有attr特性,且特性值中含有单词value,value如果1个详细的单词(和其它单词以空格分隔)*/

特性挑选器常和其它挑选器1起应用,例如:

button[type="button"]  /*挑选全部type="button"的<button> */

特性挑选器中,attr不可以加引号,value可引可不引。

5、<a>连接

a:link   /*全部未浏览过的<a>*元素/
a:hover  /*电脑鼠标移到<a>元素上*/
a:active  /*点一下<a>时*/
a:visited  /*全部浏览过的<a>*/

这4个设定的是<a>元素不一样阶段的款式。

:hover这个伪类全部元素都可以以应用。

6、表模块素

:focus   /*聚焦时*/
:checked   /*选定时*/
:enabled   /*能用的*/
:disabled  /*禁用的*/
:read-only  /*写保护*/

可独立应用,也可相互配合表模块素应用:

:focus{  }
input:focus{  }

7、空元素

:empty{  }   /*全部的空元素*/
p:empty{  }  /*全部空的<p>元素*/

空元素指的是沒有任何特性、沒有內容的元素,示例:<p></p>。

8、非

:not(p)    /*挑选并不是<p>的全部元素*/

()中尽可能只应用元素挑选器,应用别的挑选器非常容易错误。

9、type系列

p:first-of-type  /*同级別中的第1个<p>*/
p:nth-of-type(n)   /*同级別中的第n个<p>*/
p:nth-last-of-type(n)   /*同级別中的倒数第n个<p>*/
p:last-of-type   /*同级別中的最终1个<p>*/
p:only-of-type   /*同级別中唯1的1个<p>*/

示例:

p:first-of-type{color:red}

<body>
    <h1></h1>
    <p></p>   <!--选定-->
    <p></p>
    <div>
        <h2></h2>
        <p></p>  <!--选定-->
        <p></p>
    </div>
</body>

要是是同级別的<p>中的第1个便可。

10、child系列

p:first-child   /*配对的是<p>,<p>如果其父元素的第1个子元素*/
p:nth-child(n)  /*配对的是<p>,<p>如果其父元素的第n个子元素*/
p:nth-last-child(n)  /*配对的是<p>,<p>如果其父元素的倒数第n个子元素*/
p:last-child  /*配对的是<p>,<p>如果其父元素的最终1个子元素*/
p:only-child  /*配对的是<p>,<p>如果其父元素的唯11个子元素*/

示例:

p:first-child{color:red}

<body>
    <h1></h1>
    <p></p>   
    <p></p>
    <div>
        <p></p>  <!--选定-->
        <p></p>
    </div>
</body>

 

11、首字、首行

p:first-letter  /*<p>元素的第1个标识符*/
p:first-line  /*<p>元素的第1行*/

12、:before    :after

p:before{   /*在<p>的前面加上內容*/
    content:"hello "
}
p:after{   /*在<p>的后边加上內容*/
    content:" byebye"
}

加上的內容默认设置是行内元素,但会和<p>在同1行显示信息(非常于把加上的內容放到<p>元素内的最前|后边),加上的其实不是1个真实的元素,因此叫做伪元素。

能够设定为块级,加上的內容会做为块级元素显示信息:

p:before{   /*在<p>的前面加上內容*/
    content:"hello ";
    display: block
}
p:after{   /*在<p>的后边加上內容*/
    content:" byebye";
    display: block
}

能够给加上的元素设定款式:

p:before{   
    content:"hello ";   /* 特性之间分号隔开 */
    display: block;   /*给加上的內容设定款式*/
    font-size: 20px;
    color:red
}

加上照片:

p:before{   
    content:"";   /* content特性是必须的,不加上文字时能够设定为空串 */
    display: block;  /*务必要设定为块级,要设定宽、高,加上的情况照片才可以显示信息出来*/
    width: 100px;
    height: 100px
    background-image: url("1.png");
}

消除波动:

p:before{   
    content:"";   
    clear: both
}

伪元素可使用单冒号,还可以应用双冒号。

:before   <=>   ::before
:after  <=>  ::after

带冒号的挑选器中,有4个伪元素:first-letter、:first-line、:before、:after,其余全是伪类。

挑选器能够配搭应用。

在同种方法中(全是內部|外界款式),优先选择级id挑选器最高,类挑选器次之,特性挑选器最低。(精准定位越实际、详尽的,优先选择级越高)
 

假如应用了同样的css特性,优先选择级行内最高,內部、外界优先选择级同样,看<head>中<link />、<style>的次序,后边的优先选择级更高(后3D渲染的款式会遮盖以前的款式)。
 

总结

以上所述是网编给大伙儿详细介绍的CSS 款式的应用方法、挑选器 ,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!

上一篇:內容营销推广,2017营销推广利器 返回下一篇:没有了