精华内容
下载资源
问答
  • css标签选择器
    万次阅读
    2018-10-31 23:29:43

    一、css的选择器学习:
                1、标签选择器:
                标签名{样式1;样式2;........}
                作用:会将当前网页内的所有该标签增加相同的样式
                2、id选择器:
                #标签的id属性值{样式值1;.......}
                作用:给某个指定的标签添加指定的样式
                3、类选择器:
                .类选择器名{样式1........}
                作用;给不同的标签添加相同的样式
                4、全部选择器:
                *{样式1....}
                作用:选择所有的html标签。并添加相同的样式

    以上的4个标签选择器师最常用的,应重点掌握
        -------------------------------------------------------------
                5、组合选择器:
                选择器1,选择器2,....{样式1.。。。            }
                作用:解决不同的选择器之间重复的问题
                6、子标签选择器:
            二、css的使用过程:
                1、声明css代码域
                2、使用选择器选择要添加的样式的标签
                     根据需求来选择:
                            使用*选择器给整个页面添加基础样式
                            使用类选择器给不同的标签添加基础样式
                            使用标签选择器给某类标签添加基础样式
                            使用id、属性选择器、style属性声明方式给个标签添加个性化样式
            三、书写样式单
                边框设置>border:solid 1px;
                字体设置>font-size:10px;设置字体大小
                     >font-family:"黑体";设置字体的格式
                     >font-weigt:bold;设置字体加粗
                字体颜色设置>background-color;颜色
                背景颜色设置>backround-img:url;图片的相对路径
                         >bacground-repeate:no-repeate;设置图片不重复
                         >bacground-size;cover;图片平铺整个页面
                高宽设置
                浮动设置>float:left|right
                行高设置>line-heft:10;

               四、一些CSS选择器的格式如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>css的选择器学习</title>
    		<!--声明css代码-->
    		<style type="text/css">
    			/*标签选择器*/
    			table{
    				width: 300px;
    				height: 200px;
    				border: solid 1px;
    				background-color: red;
    			}
    			/*id选择器*/
    			#t1{
    				background-color: gray;
    			}
    			/*类选择器*/
    			#t1{
    				color: rgd;
    			}
    			/*组合选择器*/
    			.commom,table{
    				background-color: blue;
    			}
    			/*子标签选择器*/
    			ul li a{color: black;}
    		</style>
    	</head>
    	<body>
    		<h3>css的选择器学习</h3>
    		<hr />
    		<hr />
    		<table id=t1 class="commom">
    			<tr>
    				<td>1</td>
    				<td>2</td>
    				<td>3</td>
    			</tr>
    			<tr>
    				<td>4</td>
    				<td>5</td>
    				<td>6</td>
    			</tr>
    			<tr>
    				<td>7</td>
    				<td>8</td>
    				<td>9</td>
    			</tr>
    		</table>
    		<table>
    			<tr>
    				<td>10</td>
    				<td>11</td>
    				<td>12</td>
    			</tr>
    			<tr>
    				<td>13</td>
    				<td>14</td>
    				<td>15</td>
    			</tr>
    			<tr>
    				<td>16</td>
    				<td>17</td>
    				<td>18</td>
    			</tr>
    		</table>
    		<b>css学习</b>
    		<hr />
    		<ul>
    			<li><a href="">安徽</a></li>
    			<li><a href="">浙江</a></li>
    			<li><a href="">上海</a></li>
    		</ul>
    		<a href="">哈哈</a>
    	</body>
    </html>
    

    五、一些css样式的使用,直接用代码的形式展现给大家:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>css的样式使用</title>
    		<!--声明css代码域-->
    		<style type="text/css">
    			/*添加网页背景图*/
    			body{
    				background-image: url(img/03.jpg);/*添加背景图片*/
    				background-repeat: no-repeat;/*设置图片不重复*/
    				background-size: cover;/*设置图片平铺*/
    			}
    			/*标签选择器*/
    			table{
    			}
    			/*设置toble的行高*/
    			tr{
    				height: 40px;
    			}
    			/*设置宽度*/
    			td{
    				width: 100px;/*设置宽*/
    				border: solid 1px red;/*添加边款及其颜色和大小*/
    				border-radius: 10px;/*设置表格的角度*/
    				background-color: orange;/*设置背景颜色*/
    				text-align: center;/*设置文本位置*/
    				color: darkblue;/*设置文本颜色*/
    				font-weight: bold;/*设置文本加粗*/
    				letter-spacing: 10px;/*设置文本间距*/
    			}
    /*-------------------------------------------------------------*/
                  ul{
                  	
                  }
                  li{
                  list-style: none;/*去除li的标签识符*/
                  /*display: inline;*/
                  float: left;/*设置菜单左悬浮*/
                  }
                  li a{
                  	color: black;
                  	text-decoration: none;/*设置下划线*/
                  	font-weight: bold;
                  	font-size: 20px;
                  	margin-left: 20px;
                  }
    		</style>
    	</head>
    	<body>
    		<h3>css的样式使用</h3>
    		<hr />
    		<table>
    			<tr>
    				<td>姓名</td>
    				<td>性别</td>
    				<td>爱好</td>
    			</tr>
    			<tr>
    				<td>张三</td>
    				<td>男</td>
    				<td>跳舞</td>
    			</tr>
    			<tr>
    				<td>李四</td>
    				<td>男</td>
    				<td>打球</td>
    			</tr>
    		</table>
    		<hr />
    		<ul>
    			<li><a href="">图片</a></li>
    			<li><a href="">视频</a></li>
    			<li><a href="">学术</a></li>
    			<li><a href="">词典</a></li>
    			<li><a href="">地图</a></li>
    		</ul>
    	</body>
    </html>
    

     

    更多相关内容
  • CSS 标签选择器

    千次阅读 2020-09-04 09:57:05
    本节我们来学习 CSS 中的...本节我们来讲标签选择器标签选择器CSS 中最常见的选择器。像前面几节中,我们举例时用到的都是标签选择器。 通过前面的学习我们知道在 HTML 页面中引入 CSS 样式最好的方法是引入外部

    本节我们来学习 CSS 中的选择器,选择器是 CSS 里面一个很重要的概念,HTML 中的所有标签样式,都是通过不同的 CSS 选择器进行控制的。我们只需要通过选择器,就可以对不同的 HTML 标签进行选择,并指定各种样式声明。

    在 CSS 中三三种最基本的选择器,分别是标签选择器、类选择器(class)、ID选择器。本节我们来讲标签选择器,标签选择器是 CSS 中最常见的选择器。像前面几节中,我们举例时用到的都是标签选择器。

    通过前面的学习我们知道在 HTML 页面中引入 CSS 样式最好的方法是引入外部样式,也就是将 CSS 代码单独放置到一个 .css 文件内,然后再引入这个 CSS 文件。所以后面我们讲 CSS 样式都会使用这种方式来引入 CSS 样式。

    标签选择器

    我们知道一个 HTML 页面是通过很多标签组成的,CSS 标签选择器就是用来声明这些标签的,因为每一个 HTML 标签的名称都可以作为相应的标签选择器的名称。

    示例:

    例如我们来看一个例子,下面是一段 HTML 代码:

    <!DOCTYPE>
    <html>
        <head>
        	<meta charset="utf-8">
            <title>CSS学习(9xkd.com)</title>
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body>
            <h3>侠课岛</h3>
            <p>你好,侠课岛!</p>
        </body>
    </html>
    

    如果我们要为这两个标签定义 CSS 样式,就可以直接在 .css 文件内通过标签选择器来声明样式:

    h3{
    	color: red ;
    }
    p{
    	color: green;
    }
    

    记得在 HTML 中通过 <link> 标签来引入 CSS 文件,此时在浏览器中的演示效果如下所示:

    从上述代码中,我们看到,CSS 语法就是由选择器和声明块 {} 组成,每个声明块中可以包含一个或多个样式声明,并且每条声明后面以分号 ; 结尾。

    当然除了上述例子中的 ph3 标签可以作为标签选择器,其他的例如 htmlbodyaimg 等所有标签都是可以作为标签选择器的。

    标签选择器的使用其实很简单,下一节我们会讲剩下的两个基本选择器,也就是类选择器和ID选择器的使用。

    链接:https://www.9xkd.com/

    展开全文
  • CSS|标签选择器

    千次阅读 2021-07-25 14:26:15
    CSS|标签选择器 1.简介 选择器的作用是选择页面上的某一个或者某一类元素 基本选择器: 标签选择器 类选择器 id选择器 2.标签选择器 CSS文件: /* 标签选择器 会选择到页面上所有的该标签元素 */ h1{ color: red...

    CSS|标签选择器


    1.简介

    选择器的作用是选择页面上的某一个或者某一类元素

    基本选择器:

    1. 标签选择器
    2. 类选择器
    3. id选择器

    2.标签选择器

    CSS文件:

    /*
    标签选择器
    会选择到页面上所有的该标签元素
    */
    h1{
        color: red;
        background-color: aqua;
        border-radius: 10px;
    }
    

    HTML文件:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三种基本选择器</title>
      <link rel="stylesheet" href="Style-demo03.css">
    </head>
    <body>
    
    <h1>标题</h1>
    
    </body>
    </html>
    

    在这里插入图片描述


    人生没有白走的路,每一步都算数!

    展开全文
  • css标签选择器、类名选择器、多类名选择器 标签选择器:顾名思义,标签选择器就是在css样式中通过标签名字来对标签的样式来进行修改。 代码如下: <!DOCTYPE html> <html lang="en"> <head>...

    css标签选择器、类名选择器、多类名选择器


    标签选择器:顾名思义,标签选择器就是在css样式中通过标签名字来对标签的样式来进行修改。
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
            p {   
    			color: pink;
            }
            div {
            	color: purple;
            }
            </style>
        </head>
        <body>
        	<p>人生哪有一路高歌,还不是会有低鸣。</p>
        	<p>但我们在低鸣时,千万不要忘记我们的雄心壮志。</p>
        	<p>待我们一鸣惊人时,让世间万人铭记。</p>
            <div>人生哪有一路高歌,还不是会有低鸣。</div>
            <div>但我们在低鸣时,千万不要忘记我们的雄心壮志。</div>
            <div>待我们一鸣惊人时,让世间万人铭记。</div>
    
        </body>
    </html>
    

    效果如下:
    在这里插入图片描述
    在上面的代码中可以在css样式中可以看到标签名字来控制样式,现在属于p标签的字体都是pink,属于div标签的字体都是purple。
    类名选择器:就是通过类名来控制样式的改变,那么什么是类名呢?比如<div class="yangshi"></div>,class里面的就是类名,那么类名在css样式又是怎样被调用呢?
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
            .fenyun {
            	color: orange;
            }
            .fanyou {
            	color: blue;
            } 
            </style>
        </head>
        <body>
        	<div class="fenyun">风带走了云,却带不走我忧伤的心情。</div>
        	<div class="fanyou">谁能解决这心中的烦忧,罢了,随风去吧!</div>
        	<div>善!</div>
        </body>
    </html>
    

    效果如下:
    在这里插入图片描述
    在上面的代码中,代码是通过.fenyun,.fanyou来调用的。
    多类名选择器:就是在一个标签中插入多个类名来控制
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
            .font20 {
            	font-size: 20px;
            }
            .font14 {
            	font-size: 14px;
    
            }
            .pink {
            	color: pink;
            }
            .fontWeight {
            	font-weight: bold;
            }
            </style>
        </head>
        <body>
        	<div class="pink fontWeight font20">昏暗的灯光中,似乎让这寒冷的冬天带来了一丝温暖。</div>
        	<div class="font20">人们保持着向发光的地方走去的姿态,笑容渐渐显露在脸上。</div>
        	<div class="font14 pink">但是他们早已变成了一座座冰雕。</div>
        	<div class="font14">这末世般的景象在世界各种都在发生着。</div>
        </body>
    </html>
    

    效果如下:
    在这里插入图片描述可以通过多个类名一起改变同一个标签的样式。

    展开全文
  • 1.标签选择器 语法格式: <style> 标签名{ 属性:属性值; 属性:属性值; } </style> 标签选择器主要针对的是页面中某个标签中的样式设置,它的作用范围是这个页面内所有写在该标签内的内容,标签...
  • CSS标签选择器

    万次阅读 2017-07-04 00:00:27
    1.什么是标签选择器? 作用:根据指定的标签名,在当前界面中找到所有该名称的标签,然后设置属性。 格式: 标签名{ 属性:值; } 注意点: 1. 标签选择器选定的是当前界面中所有该名称的标签,而不能单独选定某一...
  • CSS嵌套选择器

    千次阅读 2022-01-12 21:58:04
    只有满足层次关系最里层的选择器所对应的标签才会应用样式 注意:使用空格时不区分父子还是后代,使用CSS3中新增的>时必须是父子关系才行 <!DOCTYPE html> <html lang="en"> <head> <...
  • 标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2...
  • css标签选择器总结及权重

    千次阅读 2019-07-04 15:39:00
    1.标签选择器 就是html代码中的标签,如 p{font-size:12px;line-height:1.6em;} 上面的css样式代码的作用:为p标签设置12px字号,行间距设置1.6em的样式。 2.类选择器 语法: .类选器名称{css样式代码;} 3.ID选择器...
  • css选择器有哪些?

    千次阅读 2022-04-04 17:50:37
    2.3、标签选择器 p,h1 {} 2.4、后代选择器 div h1 {} 2.5、子选择器 div>h1 {} 2.6、兄弟选择器(所有的兄弟) ul~h1 {} 2.7、相邻兄弟选择器 ul+h1 {} 2.8、属性选择器 li[name='sss'] {} 2.9、伪类选择器 ...
  • CSS选择器优先级

    千次阅读 2022-02-14 11:07:06
    CSS选择器优先级 工作中修改css样式时,是不是会经常遇到 写的css样式不生效 改这个地方结果别的地方样式也跟着一起变了 明明是一样的css代码为啥换个...标签选择器 div span p li … 类选择器 属性选择器 … 2 选择符
  • 一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式。本文章向码农介绍css 标签/元素选择器以及其实例,需要的码农可以参考一下。 【标签选择器】 一个完整的HTML页面是有...
  • css标签选择器,类选择器

    千次阅读 2017-02-09 19:13:35
    一,类选择器<!DOCTYPE html> <title>10-css选择器.html</title> <!-- 类选择器,根据指定class找到对应的标签,然后设置属性 1,格式: .类名{ 属性:值
  • jQuery使用了一套css选择器,共有5种,即标签选择器,ID选择器,类选择器,通用选择器和群组选择器,现分述如下: 1. 标签选择器 用于选择HTML页面中已有的标签元素,又称元素选择器,格式:$(“element”),如$(...
  • CSS选择器五大基本选择符

    千次阅读 2021-08-05 00:48:58
    *(通配符)*通配符选择器,经常用于css reset(样式重置),清理标签的默认样式,但现在一般不提倡直接使用*了,主要是*会匹配所有标签,相当耗资源。*在css的优先级中是最低的。* {margin: 0; padding: 0;} 也可以用*...
  • css常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,我们一起来看看吧! 一. 通配符选择器 通配符选择器常用' * '号表示,他是所有选择器里作用范围最广的,能匹配...
  • css里面有哪些选择器

    千次阅读 2021-07-07 14:36:16
    css中选择器有:1、简单选择器;...E 标签选择器,匹配所有使用E标签的元素 .info class选择器,匹配所有class属性中包含info的元素 #footer id选择器,匹配所有id属性等于footer的元素 二、属性选择器
  • CSS中模拟父元素选择器

    千次阅读 2021-08-04 08:49:57
    很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器。至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章。简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来实现相同...
  • css选择器失效问题解决方法

    千次阅读 2019-04-24 14:52:37
    今天写前台的时候发现一个问题,我的css文件中id选择器失效了,前台页面F12控制台中也没有对应的css内容,很是奇怪,内容是这样的: html文件中: css文件中: 前台: 那,真的是空空如也哈,后来找了下资料,...
  • 此时要使234有颜色,需要用到父子选择器,虽说用之前的标签选择器可以让它有颜色,但是123也会有颜色,所以用到为父子关系的父子选择器,这样就可以精确的让234变色而不使123变色,使用的方法就是父级标签+空格+子级...
  • 标签选择器 类选择器 层级选择器(后代选择器) id选择器 组选择器 伪类选择器 3. 标签选择器 根据标签来选择标签,以标签开头,此种选择器影响范围大,一般用来做一些通用设置。 示例代码 <style type=...
  • CSS——标签选择器,类选择器

    千次阅读 2020-06-26 21:04:00
    文章目录选择器(重点)CSS基础选择器标签选择器(元素选择器)类选择器类选择器小案例小案例 制作一个简易Google图标 选择器(重点) 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这...
  • 标签选择器:针对一类标签 ID选择器:针对某一个特定的标签使用 类选择器:针对你想要的所有标签使用 通用选择器(通配符):针对所有的标签都适用(不建议使用) 下面来分别讲一讲。 1、标签选择器:选择器...
  • 标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”。 <style type="text/css"> p{ font-size:14px; } <p>css CSS基础选择器编写 ID选择器:规定用#来定义...
  • CSS选择器

    千次阅读 2022-03-29 22:56:42
    详细介绍CSS选择器的用法和分类
  • 1.CSS规定拥有更高确定度的选择器优先级更高 2.如果样式中包含冲突的规则,且它们具有相同的确定度。那么,后出现的规则优先级高。 优先级:由高到低(从上到下) !important 内联(1,0,0,0) id: (0,1,0,0) 类:(0,0,1,...
  • css选择器标签选择器和id选择器

    千次阅读 2017-02-09 18:26:54
    一,标签选择器<!DOCTYPE html> <title>08-css标签选择器.html</title> <!-- 标签选择器,根据指定的标签名称,找到当前界面所有的该名称的标签,然后设置属性 1,格式: 2,注意点:
  • css中的各种选择器

    千次阅读 2016-09-06 23:39:55
    根据css各种规则的选择器在dom结构中找到相应的位置,从而...除了常用的标签选择器,类选择器和ID 选择器之外,还有一些常用的选择器。整理如下: -------------------------------------------------------------------
  • CSS —— 选择器

    千次阅读 2021-09-28 16:01:13
    CSS选择器笔记(阮一峰): 1、基础选择器 2、复合选择器 目的是为了选择更准确更精细的目标元素标签。 复合选择器就是由两个或者多个基础选择器,通过不同方式组合而成的。 3、CSS选择器的三大特性: 1)层叠...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 225,009
精华内容 90,003
关键字:

css标签选择器

友情链接: HuoFeng2.0.5.35 .zip