<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. Educational Codeforces Round 41 B、C、D

    http://codeforces.com/contest/961 B题 可以将长度为k的连续区间转化成1 求最大和 解析 简单尺取 #include <stdio.h> #include ...

  2. ZOJ 1298_Domino Effect

    题意: 多米诺骨牌效应:若干个关键牌相连,关键牌之间含有普通牌,关键牌倒下后其所在的行的普通牌全部倒下.求从推倒1号关键牌开始,最终倒下的牌的位置及时间. 分析: 最终倒下的牌的位置有两种情况,要么是 ...

  3. 18.9.23 PION模拟赛

    U32670 小凯的数字 题目背景 NOIP2018 原创模拟题T1 NOIP DAY1 T1 or DAY 2 T1 难度 是否发现与NOIP2017 DAY1 T1 有异曲同工之妙 说明:#10, ...

  4. Ubuntu 16.04安装ntopng流量监控软件

    ntop官方在2012年就已经不再更新,取代的是ntopng.ntopng具有Web页面,适合做网络管理监控软件.比如监控局域网内多台机器的上网情况等. 不过这个东西感觉不太准,最好的方案应该把安装n ...

  5. Eclipse错误：Syntax error on tokens, delete these tokens问题解决

    错误:Syntax error on tokens, delete these tokens 出现这样的错误一般是括号.中英文字符.中英文标点.代码前面的空格,尤其是复制粘贴的代码,去掉即可.

  6. 踩坑录-libreoffice fatal error com.sun.start.ucb.Interactive.AugmentedIOException: a folder could not be created

    错误概要: 1.LibreOffice可以正常使用: 2.启动tomcat报错如下: Fatal error The application cannot be started. ][context= ...

  7. maven 手动构建项目

    maven 手动构建项目 在空目录下面: D:\test>mvn -B archetype:generate -DarchetypeGroupId=org.apache.maven.archet ...

  8. Linux 下添加 Eclipse 桌面图标

    1. sudo gedit  /usr/share/applications/eclipse.desktop 2. 向eclipse .desktop中添加以下内容: [Desktop Entry] ...

  9. HDU1864_最大报销额(背包/01背包)

    解题报告 pid=1864">题目传送门 #include <cstdio> #include <cstring> #include <iostream& ...

  10. linux 经常使用网络命令

    1. ifconfig ifconfig主要是能手动启动.观察和改动网络接口的相关參数.能改动的參数许多,包含IP參数及MTU等都能改动,他的语法例如以下:  [root@linux ~]# ifco ...