第一篇见Css入门笔记01http://blog.csdn.net/qq_32059827/article/details/51406674

4、其他选择器

4.1、关联选择器

有时在页面上会出现我们需要让CSS样式作用在某个标签中的标签上。

格式：

父标签名  子标签名

<div>

div中的数据

<span>div中的span中的数据</span>

</div>

<span>span中的数据</span>

		当前的CSS要作用在div中的span标签上

		div span{

			color:red;

			font-size: 30px;

		}

4.2、组合选择器

			当一个CSS样式需要作用在多个标签上，可以使用class选择器

			还可以使用组合选择器：

			格式：

			标签名,标签名,....{

			}

			class或id选择器,标签名,....{

			}

			多个标签之间使用逗号，表示当前的CSS样式要作用多个标签上，

			如果多个标签之间使用空格，标签的标签的父子关系

			div span, div div,#two a

			当前的CSS样式需要作用在  div下的span标签、div下的div标签，还有id为two标签中的a标签上

		div span, div div,#two a{

			color:red;

			font-size: 30px;

		}

4.3、伪元素选择器

在CSS技术中，提前给我们假定了一些元素名称的选择器名字。把这些名字称为伪元素选择器。

    	演示伪元素选择器

	    	a:link 伪元素

	    		某个标签未被访问前的样式设定

	    	a:hover

	    		鼠标悬停在标签上时的css样式

	    	a:active

	    		鼠标点击下，但没有释放时的CSS样式

	    	a:visited

	    		标签被点击后，被访问过之后的CSS样式

	    	如果使用伪元素设置超链接，这4个伪元素有书写顺序。

	    		L   V    H   A

	<style type="text/css">

		a:link{

			color:red;

			font-size: 28px;

			text-decoration:overline;

			cursor: all-scroll;

		}

		a:visited {

			font-size:18px;

			text-decoration: line-through;

			color: gray;

		} 

		a:hover {

			font-size: 38px;

			text-decoration: none;

			color: blue;

		}

		a:active {

			font-size: 50px;

			text-decoration: underline;

			color: yellow;

		} 

		div{

			border: 1px solid red;

			width: 200px;

			height: 150px;

		}

		div:hover{

			color:blue;

			cursor: pointer;

		}

		input{

			/*去掉文本框的四个边框*/

			border: none;

			border-bottom: 1px dotted blue;

			color: gray;

		}

		input:focus{

			background-color: AliceBlue ;

		}

	</style>

	<script type="text/javascript">

		function _clear(){

			document.getElementById("name").value="";

		}

	</script>

  </head>

  <body>

  	<a href="#" >njupt</a>

  	<hr />

  	<div>数据</div>

  	用户名：<input type="text" value="请输入用户名" id="name" onclick="_clear();"/>

  </body>

5、盒子模型(重要)

在使用CSS控制页面上的标签时，所有的标签我们都可以给其设置边框。那么当前页面上的这个标签和其他标签之间可能会有距离，本标签中封装的子标签，或者本标签中封装的数据距离本标签本身边框也可能存在距离。我们把这个标签本身称为一个盒子。盒子与盒子之间可能有距离，盒子本身和盒子中存储的内容也会有距离，把这样的模型称为盒子模型。

CSS中使用border描述标签本身的边框，使用margin描述标签本身距离其他标签的距离，使用padding描述标签本身距离其内部封装的数据的距离。这些距离都可以分别描述上右下左四个距离。

Css技术入门笔记02的更多相关文章

  1. Css技术入门笔记01

    在学习html的时候,html中的标签都具备了特定功能,或者含义,以及相应的样式效果.可是在有些时候我们可能仅仅希望使用 html标签把要显示的数据封装起来,而不需要任何的样式效果.这时就需要单独的标 ...

  2. 【Zigbee技术入门教程-02】一图读懂ZStack协议栈的基本架构和工作机理

    [Zigbee技术入门教程-02]一图读懂ZStack协议栈的基本架构和工作机理 广东职业技术学院  欧浩源  ohy3686@foxmail.com Z-Stack协议栈是一个基于任务轮询方式的操作 ...

  3. 【Zigbee技术入门教程-02】一图读懂ZStack协议栈的核心思想与工作机理

    [Zigbee技术入门教程-02]一图读懂ZStack协议栈的核心思想与工作机理 广东职业技术学院  欧浩源   Z-Stack协议栈是一个基于任务轮询方式的操作系统,其任务调度和资源分配由操作系统抽 ...

  4. JAVA数据库编程(JDBC技术)-入门笔记

    本菜鸟才介入Java,我现在不急着去看那些基本的语法或者一些Java里面的版本的特征或者是一些晋级的知识,因为有一点.Net的OOP编程思想,所以对于Java的这些语法以及什么的在用到的时候在去发现学 ...

  5. css通用小笔记02——浮动、清除（三个例子）

    css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果  2.多个div并排显示 3.清除浮动(默认显示) 一.文字环绕效果: h ...

  6. 【模块04-大数据技术入门】02节-HDFS核心知识

    分布式存储 (1) 5PB甚至更大的数据集怎么存储 ? 所有数据分块,每个数据块冗余存储在多台机器上(冗余可提高数据块高可用性).另外一台机器上启动一个管理所有节点.以及存储在各节点上面数据块的服务. ...

  7. 【python3两小时快速入门】入门笔记02：类库导入

    昨晚遇到了一个问题:pip下载了request类库,以及在pyCharm的setting中下载了request类库,项目左侧也能显示出requst文件夹,但是引入报错! 这里贴一下我的解决方案,在此记 ...

  8. ES6入门笔记

    ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...

  9. Docker技术入门与实战 第二版-学习笔记-10-Docker Machine 项目-2-driver

    1>使用的driver 1〉generic 使用带有SSH的现有VM/主机创建机器. 如果你使用的是机器不直接支持的provider,或者希望导入现有主机以允许Docker Machine进行管 ...

随机推荐

  1. python中修改字符串的几种方法

    在Python中,字符串是不可变类型,即无法直接修改字符串的某一位字符.因此改变一个字符串的元素需要新建一个新的字符串.常见的修改方法有以下4种. 方法1:将字符串转换成列表后修改值,然后用join组 ...

  2. 条件语句，while循环语句：完整的温度转换程序

    while True: a = int(input('摄氏温度换为华氏温度请按 1\n华氏温度转为摄氏温度请按 2\n退出请按 3\n')) if a==1: c = float(input('请输入 ...

  3. Rails rspec测试报patch user_path(user) param not found: user的解决

    其实道理很简单,就是在User控制器的update方法中有一个验证: def user_params params.require(:user).permit(:name,:email,:passwo ...

  4. [多线程] 生产者消费者模型的BOOST实现

    说明 如果 使用过程中有BUG 一定要告诉我:在下面留言或者给我邮件(sawpara at 126 dot com) 使用boost::thread库来实现生产者消费者模型中的缓冲区! 仓库内最多可以 ...

  5. 建立自己的git服务器

    需求情景 就像金山快盘同步盘那样, 在开发环境windows 10和部署环境Ubuntu server 14.04之间建立同步关系.比如windows端多了一个a.txt文件,你推送后,Ubuntu端 ...

  6. nginx+tomcat负载均衡和session复制

    本文介绍下传统的tomcat负载均衡和session复制. session复制是基于JVM内存的,当然在当今的互联网大数据时代,有更好的替代方案,如将session数据保存在Redis中. 1.安装n ...

  7. AsyncTask函数化的封装,AsyncTask函数式的调用

    AsyncTask在本专栏已经做过详细的解析,但是AsyncTask函数式的调用这个概念对大多数人来说比较陌生.其实本质就是自己封装AsyncTask,让暴露的方法,看不到一点AsyncTask的身影 ...

  8. Mac上如何完美的转换epub至mobi供kindle观看

    网上有很多书籍资源的格式都是epub(我们不谈及pdf格式了,你懂得-),epub格式是无法直接在kindle上观赏的,除非你越狱kinde后,安装扩展插件 我们可以将epub转换为mobi格式,网上 ...

  9. Python excel 奇怪的通信规则

    直接: for i in range(1,n+1): print(i) if xls.getCell(i,1,1)=='id': res=[] xls.xlBook.Worksheets(i).Nam ...

  10. [shiro学习笔记]第四节 使用源代码生成Shiro的CHM格式的API文档

    版本为1.2.3的shiro API chm个事故文档生成. 获取shiro源代码 编译生成API文档 转换成chm格式 API 获取shiro源代码 shiro官网: http://shiro.ap ...