属性选择器

​属性选择器​: 检索HTML页面中符合所设置的​属性​条件的​元素​。根据元素的​属性​和​属性值​来匹配​元素​。

​属性选择器​:通过​[ ]​设置被选元素的属性条件。其中包含​属性名称​,后跟​可选条件​以匹配属性的值。如下图所示,将选择HTML页面中所有包含了​alt属性​的​img元素​并为其设置CSS样式。

属性选择器​分两类:

存在和值属性选择器 (匹配精确的属性值)
1. [attr]: 包含​attr​属性的​所有元素​

       2. [attr=val]:选择属性​attr​被​赋值为val​的​所有元素​

       3. [attr~=vall]:​仅选择​属性​attr​中,属性值​包含val​的所有元素             

子串值属性选择器 (伪正则选择器)

       1. [attr|=val]:选择​attr​属性的值是​val​或值​以val-开头​的元素

       2. [attr^=val]:选择attr属性的值​以val开头(包括val​)的元素

       3. [attr$=val]:选择attr属性的值​以val结尾(包括val)​元素

       4. [attr*=val]:选择attr属性的值中​包含字符串val​的元素

font-size属性

您还可以使用​像素(px)​或​相对尺寸单位(em)​或​ pt​数值来操纵字体大小。

当您需要​像素精度​时,以​像素值(px)​设置字体大小是一个不错的选择,它可以让您完全控制文本大小。

​PX特点:​

  1. IE无法调整那些使用px作为单位的字体大小;

  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

  3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

​em(font size of the element)​是指相对于父元素的字体大小的单位。​em​是​相对长度单位​。相对于当前对象内文本的字体尺寸。 如果您没有在页面上的任何位置设置字体大小,那么这是浏览器的默认大小,即​16px​。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。

要计算em大小,只需使用以下公式:​em = px / 16​,即 ​1em = 16px​。

​EM特点:​


em的值并不是固定的;

  • em会继承父级元素的字体大小。
    温馨提示:
    所有​未经调整​的​浏览器​都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明​Font-size=62.5%​,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

  • 盒模型

    CSS通过盒模型来确定一个元素的​大小​以及如何​放置它们​。盒模型允许我们在​其它元素​和​周围元素边框​之间的​空间​放置元素。

    使用盒模型时,了解元素的总宽度是如何计算的非常重要。

    当您指定一个 CSS 元素的​宽度​和​高度​属性时,你只是设置​内容区域​的​宽度​和​高度​。要知道,完整大小的元素,你还必须添加内边距,边框和边距。

    例如,带有​填充(padding)​的盒的​总宽度​将是​宽度​加上​填充左侧(padding-left)​和​填充右侧(padding-right)​的​总和​。


    这是另一个有​边距(margin)​,​边框(border)​和​填充(padding)​的盒。

    总宽度是​左右边距​,​左右边框​,​左右填充​以及​内容的实际宽度​的​总和​。

    当您使用CSS设置元素的宽度和高度属性时,可以设置内容区域的宽度和高度。

    在盒模型中​设置背景颜色​时,将覆盖​内容区域以及填充区域(padding)​。

    最终元素的​总宽度​计算公式是这样的:

    ​总元素的宽度​​=宽度+左填充+右填充+左边框+右边框+左边距+右边距


    元素的总高度

    元素的总高度的计算方式与宽度相同。

    下面的例子与上一课有关​填充(padding)​,​边框(border)​和​边距(margin)​的计算方式相同。

    总而言之,​总元素高度​ = 高度(height) + 顶部填充(padding-top) + 底部填充(padding-bottom) + 顶部边框(border-top) + 底部边框(border-bottom) + 顶部边距(margin-top) + 底部边距(margin-bottom)

    知识点普及:遇到内容div想居中与外部div中,可以使用 margin : 0 auto 这样会根据内部div宽度自动填充左右两侧的margin值以达到居中效果

    设置链接样式

    链接​可以使用任何​CSS属性​(例如,color,font-family,background等)来​设置样式​。

    ​链接​的​特殊性​在于能够根据它们所处的​状态​来设置它们的样式。

    以下​​四个​链接状态是:

    ​a:link ​- 定义普通的、未被访问的链接
    ​a:visited ​- 定义已被访问的链接
    ​a:active​ - 链接被点击的时刻
    ​a:hover​ - 鼠标指针位于链接的上方
    下面的例子创建一个链接,当鼠标移到它上面的时候会改变样式。

    a:hover {
       color: red;
    }
    

    当为链接设置样式时,必须遵循以下规则:

    -​ a:hover​ 必须在a:link和a:visited之后

    • ​a:active ​必须在a:hover之后

    ​小技巧:​​“爱恨原则”(LoVe/HAte)​,即四种伪类的首字母:​LVHA​。再重复一遍正确的顺序:a:link、a:visited、a:hover、a:active .


    cursor参数值

    cursor​属性规定要显示的​光标​的​类型(形状)​

    该属性定义了​鼠标指针​放在一个​元素边界​范围内时所用的​光标形状​(不过 ​CSS2.1 ​没有定义由哪个边界确定这个范围)。

    cursor​属性还有许多其他的值,例如:

    ​auto ​-默认,浏览器设置的光标
    ​default ​- 默认光标
    ​crosshair ​- 光标显示为十字准线
    ​pointer - 光标显示手形图标
    ​move ​-此光标指示某对象可被移动
    ​e-resize ​-此光标指示矩形框的边缘可被向右(东)移动
    ​ne-resize​-此光标指示矩形框的边缘可被向上及向右移动(北/东)
    ​nw-resize​-此光标指示矩形框的边缘可被向上及向左移动(北/西)
    ​n-resize ​-此光标指示矩形框的边缘可被向上(北)移动
    ​se-resize​-此光标指示矩形框的边缘可被向下及向右移动(南/东)
    ​sw-resize​-此光标指示矩形框的边缘可被向下及向左移动(南/西)
    ​text ​-此光标指示文本
    ​wait -此光标指示程序正忙(通常是一只表或沙漏)
    ​help -此光标指示可用的帮助(通常是一个问号或一个气球)
    cursor的值较多,以下用图片的形式列出。

    Css3

    CSS3 前缀

    CSS3前缀​用于区分并​兼容各大主流浏览器​对于CSS新功能的支持。

    在了解这些前缀之前,先介绍一下各大主流​浏览器​的​内核​:

    ​IE​——trident(国内很多双核浏览器的其中一核就是trident)
    ​Opera​——Blink(presto已废弃)
    ​chrome​——Blink(之前是webkit)
    ​Firefox​——Gecko
    ​Safari​——webkit(Android手机使用频率最高的也是webkit内核)
    而每个内核都有自己的前缀:

    ​Trident​内核:前缀为​-ms-​
    ​Gecko​内核:前缀为​-moz-​
    ​Presto​内核:前缀为​-o-​
    ​Webkit​内核:前缀为​-webkit-​
    

    所以:

    ​-moz-​ 代表​firefox​浏览器私有属性
    ​-ms-​ 代表​IE​浏览器私有属性
    ​-webkit-​ 代表​safari、chrome​私有属性
    ​-o- ​代表​Opera​私有属性

    ​CSS属性​需要带各​浏览器的前缀​,下面介绍一些常用的需要加上前缀的属性​(新增属性)​:

    例如,Safari和Chrome的前缀是​-webkit​。 Chrome,Safari和Mozilla目前支持border-radius属性,只要它带有​浏览器前缀​即可生效。

    要在Chrome和Safari中指定​边框半径​,请使用以下语法:

    HTML代码:

    <html>
    <head>
       <link rel="stylesheet" href="example.css">
    </head>
    <body>
        <div >W3cSchool</div>
    </body>
    </html>
    

    CSS代码:

    div {
       border :1px solid green;
       -webkit-border-radius: 24px;
    }
    


    通过添加前缀,能使CSS样式在不受支持的浏览器中生效。有时候为了兼容更多的浏览器,你可能需要对同一个样式属性进行​重复定义​增加不同的​前缀​。

    CSS3伪类

    CSS3伪类用于向某些​选择器​添加​特殊的效果​,它允许我们在不适用​javascript​等脚本的情况下去设置​web页面​中某些​特定的元素​的属性。

    ​伪类​通常以​ ":"(冒号)​开头。​:first-child​和​:last-child​是较为常用的伪类。

    ​:first-child​ 将会匹配该元素中的​第一个​子元素。

    ​:last-child​ 则反之,匹配​最后一个​子元素。

    ​:nth-child(n) ​ 将会选择该元素中的​第n个​子元素

    ​:nth-child(2n) ​ 将会选择该元素中的所有​偶数​子元素

    ​:nth-child(2n+1)​ 将会选择该元素中所有的​奇数​子元素

    HTML代码:

    <html>
    <head>
        <link rel="stylesheet" href="example.css">
    </head>
    <body>
        <div id="parent">
           <p>First w3cschool</p>
           <p>Second W3cschool</p>
           <p>Third w3cSchool</p>
           <p>Fourth W3cSchool</p>
           <p>Sixth W3cSchool</p>
        </div>
    </body>
    </html>
    

    CSS代码:

    #parent p:first-child {
       color: green;
       text-decoration: underline;   
    }
    #parent p:last-child {
       color: pink;
    }
    #parent p:nth-child(3) {
       color: blue;
    }
    #parent p:nth-child(2n) {
       font-size: 14px;  
    }
    #parent p:nth-child(2n+1) {
       font-size: 22px;
    }
    


    伪元素

    CSS伪元素​是用来添加一些​选择器​的​特殊效果​。

    在CSS中有​五个伪元素​,每个都以一个​双冒号(::)​开头:

    ​::first-line​- 选择器中文本的​第一行​
    ​::first-letter​ - 选择器中文本的​第一个字母​
    ​::selection​ - 选择用户​选择的元素​部分
    ​::before​ - 在元素​之前插入​一些内容
    ​::after​ - 在元素​之后插入​一些内容
    注意 :伪元素​和​伪类​的区别:

    ​伪类​选择元素基于的是​当前元素处于的状态​,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
    与伪类针对特殊状态的元素不同的是,​伪元素​是对元素中的​特定内容​进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
    在下面的例子中,​::first-line​伪元素用于为文本的​第一行​设置样式。
    HTML代码:

    <html>
    <head>
        <link rel="stylesheet" href="example.css">
    </head>
    <body>
        <div id="parent">
           <p>First w3cschool
           <br>Second W3cschool
           <br>Third w3cSchool
           <br>Fourth W3cSchool</p>
        </div>
    </body>
    </html>
    

    CSS代码:

    p::first-line {
       color: #AE4141;
    }
    

    执行结果:

    ::selection ​ 伪元素对​选定的文本​进行设置样式。

    CSS代码:

    p::selection{
       background: #AE4141;
       color: #fff;
    }
    p::-moz-selection{
       background: #AE4141;
       color: #fff;
    }
    

    执行结果:

    使用​-moz-​前缀,因为​Mozilla​​不支持​:: selection元素。


    background-clip属性

    background-clip​属性指定背景的​绘画区域​。

    该属性有三个不同的值:

    ​border-box​ - (默认)背景被绘制到边框的外边缘
    ​padding-box​ - 背景被绘制到填充的外边缘
    ​content-box ​- 背景被绘制在内容框中
    在下面的例子中,带背景剪辑的第一个div被设置为填充框; 在第二个div中它被设置为内容框。

    CSS代码:

    .first {
       border: 2px dotted black;
       padding: 20px;
       background: red;
       color: #fff;
       background-clip: padding-box;
    }
    .second {
       border: 2px dotted black;
       padding: 20px;
       background: red;
       color: #fff;
       background-clip: content-box;
    }
    

    background-clip​也适用于​背景图像​。

    CSS代码:

    div {
       height: 60px;
       background-image: url("https://7nsts.w3cschool.cn/images/w3c/index-logo.png");
       background-clip: content-box;
    }
    
    


    background-clip的透明边框

    css可以使用RGBA设置边框透明,RGBA在RGB的基础上多了控制alpha透明度的参数,我们使用RGBA设置边框颜色同时可以设置边框透明度。

    在​元素​上设置​透明边框​会在边框下面显示​元素​自己的背景。

    ​RGBA​在​RGB​的基础上多了控制​alpha透明度​的参数。

    R(红)、G(绿)、B(蓝)三个参数,正整数值的取值范围为:​0 – 255​或用百分数值的取值范围为:​0.0% – 100.0%​。

    ​超出​范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。​A参数​,取值在​0~1​之间,​不可为负值​

    在下面的示例中,我们使用RGBA将边框设置为透明,但实际上它们显示为纯灰色。

        border: 20px solid rgba(0, 0, 0, 0.3);
        width:200px;
        position:absolute;
        top:50px;
        left:50px;
        background-color:white;
    

    执行结果:

    通过将background-clip属性设置为padding-box,边框将变为透明。

    div {
       border: 20px solid rgba(0, 0, 0, 0.3);
       -moz-background-clip: padding-box;    
       background-clip: padding-box; 
       width:100%;
       position:absolute;
       background-color:white;
    }
    

    执行结果:

    透明效果是通过background-clip:padding-box实现的。 没有它,盒子的背景也在边界之下,使它不透明。

    层叠的背景图

    ​CSS3​中支持同时使用​多个背景图片​。

    通过​","逗号​分隔可以设置多个背景图。 第一个图像将出现在​顶部​,最后一个在底部。

    在下面的例子中,我们有两个背景图片:第一个是w3cschool标识(对齐底部和右侧); 第二个是风景图像(与左上角对齐)。

    CSS代码:

    div {
      width: 400px;
      height: 300px;
      background-image: url('https://7nsts.w3cschool.cn/images/w3c/header-logo.png'),url('https://7n.w3cschool.cn/attachments/image/20180125/1516870677823170.jpg');
      background-position: right bottom, left top;
      background-repeat: no-repeat;
    } 
    

    使用​background-position​属性可以更改​背景图像的位置​。各个属性值如下:

    可以通过使用background简写属性
    例:background: url(w3cschool.png) right top no-repeat, url(w3cschool.jpg) left top no-repeat;


    opacity属性

    CSS中的​opacity​属性支持为元素增加一个​不透明度​。

    利用​opacity​属性来改变图片的​透明度​,​opacity ​属性能够设置的值从 ​0.0 到 1.0​。值越小,图片越透明。

    下例中对同一张图片设置多种不透明度进行展示,可以明显看到差别。

    CSS代码:

    #img1 {
       opacity: 1;
    }
    #img2 {
       opacity: 0.5;
    }
    #img3 {
       opacity: 0.25;
    }
    

    在Internet Explorer中设置opacity
    要让​opacity​属性兼容所有的​IE版本​,请使用​filter:alpha(opacity = x) ​以及​opacity​属性。 x可以取值从0到100。

    x设置为​0​则是​完全透明​,反之设置为100是完全​不透明​。

    例如,为了使代码能够正常的使用​IE​,当图像的不透明度设置为0.4时,应该如下所示:

    CSS代码:

    #img {
      opacity: 0.4;
      filter: alpha(opacity=40);
    }
    

    alpha过滤器是一个仅限于微软的属性,而不是标准的css属性.


    CSS3动画

    动画让一个元素从一种风格逐渐转变为另一种风格。

    您可以根据需要更改任意数量的CSS属性。

    关键帧将保存元素在特定时间的样式

    @keyframes规则

    当您在@keyframes规则中指定CSS样式时,动画将在某些时间从当前样式逐渐变为新样式。

    要使动画起作用,必须将动画绑定到元素。

    以下示例将更改元素的背景颜色三次:动画完成50%,完成70%,动画完成100%时。

    div {
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: w3cschool;
        animation-duration: 1s;
    }
    @keyframes w3cschool {
        0%  {background-color: red;}
        50%  {background-color: yellow;}
        70%  {background-color: blue;}
        100% {background-color: green;}
    }
    

    执行结果:

    w3cschool是为动画设置的名字,您可以设置任意的名字
    @keyframes规则
    作为使用​百分比​的替代方法,您可以使用​from和to​关键字,其中:

    ​from​ - 为0%的​起始点​
    ​to​ - 为100%的​结束点​
    下面的两个例子是等价的,并产生相同的结果:

    @keyframes w3cschool {
       0% {background-color: red;}
       100% {background-color: green;}
    }
    @keyframes w3cschool {
       from {background-color: red;}
       to {background-color: green;}
    }
    

    animation-name 属性指定要用于元素的动画。
    animation-duration 属性指定所选动画的持续时间。
    如果未指定animation-duration属性,则动画将不起作用,因为默认值为0。

    最后修改:2022 年 12 月 05 日
    如果觉得我的文章对你有用,请随意赞赏