⑦CSS(2)

最新推荐文章于 2024-01-25 16:34:12 发布

小霍霍IT-CFD

最新推荐文章于 2024-01-25 16:34:12 发布

阅读量168

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/jh_5935/article/details/80314997

版权

Java Web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

2.11 CSS 轮廓（outline）

outline:

outline-color：color-name,hex-number,rgb-number,invert,inherit
outlinestyle:none,dotted,dashed,solid,double,groove,ridge,inset,outset,inherit
outline-width:thin,medium,thick,length,inherit

2.12 CSS 分组和嵌套选择器

分组前：

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

分组后：

h1,h2,p
{
color:green;
}

嵌套选择器
为所有p元素指定一个样式

p
{
color:blue;
text-align:center;
}

为所有class=”marked”的元素指定一个样式

.marked
{
background-color:red;
}

为所有class=”marked”元素内的p元素指定一个样式

.marked p
{
color:white;
}

2.13 CSS Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

h1.hidden {display:none;}

2.14 CSS Position(定位)

position 属性指定了元素的定位类型。
position 属性的五个值：
static
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right影响。
relative
相对定位元素的定位是相对其正常位置。

h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

fixed
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
absolute
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html:
sticky
position: sticky; 基于用户的滚动位置来定位。

2.15 CSS Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。(当窗口改动的时候)

img
{
    float:right;
}

2.16 CSS 组合选择符

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔),（在div内的有作用，包括儿子、孙子。。。）

div p
{
  background-color:yellow;
}

子元素选择器(以大于号分隔）（只有儿子这一代有作用）

div>p
{
  background-color:yellow;
}

相邻兄弟选择器（以加号分隔）（要有相同父亲,并且相连）

div+p
{
  background-color:yellow;
}

后续兄弟选择器（以破折号分隔，只要是兄弟就可以了）

div~p
{
  background-color:yellow;
}

2.17 伪类(Pseudo-classes)和伪元素

CSS伪类是用来添加一些选择器的特殊效果。
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

CSS - :first - child伪类

匹配第一个 <p> 元素
p:first-child
{
    color:blue;
}

匹配所有<p> 元素中的第一个 <i> 元素
p > i:first-child
{
    color:blue;
}

匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
p:first-child i
{
    color:blue;
}

first-line 伪元素
”first-line” 伪元素用于向文本的首行设置特殊样式。
浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化。
first-letter 伪元素
”first-line” “first-letter” 伪元素用于向文本的首字母设置特殊样式：
伪元素和CSS类
下面的例子会使所有 class 为 article 的段落的首字母变为红色。

p.article:first-letter {color:#ff0000;}

<p class="article">文章段落</p>

CSS - :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

CSS - :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。。

2.18 CSS 导航栏

熟练使用导航栏，对于任何网站都非常重要。
下面的例子中的代码是垂直和水平导航栏使用的标准代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>

例子解析：
list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
移除浏览器的默认设置将边距和填充设置为0
垂直

a
{
    display:block;
    width:60px;
}

例子解析：
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

激活/当前导航条实例
在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：

.active {
    background-color: #4CAF50;
    color: white;
}

全屏高度的固定导航条
创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。
height: 100%; /* 全屏高度 */
overflow: auto; /* 如果导航栏选项多，允许滚动 */

水平导航栏
有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。

2.19 CSS 导航栏

<style>
/* 下拉按钮样式 */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* 容器 <div> - 需要定位下拉内容 */
.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>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
      <a href="http://www.runoob.com">小霍霍的微博</a>
    <a href="http://www.runoob.com">小霍霍的微博</a>
    <a href="http://www.runoob.com">小霍霍的微博</a>
    <a href="https://blog.csdn.net/jh_5935">小霍霍-HTML(1) 1</a>
    <a href="https://blog.csdn.net/jh_5935">小霍霍-HTML(2)</a>
    <a href="https://blog.csdn.net/jh_5935">小霍霍-CSS(1)</a>
  </div>
</div>

2.20 CSS 提示工具(Tooltip)

CSS 提示工具(Tooltip)
本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具。

提示工具在鼠标移动到指定元素后触发，先看以下四个实例：

头部显示    右边显示    底部显示    左边显示
基础提示框(Tooltip)
提示框在鼠标移动到指定元素上显示：

HTML 代码：
<style>
/* Tooltip 容器 */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}

/* Tooltip 文本 */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* 定位 */
    position: absolute;
    z-index: 1;
}

/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

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