第一篇见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笔记六（函数的参数、返回值）

    一 调用函数 在写函数之前,我们先尝试调用现有的函数 >>> abs(-9) 9 除此之外,还有我们之前使用的len()等.可以用于数据类型转换的 int() float() str ...

  2. PHP学习（4）——数据类型

    PHP 支持 8 种原始数据类型. 四种标量类型:(标量类型即为基本类型) boolean(布尔型) integer(整型) float(浮点型,也称作 double) (由于历史原因,float也叫 ...

  3. Scala：类，对象和特征（接口）

    http://blog.csdn.net/pipisorry/article/details/52902609 Scala类和对象 类是对象的抽象,而对象是类的具体实例.类是抽象的,不占用内存,而对象 ...

  4. sum,filter和map参数里面的玄机

    首先是sum函数. 最常见的用法似乎是: >>> sum([1,2,3]) 6 但其实这是默认首个元素是数字0.我们可以指定其他数字: >>> sum([1,2,3 ...

  5. 【Unity Shader】2D动态云彩

    写在前面 赶在年前写一篇文章.之前翻看2015年的SIGGRAPH Course(关于渲染的可以去selfshadow的博客里找到,很全)的时候看到了关于体积云的渲染.这个课程讲述了开发者为游戏< ...

  6. Android中的语言和字符串资源

    在任何情况下,从您的应用代码中提取 UI 字符串并将其存放在外部文件中都是个好办法.Android 在每个 Android 项目中都提供一个资源目录,从而简化了这一过程. 如果您是使用 Android ...

  7. 19 主线程向子线程发送信息（handler）

    package com.fmy.handler; import android.app.Activity; import android.os.Bundle; import android.os.Ha ...

  8. 剑指Offer——滴滴笔试题+知识点总结

    剑指Offer--滴滴笔试题+知识点总结 情景回顾 时间:2016.9.18 15:00-17:00 地点:山东省网络环境智能计算技术重点实验室 事件:滴滴笔试   总体来说,滴滴笔试内容体量不算多, ...

  9. FFmpeg源代码简单分析：结构体成员管理系统-AVClass

    ===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...

  10. iPhone全部设备分辨率速查

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交 ...