<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. SharedPreferences保存用户偏好参数

    package com.example.administrator.myapplication; import android.content.Context; import android.cont ...

  2. ZOJ - 3829 Known Notation(模拟+贪心)

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3829 给定一个字符串(只包含数字和星号)可以在字符串的任意位置添加一个数字 ...

  3. POJ 3279 Fliptile【枚举】

    题意: 又是农夫和牛的故事...有m*n个黑白块,黑块的背面是白块,白块背面是黑块,一头牛踩一块,则这个块的上下左右的方块都会转动,问至少踩多少块,才会使所有块都变成白色? 分析: 还是开关问题,同样 ...

  4. BitMap算法 .net实现 用于去重并且排序，适用于大型权限管理 ，大数据去重排序

    BitMap利用byte特性 针对排序+去重  最佳实践: 100万条数据的排序+去重用时200毫秒左右 static void Main(string[] args) { ]; /*alias*/ ...

  5. P2910 [USACO08OPEN]寻宝之路Clear And Present Danger 洛谷

    https://www.luogu.org/problem/show?pid=2910 题目描述 Farmer John is on a boat seeking fabled treasure on ...

  6. hdu5618(cdq分治求三维偏序)

    题意:给n(n<=100000)个点,坐标为(xi,yi,zi)(1<=xi,yi,zi<=100000),定义一个点A比一个点B小,当且仅当xA<=xB,yA<=yB, ...

  7. mysql性能调优——Query优化

    上节谈了关于mysql锁定机制的优化方案,下面来谈一下Query优化——Mysql Query Optimizer 当Mysql Query Optimizer接受到从Query Parser过来的Q ...

  8. FDMemTable内存表操作

    unit Umemtable; interface uses System.SysUtils, System.Types, System.UITypes, System.Classes, System ...

  9. Django学习系列之重写User模型和登录验证

    重写User模型 Django内置的User模型可能不适合某些项目,我们可能要基于内置的添加一些字段 创建users app startapp users 修改settings.py配置文件,覆盖默认 ...

  10. python内置全局变量

    vars()查看内置全局变量 以字典方式返回内置全局变量 #!/usr/bin/env python # -*- coding:utf8 -*- print(vars()) #输出 # {'__bui ...