<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. spring 邮件服务

    https://www.cnblogs.com/ityouknow/p/6823356.html https://www.cnblogs.com/nfcm/p/7843935.html

  2. 18.9.22 noip模拟赛

    此题为找规律.期望100 实际100 #include<cstdio> #include<cstring> #include<iostream> #include& ...

  3. easyui根据id获取列索引

    easyui根据row中的某个元素获取该列的索引,看了下api好像没有直接的方法,那只能自己写了 首先,id只是一个概念,不一定非得id,只要该列是唯一值,或者是主键就行. 假如我的列是这样的结构 { ...

  4. CCNA一些要点

    考试范围:     TK640-801(Cisco Certified Network Associate 640-801 ICND Course Notes).     信息单位:     1Byt ...

  5. Centos7 samba 匿名共享 简单config

    安装Samba yum install samba samba-client samba-common -y 备份原始的Samba配置文件: mv /etc/samba/smb.conf /etc/s ...

  6. react 项目实战（五）渲染用户列表

    现在我们需要一个页面来展现数据库中记录的用户. 在/src/pages下新建UserList.js文件. 创建并导出UserList组件: import React from 'react'; cla ...

  7. MySQL中文參考手冊

    非常好的中文手冊: 链接:http://www.sdau.edu.cn/support/mysq_doc/manual_toc.html

  8. python爬虫【第1篇】

    一.文件读写 1.打开文件 # 以读文件模式代开new.txt f=open(r"c:\new.txt",“r”) f=open("c:\new.txt",“r ...

  9. 2015ACM/ICPC Asia Regional Changchun Online /HDU 5438 图

    Ponds                                   Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 1310 ...

  10. 【hdu3544】 Alice's Game

    给一块n*m的巧克力,Alice只能垂直切,切成A*m和B*m,并且A+B=n,Bob只能横切,只能切成A*n和B*n,并且A+B=m. 对于n*n的这种巧克力,谁先切了第一刀,就直接让对方有切两刀的 ...