CSS案例复习

TEXT

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

实例
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

实例
a {text-decoration:none;}

也可以这样装饰文字：

实例
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

文本缩进()

文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

更多实例(字体间的设置)

这个例子演示了如何增加或减少字符之间的空间

指定行与行之间的空间

这个例子演示了如何改变元素的文本方向。

这个例子演示了如何增加一个段落中的单词之间的空白空间。

这个例子演示了如何禁用一个元素内的文字环绕。折叠

这个例子演示了如何设置文本的垂直对齐图像。

这个例子演示了如何设置文本阴影。

Fonts 字体

字体系列

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。

多个字体系列是用一个逗号分隔指明：

p{font-family:"Times New Roman", Times, serif;}

字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

字体大小

font-size 属性设置文本的大小。

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

请务必使用正确的HTML标签，就

-

表示标题和

表示段落：

字体大小的值可以是绝对或相对的大小。

绝对大小：

设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
相对大小：

相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
Remark 如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。

字体加粗

字体转换

CSS

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

当设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

文本修饰

text-decoration 属性主要用于删除链接中的下划线：

实例
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景颜色

背景颜色属性指定链接背景色：

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

这个例子演示了一个更高级的例子，我们结合若干CSS属性显示为方框。

CSS列表

不同的列表项标记

list-style-type属性指定列表项标记的类型是：

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;}

作为列表项标记的图像

要指定列表项标记的图像，使用列表样式图像属性：

实例
ul
{
    list-style-image: url('sqpurple.gif');
}

可以按顺序设置如下属性：

list-style-type
list-style-position (有关说明，请参见下面的CSS属性表)
list-style-image
如果上述值丢失一个，其余仍在指定的顺序，就没关系。

CSS表格

表格边框

指定CSS表格边框，使用border属性。

下面的例子指定了一个表格的Th和TD元素的黑色边框：

实例
table, th, td
{
    border: 1px solid black;
}

折叠边框（默认表格中tr td中有空白间距）

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，向左，右，或中心：

垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

td
{
    height:50px;
    vertical-align:bottom;
}

表格填充

如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性：

表格颜色

下面的例子指定边框的颜色，和th元素的文本和背景颜色：

table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

CSS盒子模型

CSS边框

border-style 值:

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相

边框宽度

您可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。

边框-单独设置各边

在CSS中，可以指定不同的侧面不同的边框

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

CSSoutline

display（显示）和visibility

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

如何改变一个元素显示

可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。

下面的示例把列表项显示为内联元素：

li {display:inline;}

span {display:block;}

CSS Position(定位)

position 属性指定了元素的定位类型。

position 属性的五个值：

static
relative
fixed
absolute
sticky
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

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

relative 定位

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

absolute 定位

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

sticky 定位

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

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

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

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

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

这个例子演示了overflow属性创建一个滚动条，当一个元素的内容在指定的区域过大时如何设置以适应。

更改光标

这个例子演示了如何改变光标。

CSS布局 overflow

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

浮动

元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

为图像添加边框和边距并浮动到段落的右侧

标题和图片向右侧浮动

让标题和图片向右侧浮动。

让段落的第一个字母浮动到左侧

改变样式，让段落的第一个字母浮动到左侧。
通过 width 和 line-height可以设置这字和其他字间的距离

CSS布局 水平垂直居中对齐

元素居中对齐(必须设置宽度)

要水平居中对齐一个元素(如

), 可以使用 margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配：

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:

左右对齐 - 使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:

垂直居中对齐

- 使用 padding

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

使用 line-height

使用 position 和 transform

除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:

设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文本有效，当文本行数超过单行时：

1）padding：文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大；
2）line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；
多行文本可使用 vertical-align: middle; 来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。

CSS 伪类(Pseudo-classes)（是一种选择器）

anchor伪类

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

CSS :first-child 伪类

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

```javascript
p > i:first-child
{
    color:blue;
}

匹配所有作为第一个子元素的

元素中的所有 元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的

元素中的所有 元素：

p:first-child i
{
    color:blue;
}

所有CSS伪类/元素

:last-child p:last-child 选择所有p元素的最后一个子元素
:not(selector) :not§ 选择所有p以外的元素
:nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素

p:nth-child(2n) 偶数子元素
p:nth-child(2n-1) 奇数子元素

CSS 伪元素(就是元素)

CSS伪元素是用来添加一些选择器的特殊效果。

:first-line 伪元素

“first-line” 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化：

注意：“first-line” 伪元素只能用于块级元素。

注意： 下面的属性可应用于 “first-line” 伪元素：

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

:first-letter 伪元素

“first-letter” 伪元素用于向文本的首字母设置特殊样式：

注意： “first-letter” 伪元素只能用于块级元素。

注意： 下面的属性可应用于 “first-letter” 伪元素：

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if “float” is “none”)
text-transform
line-height
float
clear

CSS - :before 伪元素

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

下面的例子在每个

元素前面插入一幅图片：

CSS - :after 伪元素

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

下面的例子在每个

元素后面插入一幅图片：

CSS导航栏

导航栏制作网址

导航栏=链接列表

<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>

现在，让我们从列表中删除边距和填充：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

例子解析：

list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
移除浏览器的默认设置将边距和填充设置为0
上面的例子中的代码是垂直和水平导航栏使用的标准代码。

垂直导航栏

上面的代码，我们只需要 元素的样式，建立一个垂直的导航栏

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

激活/当前导航条实例（active为选中的 hover是移动到上面的）

在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：

全屏高度的固定导航条

接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。

实例
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */
}

水平导航栏

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

这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。

内联列表项

li
{
    display:inline;
}
``
## 浮动列表项
在上面的例子中链接有不同的宽度。

对于所有的链接宽度相等，浮动 <li>元素，并指定为 <a>元素的宽度：

## 下拉导航栏

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

下拉导航栏

主要要点是将整个下拉菜单放在其他两个导航选项旁，其他两个选项通过float:left;设置，整个dropdown 设置为inline-block

将dropdown-content设置为absolute和 display：none;
dropdown-btn 跟nav-topp a设置相同的样式
通过 .dropdown:hover .dropdwon-content{
display:block}实现 显示下拉菜单栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav-top {
            position: fixed;
            top: 0px;
            padding: 0px;
            margin: 0px;
            width: 100%;
            background-color: wheat;
        }
        
        .nav-top li {
            list-style: none;
            float: left;
        }
        
        .nav-top a,
        .dropdown-content a,
        .dropdown-btn {
            display: inline-block;
            width: 80px;
            height: 30px;
            text-decoration: none;
            line-height: 30px;
            text-align: center;
            color: white;
        }
        
        .dropdown {
            display: inline-block;
            position: relative;
            left: 22px;
        }
        
        .dropdown-content {
            position: absolute;
            display: none;
        }
        
        .dropdown-content a {
            display: block;
            color: black;
        }
        
        .dropdown-btn {
            background-color: black;
        }
        
        .nav-top a:hover {
            background-color: black;
        }
        
        .dropdown-content a:hover {
            color: white;
            background-color: rgb(126, 122, 122);
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>
    <ul class="nav-top">
        <li><a href="">菜单1</a></li>
        <li><a href="">菜单2</a></li>
        <div class="dropdown">
            <a href="" class="dropdown-btn">下拉菜单</a>
            <div class="dropdown-content">
                <a href="">下拉菜单1</a>
                <a href="">下拉菜单2</a>
                <a href="">下拉菜单3</a>
            </div>
        </div>
    </ul>
</body>

</html>

图片透明度（opacity）

CSS属性选择器

属性选择器

下面的例子是把包含标题（title）的所有元素变为蓝色：

[title]
{
    color:blue;
}

属性和值选择器

下面的实例改变了标题title='runoob’元素的边框样式:

[title=runoob]
{
    border:5px solid green;
}

属性和值的选择器 - 多值

下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:
title中包含hello就会被选中

[title~=hello] { color:blue; }

表单样式

属性选择器样式无需使用class或id的形式:

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

CSS表单

输入框(input) 聚焦

默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们可以设置 input 样式为 outline: none; 来忽略该效果。

使用 :focus 选择器可以设置输入框在获取焦点时的样式：

input[type=text]:focus {
  background-color: lightblue;
}

输入框(input) 图标

如果你想在输入框中添加图标，可以使用 background-image 属性和用于定位的background-position 属性。注意设置图标的左边距，让图标有一定的空间：
通过background-position来设置距离
通过padding来设置光标的距离

带动画的搜索框

以下实例使用了 CSS transition 属性，该属性设置了输入框在获取焦点时会向右延展。你可以在 CSS 动画 章节查看更多内容。

input[type=text] {
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
 
input[type=text]:focus {
  width: 100%;
}

文本框（textarea）样式

注意: 使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）。

 resize: none;

下拉菜单（select）样式

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

按钮样式

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
 
/* 提示: 使用 width: 100% 设置全宽按钮 */

CSS进度条实例

不需要给container设置高度只需要设置宽度为100%，高度会因为子元素来定

* {box-sizing: border-box}

.container {
  width: 100%;
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
}

.html {width: 100%; background-color: #4CAF50;}
.css {width: 80%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}