<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>标题标签</title> <xxx></xxx>这是一个成对标签，</xxx>表示该标签的结束标签。

<style type="text/css"> </style>/*这个标签，<style>标签用于为HTML定义样式。type 属性是必需的，定义 style 元素的内容。唯一的可能值“text/css”*/

/*在HTML中，Style内包含选择器，选择器有，标签选择器、类选择器、ID选择器、子选择器、包含（后代）选择器、通用选择器以及最后的伪类选择符和分组选择符。*/

/*标签选择器：这个是最简单的选择器，只需要在style内添加 标签｛样式｝如在h1标签中让字体变为红色：h1{ color:red;}

类选择器：它的组成部分，.stren{  各类样式 如 color:red;} 然后使用class=“stren”（这里的stren是类选择器名称，可以用任意英文代替，但不能是汉字以及拼音。）为标签设置一个类，如<span class="stren"></span>  注：该选择器可以单独使用，也可以与其他元素结合使用。例：。.stren{font-size:20px}   <span class="stren" ></span>。

ID选择器：ID选择器，与类选择器相同也不同，它的组成部分，#stren{各类样式},然后他不想类选择器那样用CLASS而是直接<span id="stren"></span>(这里的stren也是选择器名称，和类选择器一样。)注：ID选择器只能使用一次。也就是说，同一个选择器名称只能出现一次。而类选择器同一个名称可以使用N次、

子选择器：子选择器用于选择指定标签元素的第一代子元素 语法如下.food>li{border:1px solid red;}  <ol class="food"><li><ol><li></li></ol></li></ol>这里子选择器只制定第一个<li></li>的样式，它的第二代元素<li></li>样式不会改变。

后代选择器：语法为.first span{color:red;} 后代选择器包含所有的第一代以及后代的样式。<p class="first"></p>.p标签中，所有的标注标签span内的第一代一级后代的样式。<ul class="fist"></ul>也一样适用。

通用选择器：通用选择器和标签选择器差不多，只是标签选择器，选择器是文本中的标签。而通用选择器，选择器用*｛｝表示。它的作用是匹配HTML中所有的标签元素，很强大，用一个通用标签改全部。

伪类选择符：它是给HTML中不存在的标签设置样式，这里不存在的标签表示“标签中的某种状态”。比如说，我们给HTML中一个标签元素的鼠标滑过状态来设置字体颜色。不过目前为止，可以兼容所有浏览器的伪类选择符就是A标签上实用：hover。语法为a:hover{color:red;}这样设置后，<a href="地址连接">文字</a>  添加了伪类选择符，你鼠标划过“文字”会发现字体变成红色。

分组选择符：如果你想给两个标签选择器添加同一种样式，那么可以使用分组选择符。比如h1{ color:red;} span{ color:red;} 把这两个用分组选择符就是h1,span{color:red;}

CSS各类标签用法——选择器的更多相关文章

  1. css的基础用法之标签选择

    一.css的4种引入方式 #.内联式 <p style="color: red;font-size: 50px;text-align: center">Egon是一个非 ...

  2. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  3. CSS语法与用法小字典

    前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...

  4. CSS样式----css样式表和选择器（图文详解）

    本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...

  5. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  6. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  7. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  8. CSS简介，基础选择器，字体属性，文本属性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  9. H5 新标签用法及解释

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(p ...

随机推荐

  1. Links for Introduction To Calculus

    The links to download the material for the course Introduction To Calculus are provided in the follo ...

  2. docker设置并运行部分命令及原文

    1.设置开机启动 If you want Docker to start at boot, you should also: $ sudo systemctl enable docker 2. 启动, ...

  3. 简述jpg。Gif。png-8.png-24的区别，分别使用场景

    gif.jpg.png格式的图片在网站制作中的区别 一.Gif格式特点: 1.透明性,Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha透明). 2.动画,G ...

  4. tomcat部署web项目的3中方法

    1.直接把项目复制到Tomcat安装目录的webapps目录中,这是最简单的一种Tomcat项目部署的方法,也是初学者最常用的方法. 2.在tomcat安装目录中有一个conf文件夹,打开此文件夹,其 ...

  5. MultipeerConnectivity框架，近场通信的基本使用

    Multipeer connectivity是一个使附近设备通过Wi-Fi网络.P2P Wi-Fi以及蓝牙个人局域网进行通信的框架.互相链接的节点可以安全地传递信息.流或是其他文件资源,而不用通过网络 ...

  6. js获取当前日期时间格式为“yyyy-MM-dd HH:MM:SS”

    废话不多说,直接上代码! <!DOCTYPE html><html><head>    <meta charset="utf-8"> ...

  7. 反射(Reflection)

    反射主要用于在程序运行期间动态解析相关类的类名,命名空间,属性,方法并进行相应操作,以下通过两个简单的例子进行了说明: 示例1:调用程序集内部方法,运行时动态获取相关类的信息,包括类名,命名空间等信息 ...

  8. usb中的传输模式

    别人总结的一个usb传输模式,保存一下 usb中的endpoint(端点)和传输模式 端点: 端点位于USB 外设内部,所有通信数据的来源或目的都基于这些端点,是一个可寻址的FIFO. 每个USB 外 ...

  9. Python之路 day3 函数定义 *args及**kwargs

    #!/usr/bin/env python # -*- coding:utf-8 -*- #Author:ersa import time # def logger(): # time_format ...

  10. 编写我的第一个CGI代码——python学习

    在编程学习网站学习Python语言,学习到cgi编程章节遇到了一些小问题,课程介绍的为linux环境的Apache配置方法,具体如下: [linux环境配置方法:] 在进行CGI编程前,确保您的Web ...