CSS各类标签用法——选择器
<!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各类标签用法——选择器的更多相关文章
- css的基础用法之标签选择
一.css的4种引入方式 #.内联式 <p style="color: red;font-size: 50px;text-align: center">Egon是一个非 ...
- CSS样式----图文详解:css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
- CSS语法与用法小字典
前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...
- CSS样式----css样式表和选择器(图文详解)
本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- CSS简介,基础选择器,字体属性,文本属性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- H5 新标签用法及解释
HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(p ...
随机推荐
- svu update 遇到 Node remains in conflict
http://stackoverflow.com/questions/11774868/svn-checkout-without-restoring up vote4down votefavorite ...
- JAVA 1.7 流程控制语句 续
1. Java中的循环控制语句一共有3种,分别是while,do… while以及for循环.2. while循环,形式为:while(布尔表达式){//待执行的代码}3. do…while循环,新式 ...
- 去繁从简--简化Message和Signal设置
以往的版本中如果添加了消息或者信号类型的事件需要先在流程属性(设置流程ID的界面)中添加Message和Signal,之后再选择对应的事件在属性中的下拉框中选择已经定义的Message或Signal. ...
- oracle中trim,ltrim,rtrim函数用法
该函数共有两种作用:第一种,即大家都比较熟悉的去除空格.例子:--TRIM去除指定字符的前后空格SQL> SELECT TRIM(' dd df ') FROM dual;TRIM('DDDF' ...
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...
- Redis教程(三) list类型
一.概述: redis的list类型其实就是一个每个子元素都是string类型的双向链表.所以[lr]push和[lr]pop命令的算法时间复杂度都是O(1) 另外list会记录链表的长度.所以ll ...
- C# 利用NPOI 实现Excel转html
public void ExcelToHtml(string fileName, IWorkbook workbook) { ExcelToHtmlConverter excelToHtmlConve ...
- 当shiro做成动态URL管理时出现循环注入BeanCurrentlyInCreationException的问题解决方法
<!-- Shiro的Web过滤器 --> <bean id="shiroFilter" class="org.apache.shiro.spring. ...
- OpenCV学习笔记(二)——OpenCV环境变量配置
1. 假定电脑上已经安装了VS2010程序,若没有,首先安装vs2010. 下载OpenCV,下载的文件名为"OpenCV-2.3.1-win-superpack". 2. 解 ...
- java, mybatis, 调用mysql存储过程
Map<String, Object> bindinfo = new HashMap<String, Object>(); bindinfo.put(&q ...