CSS案例复习

2021-04-26 16:02:20 阅读：147 来源： 互联网

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

-

表示标题和
表示段落：

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

绝对大小：

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

相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
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;}

在这里插入图片描述

标签：复习,color,text,元素,案例,文本,CSS,属性
来源： https://blog.csdn.net/qq_48942961/article/details/116106828

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS案例复习

TEXT

文本的对齐方式

文本修饰

文本缩进()

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

Fonts 字体

字体系列

字体样式

字体大小

-

表示标题和表示段落：

字体加粗

字体转换

CSS

链接样式

文本修饰

背景颜色

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

CSS列表

不同的列表项标记

作为列表项标记的图像

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

CSS表格

表格边框

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

表格文字对齐

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

表格填充

表格颜色

CSS盒子模型

CSS边框

border-style 值:

边框宽度

边框-单独设置各边

CSSoutline

display（显示）和visibility

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

如何改变一个元素显示

CSS Position(定位)

static 定位

fixed 定位

relative 定位

absolute 定位

sticky 定位

重叠的元素

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

更改光标

CSS布局 overflow

浮动

彼此相邻的浮动元素

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

标题和图片向右侧浮动

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

CSS布局 水平垂直居中对齐

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

文本居中对齐

图片居中对齐

左右对齐 - 使用定位方式

垂直居中对齐

- 使用 padding

使用 line-height

使用 position 和 transform

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

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

anchor伪类

CSS :first-child 伪类

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

所有CSS伪类/元素

CSS 伪元素(就是元素)

:first-line 伪元素

:first-letter 伪元素

CSS - :before 伪元素

元素前面插入一幅图片：

CSS - :after 伪元素

元素后面插入一幅图片：

CSS导航栏

导航栏=链接列表

垂直导航栏

表示标题和
表示段落：

CSS布局水平垂直居中对齐

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