iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >使用css选择器怎么设置标签样式
  • 660
分享到

使用css选择器怎么设置标签样式

2023-06-08 08:06:55 660人浏览 安东尼
摘要

这篇文章将为大家详细讲解有关使用CSS选择器怎么设置标签样式,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。css选择器在html标签上设置style可以给标签设置属性:<div&nbs

这篇文章将为大家详细讲解有关使用CSS选择器怎么设置标签样式,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

css选择器

html标签上设置style可以给标签设置属性:

<div style="background-color: #2459a2;height: 48px;">啊啊啊</div>

我们还可以通过<head>标签里设置选择器,这样每种样式只需要写一遍

<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        <!--在这里写选择器-->    </style></head>

具体的选择器有很多种:

1、通过id来复制样式

#i1{    background-color: #2459a2;    height: 48px;}

在body里的标签这样用:但id不能写多个,所以还是不能多用

<div id="i1"></div>    <div id="i1"></div>但id不能写多个(不规范)

2、通过class来复制:

.c1{    background-color: #2459a2;    height: 60px;}

使用的时候:

 <div class="c1">1251251</div>能写多个    <div class="c1">1251253</div>能写多个

3、标签选择器:把某一标签都变成这个样式:

标签选择器:把所有的div标签变成黑底白字

div{    background-color: black;    color: white;}

4、层级选择器:中间是空格

        层级选择器:把span标签里div标签弄成这个样式
 

  span div{            background-color: black;            color: white;        }        层级:把c1里c2里的div设置成这个样式        .c1 .c2 div{            background-color: black;            color: white;        }

5、组合选择器:中间是逗号

<style>        组合选择器:#或者.都可以实现组合        #i1,#i2,#i3{            background-color: black;            color: white;        }        .c5,.c6,.c7{            background-color: black;            color: white;        }    </style>

6、属性选择器:

<style>                        input[type='text']{            width: 100px;            height: 200px;        }        把自定义的n的值为s1的标签设置成这个样式        input[n='s1']{            width: 100px;            height: 200px;        }    </style>

css的全称是什么

css的全称是Cascading Style Sheets(层叠样式表),它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

关于使用css选择器怎么设置标签样式就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

--结束END--

本文标题: 使用css选择器怎么设置标签样式

本文链接: https://www.lsjlt.com/news/252687.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 使用css选择器怎么设置标签样式
    这篇文章将为大家详细讲解有关使用css选择器怎么设置标签样式,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。css选择器在html标签上设置style可以给标签设置属性:<div&nbs...
    99+
    2023-06-08
  • css怎么设置a标签鼠标样式
    这篇文章主要介绍了css怎么设置a标签鼠标样式的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css怎么设置a标签鼠标样式文章都会有所收获,下面我们一起来看看吧。使用hover设置a标签的鼠标悬停样式 ...
    99+
    2023-07-04
  • css标签选择器怎么用
    css 标签选择器是一种选择 html 元素应用样式的工具,格式为:element-name { property: value; }。它们按 html 标记名称进行匹配,包括普通、上下...
    99+
    2024-04-25
    css 伪类选择器
  • html5中hr标签怎么用css设置样式
    本文小编为大家详细介绍“html5中hr标签怎么用css设置样式”,内容详细,步骤清晰,细节处理妥当,希望这篇“html5中hr标签怎么用css设置样式”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,...
    99+
    2024-04-02
  • css如何设置a标签鼠标样式
    在css中设置a标签鼠标样式的方法:1.使用hover设置鼠标悬停样式;2.使用link设置未访问鼠标样式;3.使用visited设置已访问鼠标样式;在css中设置a标签鼠标样式的方法使用hover设置a标签的鼠标悬停样式 a:h...
    99+
    2024-04-02
  • DIV标签内的CSS样式怎么使用
    本篇内容主要讲解“DIV标签内的CSS样式怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“DIV标签内的CSS样式怎么使用”吧!一、介绍与解释DIV标签内...
    99+
    2024-04-02
  • css标签样式怎么写
    为了使用 css 编写标签样式,请遵循以下步骤:指定标签名:要应用样式的 html 标签的名称。设置属性:要更改的样式属性,例如颜色、大小或边距。指定值:属性的特定值,例如红色、10px...
    99+
    2024-04-25
    css
  • 如何在div标签内设置css样式
    这篇文章将为大家详细讲解有关如何在div标签内设置css样式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在div标签内,可以使用style属性设置css样式;style属性用于规定标签元素的行内样式,语...
    99+
    2023-06-15
  • css标签选择器使用时要注意什么
    本篇内容介绍了“css标签选择器使用时要注意什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!作用: 根据指定的标签名称, 在当前界面中找到...
    99+
    2023-06-20
  • div+css布局中怎么选择使用html标签
    这篇文章主要介绍“div+css布局中怎么选择使用html标签”,在日常操作中,相信很多人在div+css布局中怎么选择使用html标签问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2024-04-02
  • vue-router-link选择样式怎么设置
    本篇内容主要讲解“vue-router-link选择样式怎么设置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue-router-link选择样式怎么设置”吧!vue-router-link选...
    99+
    2023-06-30
  • css怎么清除li标签样式
    这篇文章主要介绍了css怎么清除li标签样式的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css怎么清除li标签样式文章都会有所收获,下面我们一起来看看吧。首先,在页面中使用ul、li标签创建一个列表;&nbs...
    99+
    2023-07-04
  • 怎么用CSS修改选择框样式
    这篇文章主要介绍怎么用CSS修改选择框样式,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!   如何修改选择框样式   选择框是制作表单必不可少的一部分,还可以下拉以添加选择并自定...
    99+
    2024-04-02
  • css怎么设置所有标签
    本篇内容介绍了“css怎么设置所有标签”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!将所有标签都列出来,语法“body,ol,ul,h2,h...
    99+
    2023-06-20
  • 使用css如何选择background-image和img标签
    本篇内容介绍了“使用css如何选择background-image和img标签”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!  如果你希望别...
    99+
    2023-06-04
  • div style标签怎么内嵌CSS样式
    这篇文章主要介绍“div style标签怎么内嵌CSS样式”,在日常操作中,相信很多人在div style标签怎么内嵌CSS样式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • css怎么设置a标签不可用
    本篇内容主要讲解“css怎么设置a标签不可用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css怎么设置a标签不可用”吧!首先,在页面中创建一个a标签; <body>&nb...
    99+
    2023-07-04
  • CSS层级选择器怎么设置
    这篇文章主要介绍了CSS层级选择器怎么设置的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS层级选择器怎么设置文章都会有所收获,下面我们一起来看看吧。   为了让网页元素的...
    99+
    2024-04-02
  • 怎么设置css样式
    CSS(层叠样式表)是Web开发中的基本组成部分之一,它使开发者可以对网页进行样式和布局的控制。对于新手来说,CSS学习起来可能会有一定难度,但是一旦掌握了基本的CSS设置方法,开发出更好的网页将变得更加容易。本文将分享一些关于如何设置CS...
    99+
    2023-05-14
  • css怎么设置li标签并排
    这篇文章主要介绍了css怎么设置li标签并排的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css怎么设置li标签并排文章都会有所收获,下面我们一起来看看吧。首先,在页面中创建一个li标签列表; <...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作