第一篇见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. 两行代码搞定Android视图扩散切换效果

    用最简单的方式来实现Android视图扩散切换效果. 一.概述 这两天时间动手撸了个视图扩散切换效果的控制器,API兼容至Android4.0,更方便我们在视图切换过程中有炫酷的过渡效果.本来是想实现 ...

  2. Visual studio debug—Process with an Id of 5616 is not running的解决方法

    今天调试的时候,碰到下面的问题 打开项目的csproj文件,拉到最下方找我我图中红框中的部分,删除它即可.

  3. linux 防火墙操作

    root/12345 (只能用ROOT操作)iptables -I INPUT -s x.x.x.x -p tcp --dport 8091 -j ACCEPT   #允许x.x.x.x访问本机的80 ...

  4. 360浏览器不能打开CSDN登陆页面

    碰见个奇葩问题: 使用360浏览器(广大程序员不要鄙视我~ 我有我的理由)不能打开csdn的登陆页面~~你登陆的时候,他就一直在那里打转~~ 但是用ie就可以打开登陆页面.... 怎么回事???难道C ...

  5. ROS机器人程序设计（原书第2版）补充资料 （叁） 第三章 可视化和调试工具

    ROS机器人程序设计(原书第2版)补充资料 (叁) 第三章 可视化和调试工具 书中,大部分出现hydro的地方,直接替换为indigo或jade或kinetic,即可在对应版本中使用. ~$ rosl ...

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

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

  7. SublimeText3解决中文乱码

    1)安装Sublime Package Control.     在Sublime Text 3上用Ctrl+-打开控制台并在里面输入以下代码,Sublime Text 2就会自动安装Package ...

  8. svn数据仓库配置，权限配置

    svn服务的开启有两种方式, ·        自带的svnserve服务(访问地址类似于svn://192.168.80.18/repos/) ·        与Apache配合使用  (访问地址 ...

  9. ListView嵌套GridView

    首先,我们通过两个实例来了解下本篇文章所讲的重点,看下图: 微博: 陌陌: 大家应该对这两款软件并不陌生,接下来,我将列举下本文将要实现的几个点: 1.ListView嵌套GridView,互不冲突, ...

  10. 安卓程序员要拿到5000和1w的薪资，分别需要掌握哪些技术?

    这个是我在逛知乎的时候发现的一个帖子,在这里小小的整理了一下,收集了一些评论,然后我分享出来,希望对自己还有同行有所帮助. 著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 链接 ...