<!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. 在Excel中制作复合饼图

    在Excel中插入饼图时有时会遇到这种情况,饼图中的一些数值具有较小的百分比,将其放到同一个饼图中难以看清这些数据,这时使用复合条饼图就可以提高小百分比的可读性. 文中的复合饼图只是方便以后记忆,故不 ...

  2. a error of misunderstanding

    Last summer vacation, a classmate contacted with me and we finished a intelligent car project with i ...

  3. bate阶段项目总结

    Beta里程碑总结 设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 要解决的问题是如何实现消息的发布与查看以及个人主页的实现:定义的基本清楚,团队 ...

  4. linux网卡混杂模式

    混杂模式就是接收所有经过网卡的数据包,包括不是发给本机的包,即不验证MAC地址.普通模式下网卡只接收发给本机的包(包括广播包)传递给上层程序,其它的包一律丢弃.一般来说,混杂模式不会影响网卡的正常工作 ...

  5. centos 忘记密码

    装了个  centos 6.8  安装的时候 要输入 新用户和密码 用 新的用户密码 进去后 各种没权限  重新修改 root 密码   一切OK 步骤 1.重新启动Centos,在启动过程中,长按“ ...

  6. springmvc的foward和redirect跳转简单解析

    Spring MVC 中,我们在返回逻辑视图时,框架会通过 viewResolver 来解析得到具体的 View,然后向浏览器渲染.假设逻辑视图名为 hello,通过配置,我们 配置某个 ViewRe ...

  7. 严重：Error listenerStart

    转自: http://1985wanggang.blog.163.com/blog/static/7763833200942611050436/ 近日浏览论坛,发现好多人提问,都说在运行web程序时, ...

  8. R语言实战（二）数据管理

    本文对应<R语言实战>第4章:基本数据管理:第5章:高级数据管理 创建新变量 #建议采用transform()函数 mydata <- transform(mydata, sumx ...

  9. TableView与delegate、dataResource

    小梦这几天学习tableView是深有体会了 废话不多说,来一波 首先,创建一个测试项目 如图 创建好,在项目结构中另外弄一个GroupFile,创建storyBoard和CocoaTouch 在st ...

  10. Centos7下配置Redis开机自启动

    最近在做作业的时候需要用到Redis缓存,由于每次重启服务器都需要重新启动Redis,也是忒烦人,于是就有了这一篇博客,好,废话不多说. 只有两个步骤: 设置redis.conf中daemonize为 ...