CSS学习-基础教程

石山岭
134 阅读10分钟

CSS 选择器

1.CSS 元素选择器

对所有p标签起作用

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

2.CSS id 选择器

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
注意：id 名称不能以数字开头。

只对id为para1的p标签起作用

#para1 {
  text-align: center;
  color: red;
}

使用：

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

3.CSS 类选择器

.center {
  text-align: center;
  color: yellow;
}

或者指定某种元素：例如下面这个只对 p 标签起作用。

p.center {
  text-align: center;
  color: red;
}

使用：

<h1 class="center">这个是换色标题</h1>
<p class="center">这个是红色标题。</p>

引用多个元素

p.center {
  text-align: center;
  color: yellow;
}
p.large {
  font-size: 300%;
}

<p class="center large">这个段落引用两个类。</p>

4.CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

下面的 CSS 规则会影响页面上的每个 HTML 元素：

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

5.## CSS 分组选择器

h1, h2, p {
  text-align: center;
  color: red;
}

6.CSS 后代选择器

h1 em {color:red;}

使用

<h1>This is a <em>important</em> heading</h1>

7.子元素选择器

使用方式一

h1 > strong {color:red;}
//使用
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

解释：吧 h1 标签下的strong标签内的字体颜色更改为red

使用方式二

.grad-contentFour > div {
  background-color: rgba(255, 255, 255, 0.8);
}
//使用
<div class="grad-contentFour">
  <div >Right</div>
  <div >Footer</div>
</div>=

解释：把 grad-contentFour 类下的div元素的背景颜色，更改为 rgba(255, 255, 255, 0.8)。

如何添加 CSS

1.外部 CSS

在head中。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2.内部 CSS

也是卸载head中，不过需要使用 style 标签包裹

<head>
<style>
body {
  background-color: linen;
}
</style>

3.行内 CSS

不建议使用。

<h1 style="color:blue;text-align:center;">This is a heading</h1>

多种样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

如果 mystyle.css 也对 h1 的 color 进行了修改。 那么需要看谁是最后一个引用的。左后一个起作用。
上例中，起作用的是内部css代码。

CSS 背景图像

  • background-color 背景颜色
  • background-image 背景图片
  • background-repeat 是否重复以及重复类型
    • repeat 默认
    • repeat-x 只在x轴重复
    • repeat-y 只在y轴重复
    • no-repeat 不重复
  • background-attachment 背景是否跟着页面滑动
    • scroll 跟随页面滑动
    • fixed 固定在页面上
  • background-position 图片展示位置。
    • right top 右上角

以上背景属性可以简写为

  background: #ffffff url("/i/photo/tree.png") no-repeat right top scroll;

背景图片其他属性

  • background-size:80px 60px;
  • background-clip 属性规定背景的绘制区域。
    • border-box 背景被裁剪到边框盒。
    • padding-box 背景被裁剪到内边距框
    • content-box 背景被裁剪到内容框。

CSS 外边距

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

CSS 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并.如图：

margin_collapsing_1.png

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

margin_collapsing_example_2.png

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

margin_collapsing_example_3.png

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

margin_collapsing_example_2.png

margin_collapsing.png

CSS 内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

通过 CSS，您可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

内边距和元素宽度

div {
  width: 300px;
  padding: 25px;
}

div的实际宽度是 300px + 25px + 25px.

CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。

可以使用 box-sizing 属性，这样不管怎么填充，div的宽度都是300px。

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

也可以使用下面的css 是页面中都应用这种算法（推荐）。

* {
  box-sizing: border-box;
}

CSS 高度和宽度

CSS 设置高度和宽度

height 和 width

height 和 width 属性可设置如下值：

  • auto - 默认。浏览器计算高度和宽度。
  • length - 以 px、cm 等定义高度/宽度。
  • % - 以包含块的百分比定义高度/宽度。
  • initial - 将高度/宽度设置为默认值。
  • inherit - 从其父值继承高度/宽度。

设置 max-width

max-width 属性用于设置元素的最大宽度。

div {
    max-width: 500px;
}

好处就是，当浏览器宽度足够时，div的宽度为500px。但是当浏览器宽度小于500时，div 的宽度随浏览器缩小。

CSS 框模型

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

代码的布局示意图
boxmodel_example.png

元素的总宽度应该这样计算：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算：

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

CSS 轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

CSS 拥有如下轮廓属性：

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

image.png

CSS 文本

  • color 文本颜色

  • text-align 文本对其方式

    • center
    • left
    • right
    • justify 拉伸每一行 使他们一样宽

  • text-decoration 文字装饰

    • overline 上划先
    • line-through 删除线
    • underline 下划线

  • text-transform 文本转换

    • uppercase 文字转为大写
    • lowercase 文字转为小写
    • capitalize 首字母大写

  • text-indent 第一行缩进距离 单位 px

  • letter-spacing 字母间距

  • line-height 行间距

  • word-spacing 字间距

  • white-space 指定元素内部空白的处理方式

    • nowrap 禁用元素内的

  • text-shadow 文本阴影

    • text-shadow: 2px 2px 5px red;
    • 上面四个参数解释：x轴偏移 y轴偏移 模糊效果 阴影颜色

CSS 字体

通用字体族

在 CSS 中，有五个通用字体族：

  • 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
  • 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体（Cursive）- 模仿了人类的笔迹。
  • 幻想字体（Fantasy）- 是装饰性/俏皮的字体。

所有不同的字体名称都属于这五个通用字体系列之一。

CSS font-family 属性

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

CSS 字体样式

  • font-style
    • normal 默认
    • italic 斜体
    • oblique 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
  • font-weight 粗体
    • normal
    • bold 粗体
  • font-variant 字体变体
    • normal
    • small-caps
    • 在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。
  • font-size 字体大小

CSS 字体大小

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

font-size 值可以是绝对或相对大小。

绝对尺寸：

  • 将文本设置为指定大小
  • 不允许用户在所有浏览器中更改文本大小（可访问性不佳）
  • 当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

  • 设置相对于周围元素的大小
  • 允许用户在浏览器中更改文本大小

注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

以像素设置字体大小

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

用 em 设置字体大小

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

W3C 建议使用 em 尺寸单位。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小：pixels/16=em。

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

CSS 图标

Font Awesome 图标

如需使用 Font Awesome 图标，请访问 fontawesome.com，登录并获取代码添加到 HTML 页面的 <head> 部分：

<script src="https://kit.fontawesome.com/yourcode.js"></script>

Bootstrap 图标

如需使用 Bootstrap glyphicons，请在 HTML 页面的 <head> 部分内添加这行：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

提示：无需下载或安装！

<i class="glyphicon glyphicon-cloud"></i>

Google 图标

如需使用 Google 图标，请在HTML页面的 <head> 部分中添加以下行：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

使用

<i class="material-icons">cloud</i>

CSS 链接

通过 CSS，可以用不同的方式设置链接的样式。

示例

a {
  color: hotpink;
}

此外，可以根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是：

  • a:link - 正常的，未访问的链接
  • a:visited - 用户访问过的链接
  • a:hover - 用户将鼠标悬停在链接上时
  • a:active - 链接被点击时
/* 未被访问的链接 */
a:link {
  color: red;
}

/* 已被访问的链接 */
a:visited {
  color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}

/* 被选择的链接 */
a:active {
  color: blue;
}

如果为多个链接状态设置样式，请遵循如下顺序规则：

  • a:hover 必须 a:link 和 a:visited 之后
  • a:active 必须在 a:hover 之后

链接文本装饰

  • text-decoration
    • none 隐藏下划线
    • underline 展示下划线

CSS 列表

image.png

HTML 列表和 CSS 列表属性

在 HTML 中，列表主要有两种类型：

  • 无序列表（<ul>）- 列表项用的是项目符号标记
  • 有序列表（<ol>）- 列表项用的是数字或字母标记

CSS 列表属性使您可以：

  • 为有序列表设置不同的列表项标记
  • 为无序列表设置不同的列表项标记
  • 将图像设置为列表项标记
  • 为列表和列表项添加背景色

不同的列表项目标记

/*无序列表实例：*/
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;
}
image.png

图像作为列表项标记

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

定位列表项标记

list-style-position

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

效果 image.png

删除默认设置

list-style-type

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

列表 - 简写属性

ul {
  list-style: square inside url("sqpurple.gif");
}

在使用简写属性时，属性值的顺序为：

  • list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
  • list-style-position（指定列表项标记应显示在内容流的内部还是外部）
  • list-style-image（将图像指定为列表项标记）

如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

CSS 表格

使用border设置表格边框

为 <table>、<th> 和 <td> 元素规定黑色边框：

table, th, td {
  border: 1px solid black;
}
image.png

注意：上例中的表格拥有双边框。这是因为 table 和 <th> 和 <td> 元素都有单独的边框。

合并表格边框

border-collapse 属性设置是否将表格边框折叠为单一边框：

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}
image.png

文字居中

td, th {
  水平居中
  text-align: center;
  垂直居中
  vertical-align: center;
  内边距
  padding: 15px;
}

可悬停表格

在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：

tr:hover {background-color: #f5f5f5;}

效果：

鼠标悬停到某一行，这行颜色变深

条状表格

image.png

tr:nth-child(even) {background-color: #f2f2f2;}

响应式表格

如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条：

在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果：

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
avatar
文章
阅读
粉丝