第一篇见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. 智能指针之 unique_ptr

    对于动态申请的内存,C++语言为我们提供了new和delete运算符, 而没有像java一样,提供一个完整的GC机制,因此对于我们申请的动态内存, 我们需要时刻记得释放,且不能重复释放,释放后不能再去 ...

  2. Node.js 进程

    process 是全局对象,能够在任意位置访问,是 EventEmitter 的实例. 退出状态码 当没有新的异步的操作等待处理时,Node 正常情况下退出时会返回状态码 0 .下面的状态码表示其他状 ...

  3. ThreadLocal 遇上线程池的问题及解决办法

    ThreadLocal 称为线程本地存储,它为每一个使用它的线程提供一个其值(value)的副本.可以将 ThreadLocal<T> 理解成 Map<Thread, T>,即 ...

  4. 深度解读GoogleNet之Inception V1

    GoogleNet设计的目的 GoogleNet设计的初衷是为了提高在网络里面的计算资源的利用率. Motivation 网络越大,意味着网络的参数较多,尤其当数据集很小的时候,网络更容易发生过拟合. ...

  5. cassandra 常见问题

    摘要 本文主要介绍在部署cassandra集群以及使用cassandra过程中遇到的一些问题. 文章只发布在CSDN 和个人站点 更多nosql文章可以访问stone fang 个人主页 正文 Q1: ...

  6. 一个整数数组，长度为n，将其分为m份，使各份的和相等，求m的最大值。

    比如{3,2,4,3,6} 可以分成 {3,2,4,3,6} m=1; {3,6}{2,4,3} m=2 {3,3}{2,4}{6} m=3 所以m的最大值为3. bool isShare(int* ...

  7. 没事不要在for循环期间增减迭代序列的成员

    >>> arr=[4, 4, 9, 7, 7] >>> for i,a in enumerate(arr): arr.pop(i) print(i,a) 4 0 4 ...

  8. Java进阶(四十五)java 字节流与字符流的区别

    java 字节流与字符流的区别(转载)   字节流与和字符流的使用非常相似,两者除了操作代码上的不同之外,是否还有其他的不同呢?   实际上字节流在操作时本身不会用到缓冲区(内存),是文件本身直接操作 ...

  9. Dynamics CRM2016 新功能之从CRM APP中导出数据至EXCEL

    新版的CRM对移动端做了很多的改进,这归咎于微软对APP端的越来越重视.自己装了个IOS版的APP,体验了下基本的功能,比原来好用很多很顺滑,这里要介绍的是一个新的数据导出功能. 咱们进入case列表 ...

  10. Oracle 执行计划（Explain Plan） 说明

    如果要分析某条SQL的性能问题,通常我们要先看SQL的执行计划,看看SQL的每一步执行是否存在问题. 如果一条SQL平时执行的好好的,却有一天突然性能很差,如果排除了系统资源和阻塞的原因,那么基本可以 ...