<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. Spring3.2+mybatis3.2+Struts2.3整合配置文件大全

    0.配置文件目录 1.Spring配置 applicationContext-dao.xml <?xml version="1.0" encoding="UTF-8 ...

  2. Reorder the Books-HDU5500

    Problem Description dxy has a collection of a series of books called "The Stories of SDOI" ...

  3. codevs——2147 数星星

    2147 数星星  时间限制: 3 s  空间限制: 64000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 小明是一名天文爱好者,他喜欢晚上看星星 ...

  4. Java 输入一个正整数，按蛇形打印。

    参考博客:    http://yangyingming.com/article/371/ //输入一个正整数n(n<=30),输出n所对应的蛇形矩阵.举两个例子: //n=10时,蛇形矩阵为: ...

  5. tplink wr886n v5.0 ttl 接线方法

    我的倒是有ttl信息,但是全是乱码,换过RX和TX,也换过串口速率都没用,附上TTL接线图. ==================================2016-11-02========= ...

  6. NA路由①

    Cisco设备的端口:     在Cisco的路由器上都有一个带外网管口(Console/AUX):     Con口主要用于本地的con线进行本地网管:     AUX口主要与Modem连接通过固话 ...

  7. 手动安装Firefox Linux

    (2015-06-05 17:22:19)[编辑][删除] 转载▼ 标签: 股票 Firefox 下载文件以.tar和.bz2格式保存,必须从这些压缩包中提取文件.不想删除当前安装的 Firefox, ...

  8. AE After Effect 渲染如何输出设置

    各种输出设置值的对比情况. Microsoft Video1压缩方法情况(该模式下无法采用RGB+Alpha): 一 深度为"数千种颜色",缩放为1280×720(HDV/HDTV ...

  9. Mysql数据库再度使用

    查看数据库端口: show global variables like 'port'; 谨记:每一条sql结束的语句后都要接上分号. 在连接数据库时遇到过这种问题: Fatal error: Call ...

  10. react 项目实战（七）用户编辑与删除

    添加操作列 编辑与删除功能都是针对已存在的某一个用户执行的操作,所以在用户列表中需要再加一个“操作”列来展现[编辑]与[删除]这两个按钮. 修改/src/pages/UserList.js文件,添加方 ...