第一篇见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. miracl去除某些特殊信息

    只需要在mirdef.h中增加定义 #define MR_STRIPPED_DOWN  即可在编译的时候,去掉错误信息 #define MIRACL 32 #define MR_LITTLE_ENDI ...

  2. log4cxx用环境变量设置输出文件名

    log4cxx用环境变量设置输出文件名(金庆的专栏 2016.12)利用环境变量,可以用同一个log4j.xml来配置多个相似进程,输出日志到不同文件.例如多个BaseApp进程使用同一个BaseAp ...

  3. Docker: How to enable/disable HTTP Proxy in Toolbox

     1. docker-machine ssh default 2. sudo vi /var/lib/boot2docker/profile 3. # replace with your offi ...

  4. MS Office2016留下的坑

    背景 问题源自论坛用户反馈,他用管家有几年了,之前使用IE都很正常,没有任何问题,但是最近突然发现,启动IE时,就会出现系统错误提示:无法启动此程序,因为计算机中丢失 api-ms-win-core- ...

  5. Spring之WEB模块

    Spring的WEB模块用于整合Web框架,例如Struts 1.Struts 2.JSF等 整合Struts 1 继承方式 Spring框架提供了ActionSupport类支持Struts 1的A ...

  6. Linux 高性能服务器编程——I/O复用

    问题聚焦:     前篇提到了I/O处理单元的四种I/O模型.     本篇详细介绍实现这些I/O模型所用到的相关技术.     核心思想:I/O复用 使用情景: 客户端程序要同时处理多个socket ...

  7. PyCharm 开发Django ，错误汇总

    近期略微接触了一下Django.在学习的过程中可谓是坎坎坷坷,遇到了很多的问题. 下面就来谈一谈我对Django的一点点的见解. Django项目的创建 使用PyCharm来开发Django项目是非常 ...

  8. Android之获取屏幕的尺寸像素及获取状态栏标题栏高度

    在Android的实际开发中,会经常用到获取屏幕的尺寸的问题,以便设置一些布局在屏幕上的固定位置,从而适配各个屏幕的设备. 今天我就来讲一下怎么得到当前设备的屏幕像素吧: 一.在Activity中: ...

  9. 3.2、Android Studio在物理设备中运行APP

    当你构建一个Android应用时,在发布给用户之前,在物理设备上测试一下你的应用是非常必要的. 你可以使用Android设备作为运行.调试和测试应用的环境.包含在SDK中的工具让你在编译完成后在设备中 ...

  10. 【OpenGL】详解第一个OpenGL程序

    写在前面 OpenGL能做的事情太多了!很多程序也看起来很复杂.很多人感觉OpenGL晦涩难懂,原因大多是被OpenGL里面各种语句搞得头大,一会gen一下,一会bind一下,一会又active一下. ...