选择器分类和样式表分类

最新推荐文章于 2024-07-06 20:00:00 发布
最新推荐文章于 2024-07-06 20:00:00 发布
阅读量407 收藏 2
点赞数 1
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44793200/article/details/89631206
版权

1.用选择器标签的通用属性：

id:元素的唯一标识属性,自定义id名称,不能重名

 name:元素的名称，可以重名

 style属性：编写元素的样式

 class:引用样式的属性

2选择器分类：

选择器格式：

选择器名称{

        属性名：属性值；

        属性名：属性值；

        ......

 }

（1）标签选择器：

对页面上所有的同名的标签生效

标签器格式：

标签器名称{

        属性名：属性值；

        属性名：属性值；

        ......

 }

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.             p{
  8.                 font-size: 50px;
  9.                 font-weight: bold;
  10.                 color:#336336;
  11.                 background: yellow;
  12.                 text-decoration: underline;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.     <p>标签选择器</p>
  18.     </body>
  19. </html>

（2）id选择器:

定义好的类样式的名称’出现任意标签中作为属性

id器格式：

#is器名称{

        属性名：属性值；

        属性名：属性值；

        ......

 }

 

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.             #span{
  8.                 font-size: 50px;
  9.                 color:chartreuse;
  10.                 text-align: center;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.     <span id="span">　一叶落便知秋意浓，即使江南的绿色褪色之期晚了几许，
  16.         南飞的大雁也会在天空一会儿排成一字，
  17.         一会儿排成人字，秋天真的来了，中秋真的来了，国庆真的来了。</span>
  18.     </body>
  19. </html>

（3）类选择器：

对所有使用class属性样式的标签生效

class=’提前定义好的类样式的名称’出现任意标签中作为属性

 

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.             .hi{
  8.                 
  9.                 margin-left: 50px;
  10.             }
  11.             .p{
  12.                 font-size: 25px;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.                 <h1 class="hi">人日思归</h1>
  18.                 <p class="p">入春才七日，离家已二年。</p>
  19.                 <p class="p">人归落雁后，思发在花前</p>
  20.     </body>
  21. </html>

 

（4）选择器的优先级：

id选择器>类选择器>标签选择器

三类选择器同时作用在一个标签上：

              如果样式冲突：看优先级

              如果不冲突：样式叠加

（5）类选择器

根据标签的类属性，class，来选择页面元素

3样式表分类：

（1）行内样式：

Style：出现任意标签中作为属性，只能影响当前标签

    <span style="font-size: 20px;background-color: cornflowerblue; ">
            欢迎来到html的课题</span>

 

 

（2）内部样式表

定义在head标签中，只能在前页面使用

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.             .hi{
  8.                 
  9.                 margin-left: 50px;
  10.             }
  11.             .p{
  12.                 font-size: 25px;
  13.             }        </style>
  14.     </head>
  15.     <body>
  16.                 <h1 class="hi">人日思归</h1>
  17.                 <p class="p">入春才七日，离家已二年。</p>
  18.                 <p class="p">人归落雁后，思发在花前</p>
  19.     </body>
  20. </html>

（3）外部样式

--在head中需要引用：

<link rel="stylesheet" type="text/css" href=""/>

 

 

href是引用样式的路径

1创建一个css文本，在css文件写样式

代码如下：

  1.     .hi{
  2.                 
  3.                 margin-left: 50px;
  4.             }
  5.             .p{
  6.                 font-size: 25px;
  7.             }

weixin_44793200
关注
专栏目录
jQuery手机端分类菜单选择插件
06-24
然后，通过jQuery选择器找到相应的元素，并调用插件方法进行初始化配置。例如： ```html <script src="https://code.jquery.com/jquery.min.js"></script> <script src="path/to/plugin.js"></script> $...
27 选择器的分类
hello_sunny123的博客
07-03 621
一：选择器分类 选择器分为基础选择器和复合选择器两个大类,我们这里先讲解一下基础选择器。 基础选择器是由单个选择器组成的 基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器 ...
常用选择器有
io_123io_123的博客
12-03 7050
常用选择器有： 1、标签选择器；2、类选择器；3、ID选择器；4、全局选择器；5、组合选择器；6、继承选择器；7、伪类选择器。 第一种是标签选择器，也成为元素选择器。标签选择器的基本形式如下：tagName{property:value}，其中tagName是标签名称，property是css的属性。 第二种是类选择器 ，类选择器用来为一系列标签定义相同的呈现方式，常用的语法是 .classValue{property:value}。其中classValue是类选择器的名称，这是由cs...
HTML中CSS样式选择器的种类,css中的四种基本选择器类型分别是什么
weixin_32101685的博客
06-05 1406
css中的四种基本选择器类型分别是标签选择器、ID选择器、类选择器和通用选择器。css中的选择器分为两大类，分别是基本选择器和扩展选择器。本教程操作环境：windows10系统、css3，本文适用于所有品牌的电脑。CSS的选择器分为两大类：基本选择器和扩展选择器，其中有4种基本选择器。(相关学习视频分享：css视频教程)基本选择器：1、标签选择器：针对一类标签2、ID选择器：针对某一个特定的标签使...
CSS6大种选择器(超详细!!!!!!)
热门推荐
weixin_52682014的博客
11-05 3万+
注意：1.所有的标签上都有class属性，class属性的属性值成为类名（类似于起了一个名）/* 选择属性名为title和属性值以ab结尾的元素，设置字体为30px *//* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 *//*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 *//* 选择属性名为title和属性值含有c的元素，设置背景色为绿色 */语法：[属性值*=属性名]{} */作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式。
CSS：选择器 / 14种类型
最新发布
snowball的博客
07-06 3191
CSS中的UI元素伪类选择器主要用于定义用户界面元素的特殊状态样式，如链接的悬停（hover）、激活（active）状态，以及输入框的焦点（focus）状态等。：尽量使用更具体的选择器来定位你想要样式化的元素，这样可以减少不必要的性能开销，并提高样式表的可维护性。然而，需要注意的是，当通用选择器与其他选择器结合使用时，它仍然会匹配所有元素，但样式只会应用到那些也符合其他选择器条件的元素上。符号，它选择某个元素之后的所有兄弟元素（共享相同父元素），而不仅仅是紧接在后面的元素。在CSS中，ID选择器以井号。
CSS选择器分类汇总图片和文档
08-11
下面是对“CSS选择器分类汇总”相关知识点的详细说明。 1. 基本选择器： - **类型选择器**：例如`h1`，`p`，通过元素名称来选择元素。 - **ID选择器**：使用`#`后跟ID名称，如`#header`，每个页面中ID应是唯一的...
Vue实现多标签选择器
10-15
总的来说，Vue实现多标签选择器的关键在于利用Vue的数据绑定、组件化和事件处理机制，结合Element UI提供的组件，构建出一个可交互的标签选择器。用户可以通过点击选择和取消标签，已选标签会实时更新并展示在页面上...
原生js手写tree树形分类选择插件
05-06
"原生js手写tree树形分类选择插件"就是一个这样的例子，它允许用户通过树状结构来展示和操作数据，比如进行分类选择。这个插件利用了JavaScript的灵活性，结合jQuery库以增强DOM操作和事件处理，提供了高效且易于...
Dreamweaver课件：第8章 样式表.pptx
04-17
【Dreamweaver课件：第8章 样式表】主要介绍了如何使用CSS（Cascading Style Sheet）样式表来控制网页元素的外观和布局。CSS样式表是网页设计的重要工具，它允许设计师集中管理文本、表格、图像、表单等元素的样式，...
为成为前端架构师的一天奋斗的gggxc--CSS笔记--1.选择器
gaoxiaochan的博客
08-03 405
1.标签选择器：又叫元素选择器，文档的元素就是最基本的选择器，使用元素名称直接选中元素即可。 <style> p{ height:100px; border:1px solid red; } </style> <p>one</p> <p>two</p> <p>three</p> 2.类选择器：以点"."开头，后面紧跟一个类名。类名不允许有空格，与元素中cla
选择器分类
qq_57423665的博客
04-13 125
选择器分为和两个大类，复合选择器是建立在基础选择器之上,对基础选择器进行组合形成的。
《css的四种引入方式和选择器》
weixin_51746436的博客
06-03 229
css有四种引入方式 css的四种引入方式
C#样式分类
m0_57756558的博客
05-08 260
样式分类 属性样式 类似于在HTML中直接通过HTML元素属性设置的样式 适用于复用度不高的一些属性 内联样式 内联样式和模板的限制 样式和模板属性在技术上可以通过以下两种方式之一进行设置。可以使用特性语法（属性语法）来引用资源中定义的样式，例如< 对 象 Style="{StaticResource myResourceKey }" .../> 。或者，可以使用属性元素语法来定义内联样式 例如： 特性用法更常见 2、内联样式 内联样式实际..
Design System & Application - Chapter 4 分类样式 Type & Style
-1
04-25 119
本篇主要介绍文本部分通过其作用进行通用性分类，并描述通用样式（主要涉及到 字重 的使用，颜色以 中性色 为主），和 UI 组件相关的部分不在此说明。
选择器的种类
weixin_50713646的博客
09-27 6641
选择器的种类 选择器共有六种类型： 1.（元素）标签选择器 2.id选择器 3.（类）class选择器 4.后代选择器 5.子代选择器 6.交集选择器 例子： 1.(元素)标签选择器： 标签名{样式1；样式2；........} name{color:red;} 2.id选择器： #标签的id{属性值：样式值1；.......} #name{color:red;} 3.（类）class选择器： .标签的类名{属性值：样式值1；......
css样式表：样式分类，选择器。样式属性，格式与布局
diqiao5268的博客
08-22 189
样式表分类： 1.内联样式表， 和html联合显示，例：<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立的区域内嵌在网页里，必须写在head里边。 <style type="text/css"> p //格式对p起作用 {样式； } </style> 3.外部样式表...
CSS基础之选择器的分类
胡振涛
03-31 627
目录 基础选择器 ------》标签选择器 ------》类选择器 -----》id选择器 -----》通配符选择器 复合选择器 -----》后代选择器 -----》子选择器 -----》并集选择器 -----》伪类选择器 ----》链接伪类选择器 -----》focus伪类选择器 这几天一直在学习CSS基础，学习和接触了很...
CSS基础：样式表分类与选择器详解
“YK-Day04笔记.pdf”涵盖了CSS基础知识，包括CSS的定义、分类（内联样式、内部样式和外部样式）以及常用选择器的介绍。 CSS（层叠样式表）是用于美化和控制HTML网页外观的重要工具。它允许开发者通过定义不同的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值