Css详解之(选择器)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/*
选择器: 选择器的作用就是找到对应的数据进行样式化。 1.标签选择器: 就是找到所有指定的标签进行样式化。 格式:
标签名{
样式1;样式2....
} 例子:
div{
color:#F00;
font-size:24px;
}
2. 类选择器: 使用类选择器首先要给html标签指定对应的class属性值。 格式:
.class的属性值{
样式1;样式2...
} 例子:
.two{
background-color:#0F0;
color:#F00;
font-size:24px;
} 类选择器要注意的事项:
1. html元素的class属性值一定不能以数字开头.
2. 类选择器的样式是要优先于标签选择器的样式。 3. ID选择器: 使用ID选择器首先要给html元素添加一个id的属性值。 ID选择器的格式: #id属性值{
样式1;样式2...
}
id选择器要注意的事项:
1. ID选择器的样式优先级是最高的,优先于类选择器与标签选择器。
2. ID的属性值也是不能以数字开头的。
3. ID的属性值在一个html页面中只能出现一次。 4. 交集选择器: 就是对选择器1中的选择器2里面的数据进行样式化。 选择器1 选择器2{
样式1,样式2....
} 例子:
.two span{
background-color:#999;
font-size:24px;
} 5. 并集选择器: 对指定的选择器进行统一的样式化。 格式:
选择器1,选择器2..{
样式1;样式2...
} span,a{
border-style:solid;
border-color:#F00;
}
6. 通过选择器: {
样式1;样式2...
} */ *{
text-decoration:line-through;
background-color:#CCC;
} </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="one" class="two">这个是<span>第一个div标签</span>...</div>
<div id="one" class="two">这个是<span>第二个div标签</span>...</div>
<span>这个是一个span标签</span><br/>
<a class="two" href="#">新闻标题</a> </body>
</html>
Css详解之(选择器)的更多相关文章
- CSS详解
Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...
- DIV+CSS详解
DIV+CSS详解 ✪DIV+CSS"这种叫法其实是一种不准确的叫法 在做笔记的最前面必须先给大家纠正一个错误,就是"DIV+CSS"这种叫法其实是一种不准确的叫法,是国 ...
- jquery的css详解(二)
jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...
- css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...
- css详解3
推荐学习链接:css盒模型 1.盒模型的常用属性 1.1.pading <html lang="en"> <head> <meta charset=& ...
- jquery的css详解(一)
通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个 ...
- JavaWeb之CSS详解
CSS的简介 1.CSS概述及作用 CSS:Cascading Style Sheets)是层叠样式表用来定义网页的显示效果.可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强 ...
- Css详解之(伪类选择器)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS之详解:active选择器
Active的一段话 active的英文解释为"积极的",表现在鼠标上就是点击的意思.关于active选择器最多的示例恐怕就是应用在链接上面的,然而打开链接是一个一瞬间的动作,这不 ...
随机推荐
- JavaScript 字符串(String)对象
String 对象用于处理已有的字符块. JavaScript 字符串 一个字符串用于存储一系列字符就像 "John Doe". 一个字符串可以使用单引号或双引号: 实例 var ...
- linux系统性能监控--内存利用率
Linux提供了对物理内存进行合理.高效的访问并可以访问潜在的海量虚存的技术.虚存通常稍多于操作系统实际拥有的内存容量,以便将较少使用的数据卸载到磁盘存储器上,同时又呈现出系统拥有大量物理内存的假象. ...
- Windows下Java调用BAT批处理不弹出cmd窗口
常规Windows下Java调用BAT方式肯定会弹出cmd窗口 Runtime.getRuntime().exec("cmd.exe /C start D:\\test.bat") ...
- Spark技术内幕:Storage 模块整体架构
Storage模块负责了Spark计算过程中所有的存储,包括基于Disk的和基于Memory的.用户在实际编程中,面对的是RDD,可以将RDD的数据通过调用org.apache.spark.rdd.R ...
- 使用Contacts Contract Content Provider操作通讯录最佳实践
Android向所有被赋予READ_CONTACTS权限的应用程序提供了联系人信息数据库的完全访问权限.Contacts Contract使用3层数据模型去存储数据,下面介绍Contacts Cont ...
- ubuntu安装qq
安装的版本是国际版 1.安装依赖库 sudo apt-get install libgtk2.0-0:i386 sudo apt-get install lib32ncurses5 2.下载 下载链接 ...
- React Native实现一个自定义模块
概述 在 前期介绍React Native 项目结构的时候,我们讲解过React的项目组成,其中说过 node_modules 文件夹,这是一个存放 node 模块的地方.我们知道React是用npm ...
- Swift基础之init方法,实例方法,类方法(静态方法)的使用(多标签Demo)
Xcode更新过后,有些方法都进行了改变,Demo中有变化的都进行了简单的标记,具体以后遇见再说 创建一个UIView类,用init方法创建两种类型,显示多标签,创建静态方法进行调用,创建类方法进行调 ...
- NET中小型企业级项目开发架构系列(一)
前端时间我们开发了基于Net的一套搭建sprint.NET+NHibernate+MVC+WCF+EasyUI等中小型企业级系统开发平台,现在把整个开发过程中的步步进展整理出来和大家分享,这个系列可能 ...
- 如何禁止App在后台运行以及如何保存和恢复App的状态
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 如果禁止App在后台运行 iOS上的App类似于Windows ...