最新公告
  • 欢迎您光临欧资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 要想将CSS样式应用于特定的元素,一起学习吧

    关注我,一起学习~

    要将 CSS 样式应用于特定的 HTML 元素,首先需要找到目标元素。在 CSS 中,样式规则中执行此任务的部分称为选择器(selector)。说白了,选择器就是用来定位目标元素的。以下是一些常用的基本选择器。

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

    标签选择器是指使用HTML标签名称作为选择器,根据标签名称进行分类,为页面中的某类标签指定统一的CSS样式。

    其基本语法如下:

    标签名称{

    属性1:属性值1;

    属性2:属性值2;

    }

    或者

    元素名称{

    属性1:属性值1;

    属性2:属性值2;

    }

    标签选择器最大的优点是可以快速统一页面上同类型标签的样式。同时,这也是他的劣势:无法设计出差异化的款式。

    类选择器

    类选择器用“.”标识。(点)后跟类名。

    其基本语法如下:

    。班级名称{

    属性1:属性值1;

    属性2:属性值2;

    属性3:属性值3;

    }

    调用标签时,使用 class=”class name”。

    类选择器的最大优点是您可以为元素对象定义单独或相同的样式。可以选择一个或多个标签。

    多类名称选择器

    我们可以为标签分配多个类名,以达到更多的选择目的。

    注意:

    样式显示效果与HTML元素中类名的顺序无关,而与CSS样式书写的上下顺序有关。

    每个类名应该用空格分隔。

    多类名选择器在以后布局比较复杂的时候还是用得比较多。

    id 选择器

    id 选择器由“#”标识,后跟 id 名称。

    其基本语法如下:

    #idname{

    属性1:属性值1;

    属性2:属性值2;

    属性3:属性值3;

    }

    在此语法中,id 名称是 HTML 元素的 id 属性的值。大多数 HTML 元素都可以定义 id 属性。元素的 id 值是唯一的,只能对应文档中的特定元素。用法与类选择器基本相同。

    id选择器和类选择器的区别

    W3C标准规定,在同一页面内,不允许有同名的id对象,但允许同名的类。

    一个类选择器就像一个人的名字,可以重复使用很多次。

    id选择器(id)就像一个人的身份证号,在国内是唯一的,不能重复。只能使用一次。

    id 选择器和类选择器最大的区别在于使用的次数。每个 id 属性在每个 html 文档中只能出现一次,而类选择器可以出现多次。

    通配符选择器

    通配符选择器用“*”表示,它是所有选择器中最广泛的,可以匹配页面中的所有元素,因此通配符选择器中定义的样式可以应用于所有的HTML标签。

    其基本语法如下:

    * {

    属性1:属性值1;

    属性2:属性值2;

    属性3:属性值3;

    }

    注意:

    由于*会匹配所有元素,从而影响网页的渲染时间css中的通配选择器,所以在实际网页设计中css中的通配选择器,需要统一设置的元素会使用“组选择器”一次性设置。

    组选择器

    如果要对多个元素应用相同的样式,可以用逗号分隔多个应用相同样式的选择器作为 CSS 规则选择器(组选择器)。

    结尾

    站内大部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
    欧资源网 » 要想将CSS样式应用于特定的元素,一起学习吧

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    欧资源网
    一个高级程序员模板开发平台

    发表评论