<html>

<head>

  <meta charset="utf-8">

  <title>选择符、链接、盒子模型、显示隐藏元素</title>

<style>

a:link{

    color:red;

}

a:visited{

    color:black;

}

a:hover{

    color:blue;

}

a:active{

    color:green;

}

</style>  

</head>

<body>

<!--链接设置-->

<ul style="list-style:none">

<li>

<a href="#" id="link">

a:link

链接未访问前的样式red

</a>

</li><li>

<a href="http://www.baidu.com" id="visited">

a:visited

链接已访问的样式black

</a>

</li><li>

<a href="#">

a:hover

鼠标悬停到链接的样式blue

</a>

</li><li>

<a href="#"    style="text-decoration:none">

a:active

活动的链接，即是获得焦点的链接（比如点击鼠标左键不放）green

</a>

</li>

</ul>

<hr/>

<!--选择符-->

CSS选择符------六种选择符

通配选择符（*）

* {  color: red;  }

<br/>

类型选择符（HTML标签）

a

{

    text-decoration: none;

}

<br/>

包含选择符（空格）

li span

{

    color: red;

    font-weight: bold;

}

<br/>

ID选择符（#）

#p1

{

    color: red;

}

<br/>

Class选择符（.）

.center {

            text-align: center;

            width: 200px;

            border: solid 1px #ccc;

}

<br/>

伪类选择符（:）

a:link

a:visited

a:hover

a:active

<br/>

<hr/>

<!--盒子模型-->

盒子模型<br/>

描述一个HTML元素形成的矩形盒子。<br/>

外边距（margin）&nbsp;&nbsp;margin: 20px 15px 10px 5px;<br/>

边框（border）&nbsp;&nbsp;border: [border-style] [border-width] [border-color]&nbsp;&nbsp;border: solid 5px #ccc;<br/>

如果需要精确控制每个边框的样式，可以设置如下属性：

border-left-style/border-left-width/border-left-color<br/>

border-style值有：none、dashed、dotted、double、groove、inset、outset、ridge、solid

<br/>

内边距（padding）&nbsp;&nbsp;padding: 10px 20px;<br/>

宽度和高度（width/height）&nbsp;&nbsp;<br/>

<br/>

偏移量<br>

--------------------------------------------<br/>

|外边距______________________________      |<br/>

|       |边框______________________   |     |<br/>

|      |    |内边距__________     |  |     |<br/>

|      |    |      |         |    |  |     |<br/>

|      |    |      |         |    |  |     |<br/>

|      |    |      |         |    |  |     |<br/>

|      |    |      |_________|    |  |     |<br/>

|      |    |_____________________|  |     |<br/>

|      |_____________________________|     |<br/>

|                                          |<br/>

--------------------------------------------<br/>

<hr/>

<!--显示隐藏元素-->

display<br/>

--block <br/>

--块对象的默认值。对象之后添加新行。 <br/>

--none<br/>

--隐藏对象。隐藏的对象不占据物理空间。<br/>

--inline<br/>

--内联对象的默认值。对象后不添加行。<br/><br/>

visibility<br/>

--visible<br/>

--对象可视 <br/>

--hidden<br/>

--对象隐藏，隐藏的对象占据物理空间<br/><br/>

display:none; 与 visibility:hidden 的区别？<br/>

display:none;不占据页面空间<br/>

visibility:hidden; 占据页面空间<br/><br/>

</body>

</html>

CSS之选择符、链接、盒子模型、显示隐藏元素的更多相关文章

  1. css关系选择符

    <!Doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. CSS学习篇核心之——盒子模型

    概述 关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识. 盒子模型 元素框的最内部分是实际的内容(element),直接包围内容的是内边距 ...

  3. CSS设计指南之理解盒子模型

    原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...

  4. CSS 组合选择符

    CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) ...

  5. CSS：CSS 组合选择符

    ylbtech-CSS:CSS 组合选择符 1.返回顶部 1. CSS 组合选择符 CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CS ...

  6. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  7. CSS初识- 选择器 &背景& 浮动& 盒子模型

    # CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...

  8. CSS 样式、布局、盒子模型

    Css内容: 常用样式: 字体    颜色   背景 布局: 浮动   定位   标签特性 标签盒子模型:  边距   边框 动画: 旋转 渐变 注意:Css引路径从css文件里找   Html和js ...

  9. CSS属性选择符

    属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red ...

随机推荐

  1. mysql用户自定义变量

    可以先在用户变量中保存值然后在以后引用它:这样可以将值从一个语句传递到另一个语句.用户变量与连接有关.也就是说,一个客户端定义的变量不能被其它客户端看到或使用.当客户端退出时,该客户端连接的所有变量将 ...

  2. 无法打开物理文件 "X.mdf"。操作系统错误 5:"5(拒绝访问。)"。 (Microsoft SQL Server，错误: 5120)解决

    环境 SQLServer 2008 R2 问题 附加数据库出现“无法打开物理文件 "X.mdf".操作系统错误 5:"5(拒绝访问.)". (Microsoft ...

  3. Jmeter执行java脚本结束时提示：The JVM should have exited but did not.

    使用jmeter对dubbo进行压测时,需要使用jmeter的sampler里的java请求 使用./jmeter.sh -n -t test.jmx -l test.jmx -o -e test后台 ...

  4. 【CV论文阅读】Image Captioning 总结

    初次接触Captioning的问题,第一印象就是Andrej Karpathy好聪明.主要从他的两篇文章开始入门,<Deep Fragment Embeddings for Bidirectio ...

  5. python的字典有些类似js对象

    python的字典有些类似js对象 dict1 = {} dict1['one']= '1-one' dict1[2] = '2-tow' tinydict = {'name':'tome','cod ...

  6. 《软件project》——编码

       编码的目的是使用选定的程序设计语言,把模块的过程描写叙述翻译为用该语言书写的源程序. 源程序应该正确可靠.简明清晰,并且具有较高的效率.在编程的步骤中,要把软件具体设计的表达式翻译成为编程语言的 ...

  7. MySQL具体解释（21）------------缓存參数优化

    数据库属于 IO 密集型的应用程序.其主要职责就是数据的管理及存储工作. 而我们知道,从内存中读取一个数据库的时间是微秒级别,而从一块普通硬盘上读取一个IO是在毫秒级别,二者相差3个数量级.所以,要优 ...

  8. 【Swift】学习笔记(二)——基本运算符

    运算符是编程中用得最多的,其包含一元,二元和三元 三种运算符.swift也和其他编程语言一样基本就那些,以下总结一下,也有它特有的运算符.比方区间运算符 1.一元运算符 =   赋值运算符,用得最多的 ...

  9. [Erlang危机](5.1.4)端口port

      原创文章,转载请注明出处:server非业余研究http://blog.csdn.net/erlib 作者Sunface 或port drivers15.   全程跟踪端口数会对诊断负载或进程泄漏 ...

  10. html css 仿微信底部自己定义菜单

    近期几个月一直从事微信开发,从刚開始的懵懂渐渐成长了一点. 今天认为微信底部自己定义菜单,假设能在html的页面上也能显示就好了. 记得曾经看过某个网页有类似效果.查找了该网页的css.  ok如今h ...