CSS 入门教程

Upd on 2025/01/04：一处代码错误，已改正。

前言

接着上一期继续来讲 CSS。

因为作者水平有限，无法把 CSS 讲透彻，望谅解。

前置知识：CSS 选择器中包括若干声明，一条声明是由用 : 分割的属性和值组成的。

CSS 创建

当样式适用于很多页面时，外部样式表是一个较为理想的选择。我们可以使用 link 标签标记在 HTML 的 <head> 一栏下。

HTML

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

当某个文档需要特殊的样式，我们就需要用 <style> 定义内部样式表。同样定义在 HTML 的 <head> 一栏下。

HTML

<head>
<style>
hr {color:blue;}/*颜色*/
p {margin-left:20px;}/*左外边距*/
/*背景图片*/
body {background-image:url("images/1.gif");}
</style>
</head>

最后如果使用样式的范围更小，例如只有一个元素需要使用该样式，就需要内联样式：

HTML

<p style="color:red;margin-left:20px">XXX</p>

CSS 背景

CSS 属性定义背景效果:

background-color 定义元素背景颜色。
background-image 描述元素背景图像。
background-repeat 水平或垂直平铺。
background-attachment 定位、不平铺。
background-position 简写属性。

CSS

/*颜色*/
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
/*图像*/
body {background-image:url('bgdesert.jpg');}

CSS 文本

颜色属性被用来设置文字的颜色。颜色是通过 CSS 最经常的指定：

十六进制值，如：#FF0000。
一个 RGB 值，如：RGB(255,0,0)。
颜色的名称，如：red。

CSS

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

对齐方式：

CSS

/*分别是中心对齐、右对齐、左对齐*/
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

CSS 列表

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

无序列表 ul：列表项标记用特殊图形（如小黑点）。
有序列表 ol：列表项的标记用数字、字母等。

不同的列表项标记使用 list-style-type：

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

如果要指定列表项标记的图像，使用列表样式图像属性 list-style-image。更多关于图片的就不展开讲了。

CSS 表格

众所周知，HTML 定义表格使用 td 和 tr。

为了使表格更加美观，经常需要一个样式，下面的示例定义了一个黑色边框：

CSS

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

表格宽度和高度：

CSS

table {
    width:100%;
}
th {
    height:50px;
}

width 是宽度，height 是高度，这两个单词在 CSS 背景设置以及一系列选择器中都可能出现。

对齐方式可以这样写：

CSS

td {
    text-align:right;
}

直接在对齐方式外面再加一层 td 即可。

CSS 分组、嵌套

在样式表中，很多选择器下的属性、值都相同，在这种情况下可以将它们合并，用 , 分割。

CSS

h1,h2,p {
    color:green;
}

给出几种嵌套选择器：

p{}：为所有的 p 元素指定一个样式。
.marked{}：为所有的 class="marked" 的元素指定一个样式。
.marked p{}：为所有的 class="marked" 元素内的 p 元素指定一个样式。
p.marked{}：为所有的 class="marked" 的 p 元素指定一个样式。

示例代码：

CSS

p {
    color:blue;
    text-align:center;
}
.marked {
    background-color:red;
}
.marked p {
    color:white;
}
p.marked {
    text-decoration:underline;
}

CSS 选择器

其实在之前的讲解中提到了一些，那么现在笔者来具体的讲一讲。

元素选择器示例（如下代码，p 选择器将选择所有 <p> 元素）：

CSS

p {
  color: blue;
}

类选择器（通过类别名称选择具有特定类别的 HTML 元素）以 . 开头，后面跟着类别名称。

例如，.starlight 选择器将选择所有具有类别为 "starlight" 的元素。

CSS

.starlight {
  background-color: yellow;
}

ID 选择器（通过元素的唯一标识符（ID）选择 HTML 元素）以 # 开头，后面跟着 ID 名称。

如下代码，#run_faster 选择器将选择具有 ID 为 "run_faster" 的元素。

CSS

#run_faster {
  width: 200px;
}

属性选择器：通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。

如下代码，input[type="text"] 选择器将选择所有 type 属性为 "text" 的 <input> 元素。

CSS

input[type="text"] {
  /*水平有限，省略*/
}

致谢 & 参考资料

本文参考了大量 RUNOOB 中的资料，对该网站的发布者表示感谢，如有侵权请联系我删除并道歉。

更多参考资料可以在这个知乎回答中提到的网站里自行查找并学习。

文章操作

前言

CSS 创建

CSS 背景

CSS 文本

CSS 列表

CSS 表格

CSS 分组、嵌套

CSS 选择器

致谢 & 参考资料

相关推荐

评论

CSS 入门教程