CSS关于节点

id 选择器

<style>
#para1
{
    text-align:center;
    color:red;
} 
</style>

<p id="para1">Hello World!</p>

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

<style>
p.center
{
    text-align:center;
}

<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>

.center
{
    text-align:center;
}
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>

body
{
    background-image:url('gradient2.png');
    background-repeat:repeat-x;
        图片水平平铺

        body
    {
        background-image:url('img_tree.png');
        background-repeat:no-repeat;
    }
    只显示一次，不平铺

  background:#ffffff url('img_tree.png') no-repeat right top;
  margin-right:200px;
  右边空出200,图片在右部，上部显示
}
</style>

h1 {text-align:center;}  文本居中
p.date {text-align:right;}  文本从右部显示
p.main {text-align:justify;} 文本随着浏览器大小而改变

图片跟文本的对齐方式
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}

设置元素的文本方向
div.ex1 {direction:rtl;}
<div>一些文本。 默认书写方向</div>
<div class="ex1">一些文本。从右到左的书写方向。</div>

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

text-decoration 属性主要用于删除链接中的下划线：
a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */

css中的display是设置元素显示的方式,block是一块状元素的方式显示，inline是以[内联元素](https://www.baidu.com/s?wd=%E5%86%85%E8%81%94%E5%85%83%E7%B4%A0&tn=SE_PcZhidaonwhc_ngpagmjz&rsv_dl=gh_pc_zhidao)的方式显示，none是不不显示 ；块状元素会单独占据一样，其他元素跟他在同一行的会被迫换行，挤到下一行那里去，inline则不会这样
padding:100px;内边距

列表前缀样式
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
list-style-image: url('sqpurple.gif');放一个图片  ·

table
  {
  border-collapse:collapse;
  }
合并边框

caption {caption-side:bottom;}
<caption>Table 1.1 Customers</caption>
表格标题

image.png

p.ex1 {margin-top:2cm;}
<p class="ex1">一个2厘米上边距的段落。</p>

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏

li {display:inline;}
span {display:block;}

设置图像的 z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

说明
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

image.png

position 属性规定元素的定位类型。
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
fixed 定位
元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

relative 定位
相对定位元素的定位是相对其正常位置。

image.png

移动相对定位元素，但它原本所占的空间不会改变。

image.png

absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

image.png

sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

image.png

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

loat 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

line-height 属性设置行间的距离（行高）。

匹配所有<p> 元素中的第一个 <i> 元素,用来设置字体

image.png

设置输入框的背景色

image.png

:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式：注意： "first-letter" 伪元素只能用于块级元素

image.png

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="//www.runoob.com">菜鸟教程 1</a>
    <a href="//www.runoob.com">菜鸟教程 2</a>
    <a href="//www.runoob.com">菜鸟教程 3</a>
  </div>
</div>

</body>
</html>

image.png

.dropdown-content {
    right: 0;
}
如果你想设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右，可以添加以下代码 right: 0;

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover, .dropbtn {
    background-color: #111;
}

.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <div class="dropdown">
    <a href="#" class="dropbtn">下拉菜单</a>
    <div class="dropdown-content">
      <a href="#">链接 1</a>
      <a href="#">链接 2</a>
      <a href="#">链接 3</a>
    </div>
  </div>
</ul>

<h3>导航栏上的下拉菜单</h3>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>

</body>
</html>

image.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    
    /* 淡入 - 1秒内从 0% 到 100% 显示: */
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 0.5;
}
</style>
<body style="text-align:center;">

<h2>提示工具淡入效果</h2>
<p>鼠标移动到以下元素，提示工具会再一秒内从 0% 到 100% 完全显示。</p>

<div class="tooltip">鼠标移动到我这
  <span class="tooltiptext">提示文本</span>
</div>

</body>
</html>

淡入效果
我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果: