前段入门——CSS3 基础记录

最新推荐文章于 2024-06-25 07:54:55 发布

「已注销」

最新推荐文章于 2024-06-25 07:54:55 发布

阅读量803

点赞数 1

分类专栏：前端文章标签： css3 css 标准 html 前端

本文链接：https://blog.csdn.net/GinkWang/article/details/74004113

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML 基础知识已经过了一遍了，按照顺序，开始看 CSS 相关知识。众所周知，现在 CSS 最新标准是 CSS3，所以我就直接从 CSS3 开始搞起。

为什么要用 CSS 呢？它的作用是什么呢？

因为刚学完 HTML 的知识，所以看到参考书上介绍这段时，心里对 HTML 的弊端清晰地映射出来：

维护困难。如果后期需要更改某特殊标记格式，会大费周章，浪费很多时间。
标记不足。HTML 本身标记很少，很多标记都是为网页内容而标记，关于样式的很少。
网页臃肿。由于没有同意风格样式，HTML 页面往往非常庞大。
定位困难。HTML 对于各模块位置的定位非常模糊。

好了好了，别说了，这些问题 CSS 都能摆平。

1. CSS3 概述

CSS 称为样式层叠表 (Cascading Style Sheets)，其文件后缀为 .css。主要用于增强和控制网页样式，并将样式信息与网页内容分割开来的标记型语言。

简单地说，CSS 文件就是为网页样式（UI）服务的，把原本在 HTML 中描述的网页样式抽离出来到 CSS 文件中，然后由 HTML 文档同意引用。这样的话， HTML 只关注网页内容，CSS 只负责网页样式。方便后期维护。

2. CSS3 基础语法

CSS 样式表由若干条样式规则组成，这些样式和规则可以应用到不同的元素和文档中来定义他们的显示效果。

每条样式规则都由三部分组成：选择符(selector)、属性(property)和属性值(value)。基本格式如下：

selector{property: value}

其中：

selector 可以是多种形式，可以是 HTML 的标记（body、p、table 等）
property 是选择符所包含的属性
value 指定属性的值。如果定义选择符的多种属性，那不同属性之间要用 ; 隔开。

根据上述，看下面的这段样式规则：

p{font-family:"隶书";color:red;font-size:40px;font-weight:bold}

这不难理解，就是给段落定义样式，字体为隶书、颜色红、字号40、字形粗体。

基本的语法记住了，那我们就开始去使用它吧。

3. HTML 中使用 CSS3

CSS3 有四种方式可以在 HTML 中使用，分别是：

行内样式
内嵌样式
链接样式
导入样式

逐一来看一下。

3.1 行内样式

简单、直接。是对行内样式最好的描述。它直接把代码作为标记属性直接写在 HTML 中。自然，这种方式也只能对单独的 HTML 元素进行修饰。

看一下代码示例：

    <!DOCTYPE html>
    <html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>行内样式</title>
    </head>

    <body>
        <p style="color:red;font-size:24px;font-weight:bold">用行内样式修饰此段文本(1)</p>
        <p style="color:blue;font-size:16px;font-weight:normal">用行内样式修饰此段文本(2)</p>
    </body>

    </html>

可以看到，两个段落

都引用了 style 属性，并分别设置其 CSS 样式。两个样式互不干扰，分别显示自己的样式。看一下效果：

尽管行内样式使用简单，但它并不常用。原因很简单，它并未解决逻辑与样式分离的问题。HTML 代码该乱还是乱，该臃肿还是臃肿。

3.2 内嵌样式

内嵌样式是将 CSS 样式写在 <head> 元素中间，然后用 <style> 标签进行声明。这样虽没能完全实现逻辑与样式代码分离，但对于一些样式简单并风格较统一的页面来说，也挺适用的。

看一下使用方法：

    <!DOCTYPE html>
    <html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>内嵌样式</title>
        <style type="text/css">
            p {
                color: cadetblue;
                text-align: center;
                font-weight: bold;
                font-size: 25px;
            }

        </style>
    </head>

    <body>
        <p>内嵌样式修改此段落</p>
    </body>

    </html>

最终实现效果：

3.3 链接样式

接下来看一下使用频率最高的引用 CSS 样式的方式——链接样式。他就很好地解决了逻辑与样式代码分离的问题，给后期修改和维护提供了很大的方便。

使用方法是现在外部定义一个 CSS 文件，然后在 HTML 文档中通过 <link> 标签引入 CSS 文件。该链接语句要写在 <head> 中。

使用：

HTML 文档：

    <!DOCTYPE html>
    <html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>链接样式</title>
        <link rel="stylesheet" type="text/css" href="C:\Users\Wang-gk\Desktop\临时\CSS Codes\lianjie.css" />
    </head>

    <body>
        <h1>CSS 链接样式</h1>
        <p>本段落样式由链接样式修饰</p>
    </body>

    </html>

CSS 文件：

    h1{color: blueviolet;text-align: center;font-weight: bold}
    p{color: darkturquoise;text-align: center;font-style: italic;}

效果：

3.4 导入样式

导入样式与链接样式基本相同，都是将外部 CSS 文件引入到 HTML 文档中。只不过语法上有所差异。导入样式是在 HTML 文档初始化时，将 CSS 文件导入到 HTML 中，作为文件的一部分，跟内嵌方式类似。

使用：

    <!DOCTYPE html>
    <html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>导入样式</title>
        <style>
            @import "lianjie.css"

        </style>
    </head>

    <body>
        <h1>CSS 导入样式</h1>
        <p>此段落由导入样式修饰</p>
    </body>

    </html>

效果：

以上就是在 HTML 中使用 CSS 文件的四种方法。下面看一下这四种方法的优先级。

3.5 优先级

不废话了，直接上结果：

CSS 样式表方式的优先级顺序由大到小顺序依次为：行内样式，内嵌样式，链接样式和导入样式。

4. 选择器

选择器在上文中我们已经介绍过了，并且我们已经使用过标记选择器了。但 CSS 中选择器有很多种，包括标记选择器，类选择器，全局选择器，ID 选择器等。。

下面一一介绍一下。

4.1 标记选择器

通过声明一个具体标记，就可以对文档中这个标记出现的每一个地方进行样式定义。

具体实例就不演示了，之前已经使用过。

但是要说一下，CSS 中也可以这样进行标记选择器的定义：

    body, p, td, th, div {
      color:red;
      font-size:24px;
    }

对多个元素样式标记。

4.2 类选择器

类选择器可以对页面中一系列元素样式重新设定。类选择器名称自己设定，但要在名称前面加一个 . ：

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>类选择器</title>
        <style>
            .aa {
                color: blue;
                font-size: 24px;
                text-align: center;
                font-weight: bold;
            }

            .bb {
                color: black;
                font-size: 16px;
                font-style: italic;
            }
        </style>
    </head>

    <body>
        <h1 class="aa">CSS 类选择器</h1>
        <p class="bb">此段落由类选择器进行修饰</p>
    </body>
    </html>

在 style 中我们定义了两个不同的 CSS 样式，然后在具体元素中通过 class 属性引用了样式。看一下具体效果：

成功！

4.3 ID 选择器

ID 选择器与类选择器类似，都是对特定属性的属性值进行定义。ID 选择器是对某一个特定的 HTML 元素匹配，一个网页文档中只能有一个元素使用某一 ID 的属性值。

同类选择器相同，ID 选择器也是由自己命名，然后这次是在名称前面加一个 #。

示例：

    <!DOCTYPE html>
    <html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>ID 选择器</title>
        <style>
            #style1 {
                color: black;
                font-weight: bold;
            }

            #style2 {
                color: blue;
                font-size: 24px;
            }

        </style>
    </head>

    <body>
        <h1 id="style1">CSS ID选择器</h1>
        <p id="style2">此段落由类选择器进行修饰</p>
    </body>

    </html>

效果：

原理和类选择器类似，都不难。

这里说一下 ID 选择器与类选择器的不同：

类选择器可以给任意数量的元素定义，但 ID 选择器在页面的标记中只能出现一次。
ID 选择器比类选择器有更高的优先级。

4.4 全局选择器

全局选择器可以使页面中所有元素的样式保持一致。

全局选择器使用很简单：

    <!DOCTYPE html>
    <html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>全局选择器</title>
        <style>
            *{
                color: brown;
                text-align: center;
                font-size: 12px;
                font-weight: bold;
                font-style: italic;
            }
        </style>
    </head>

    <body>
        <h1>CSS 全局选择器</h1>
        <p>此段落由全局选择器进行修饰</p>
    </body>

    </html>

效果：

4.5 组合选择器

多种选择器进行搭配，即组合选择器。一般是标记选择器和类选择器搭配或者标记选择器和 ID 选择器搭配。

示例：

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>组合选择器</title>
        <style>
            p{
                color: blue;
            }
            p.textFont{
                color: red;
            }
            .textFont{
                color: green;
            }
        </style>
        </head>

        <body>
            <h1 class="textFont">CSS 组合选择器 （类选择器修饰样式）</h1>
            <p>标记选择器修饰样式</p>
            <p class="textFont">组合选择器修饰样式</p>
        </body>
    </html>

我们定义了三个 CSS 样式，分别是

用标记选择器定义了段落的样式
用标记选择器和类选择器组合定义了段落的样式
用类选择器定义了样式

然后引用的时候，可以看到，h1 标题只引用了 textFont 类选择器，所以它应该显示绿色；第一个段落没引用 CSS 样式，所以它会默认显示上面定义好的段落样式，即蓝色；第二个段落引用了 textFont 样式，而且它本身又是个段落，所以它符合组合选择器的定义，会显示红色。

来看一下效果：

是的，没错！

4.6 继承选择器

说起继承，这个一点不陌生，Java 中继承是狠常用的一个知识点。那 CSS 中的这个继承选择器跟 Java 中的类似。

继承选择器的规则是，子标记中如果没有定义样式，那它的所有样式都是继承自父标记的。当子标记中如果有重新定义父标记中的样式，那子标记会沿用自己定义的样式，其他的样式继承自父标记。

具体使用：

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>继承选择器</title>
        <style type="text/css">
            h1{
                color: brown;
                text-decoration: underline;
            }
            h1 strong{
                color: cyan;
                font-size: 40px;
            }
            h1 aaa{
                color: blue;
                font-size: 10px;
            }
        </style>
        </head>

        <body>
            <h1>测试 CSS 的<strong>继承</strong>效果</h1>
            <h1>此处没有使用<font>继承选择器</font></h1>
            <h1>此处用到了<aaa>继承选择器</aaa></h1>
        </body>
    </html>

这里写了三个 CSS 样式，第一个定义了 h1 的样式，第二个定义了 h1 的 strong 标记的样式，第三个定义了 h1 的 aaa 标记的样式。

然后在使用时第一个 h1 是有 strong 标记使用的，所以它的“继承”二字会继承 h1 的 strong 效果。第二个使用了 font 标记，但我们没定义，所以它只会显示 h1 的效果。第三个使用了 aaa 标记，所以会显示 aaa 的效果。

效果：

正确！

4.7 伪类

伪类也是选择器的一种，但他不是作用在标记上的样式，而是用于标记的状态的。常用的伪类标签就是超链接的标签：:link、:vistited、:hover 和:active。

因此，伪类选择器定义的样式最长在元素 <a> 上运用，他表示超链接的四种状态：未访问超链接、已访问超链接、鼠标在超链接上停留以及激活超链接。

来看一下示例：

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>伪类</title>
        <style type="text/css">
            a:link {color: blue} /*未访问的链接*/
            a:visited {color: gray} /*已访问的链接*/
            a:hover {color: red} /*鼠标停留在链接上*/
            a:active {color: brown} /*选定的链接*/
        </style>
        </head>

        <body>
            <a href="https://www.baidu.com/">百度一下</a>
        </body>
    </html>

在 CSS 中我们已经把超链接的几种操作状态都定义好了，来看一下效果：

4.8 属性选择器

属性选择器根据是否存在某个属性或属性值来寻找元素，常用属性选择器如下：

E[attr]：只使用属性名，但没有确定任何属性值；
E[attr=”value”]：指定属性名，并指定了该属性的属性值；
E[attr~=”value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；
E[attr^=”value”]：指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$=”value”]：指定了属性名，并且有属性值，而且属性值是以value结束的；
E[attr*=”value”]：指定了属性名，并且有属性值，而且属值中包含了value；
E[attr|=”value”]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

看着有点蒙，下面结合示例看一下：

    <!DOCTYPE html>
    <html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>属性选择器</title>
        <style type="text/css">
            [align] {
                color: cornflowerblue
            }

            [align="left"] {
                font-size: 20px;
                font-weight: bolder;
            }

            [lang^="en"] {
                color: blue;
                text-decoration: underline;
            }

            [src$="gif"] {
                border-width: 5px;
                border-color: cadetblue;
            }

        </style>
    </head>

    <body>
        <p align="center">使用属性定义样式</p>
        <p align="left">使用属性值定义样式</p>
        <p lang="en-us">使用属性值前缀定义样式</p>
        <p>下面使用属性值后缀定义样式</p>
        <img src="E:\ScreenShot\动态添加 Fragment.gif" border="1" />
    </body>

    </html>

效果：

4.9 结构伪类选择器

CSS3 新增的类型选择器，通过文档结构的相互关系来匹配特定的元素，从而减少文档内对 class 和 id 属性的定义，是文档更加简洁。

各结构伪类选择器释义如下：

E:root
匹配文档的根元素，对于 HTML 文档来说，就是 HTML 元素
E:nth-child(n)
匹配父元素的第 n 个子元素，第一个编号为1
E:nth-last-child(n)
匹配父元素的倒数第 n 个子元素，第一个编号为1
E:nth-of-type(n)
与 :nth-child(n) 作用类似，但是仅匹配同种标签的元素
E:nth-last-of-type(n)
与 :nth-last-child(n) 作用类似，但是仅匹配同种标签的元素
E:last-child
匹配父元素的最后一个子元素，等同于 :nth-last-child(1)
E:first-of-type
匹配父元素下使用同种标签的第一个子元素，等同于 :nth-of-type(1)
E:last-of-type
匹配父元素下使用同种标签的最后一个子元素，等同于 :nth-last-of-type(1)
E:only-child
匹配父元素下仅有的一个子元素，等同于 :first-child:last-child 或 :nth-child(1):nth-last-child(1)
E:only-of-type
匹配父元素下使用同种标签的唯一一个子元素，等同于 :first-of-type:last-of-type 或 :nth-of-type(1):nth-last-of-type(1)
E:empty
匹配一个不包含任何子元素的元素

4.10 UI元素状态伪类选择器

CSS3 新增选择器，定义了三种状态：

E:enavled
E:disabled
E:checked

这三种状态一看就明白是什么意思，下面来看一下使用：

    <!DOCTYPE html>
    <html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>状态伪类选择器</title>
        <style type="text/css">
            input:enabled {
                border: 1px;
                dotted: #666;
                background: #ff9900;
            }

            input:disenabled {
                border: 1px;
                dotted: #999;
                background: #F2F2F2;
            }

        </style>
    </head>

    <body>
        <center>
            <h3 align=center>用户登陆</h3>
            <form method="post" action="">
                用户名：<input type="text" name="name"><br><br> 密&nbsp;&nbsp;码：
                <input type="password" name="pwd" disabled="disenabled"><br>
                <input type="submit" value="提交">
                <input type="reset" value="重置">
            </form>
        </center>
    </body>

    </html>

效果：

5. 字体与段落

5.1 字体属性

介绍字体的各类属性使用方法，如下。

字体 font-family
字号 font-size
字体风格 font-style
字体加粗 font-weight
小写转大写 font-variant
字体复合属性 font
字体颜色 color
字体阴影 text-shadow
给字体添加阴影以及阴影颜色。
text-shadow 属性有四个值，第一个表示阴影的水平位移，第二个是垂直位移，第三个表示模糊半径，第四个是阴影颜色值。其中后两个可选。
字体溢出 text-overflow
解决文本过长显示不下的问题。，即定义文本省略的显示方式。
控制换行 word-wrap
显示文字过长需要进行换行时用这个。normal 属性值允许内容顶开指定边界，break-word 属性值表示内容将在边界换行。

5.2 段落属性

单词间隔 word-spacing
设定词与词之间的间距
字符间隔 letter-spacing
设置字符文本之间的距离
文字修饰 text-decoration
可以给文本修饰下划线、删除线、闪烁等
垂直对齐方式 vertial-align
设置文本的垂直对齐方式
文本转换 text-transform
大写转小写
水平对齐方式 text-align
设置左对齐、右对齐、居中对齐等
文本缩进 text-indent
首行缩进
文本行高 line-height
设置行间距
处理空白 white-sapce
设置对象内空格字符的处理方式
文本反排 unicode-bidi 和 direction
解决文本包含多个从右至左阅读的语言

6. 表格

6.1 表格

直接看代码：

    <!DOCTYPE html>
    <html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>年度收入</title>
        <style type="text/css">
            .tablelist {
                border: 1px solid #429fff; /*表格边框*/
                font-family: "楷体";
                border-collapse: collapse; /*边框重叠*/
            }

            .tablelist caption {
                padding-top: 3px;
                padding-bottom: 2px;
                font-weight: bolder;
                font-size: 15px;
                font-family: "幼圆";
                border: 2px solid #429fff; /*表格标题边框*/
            }

            .tablelist tr {
                font-weight: bold;
                text-align: center;
            }

            .tablelist th {
                font-weight: bold;
                text-align: center;
                font-family: "宋体";
                border-width: 2px;
                background-color: mediumaquamarine;
            }

            .tablelist td {
                border: 1px solid #429fff; /*单元格边框*/
                text-align: right;
                padding: 4px;
            }

        </style>
    </head>

    <body>
        <table class="tablelist">
            <caption class="tablelist">2016季度 07-09</caption>
            <tr>
                <th>选项</th>
                <th>07月</th>
                <th>08月</th>
                <th>09月</th>
            </tr>
            <tr>
                <td>收入</td>
                <td>7000</td>
                <td>8000</td>
                <td>7500</td>
            </tr>
            <tr>
                <td>吃饭</td>
                <td>600</td>
                <td>550</td>
                <td>650</td>
            </tr>
            <tr>
                <td>购物</td>
                <td>1000</td>
                <td>800</td>
                <td>9000</td>
            </tr>
            <tr>
                <td>水电</td>
                <td>152</td>
                <td>97</td>
                <td>135</td>
            </tr>
            <tr>
                <td>看电影</td>
                <td>85</td>
                <td>150</td>
                <td>100</td>
            </tr>
            <tr>
                <td>买书</td>
                <td>120</td>
                <td>66</td>
                <td>95</td>
            </tr>
        </table>
    </body>

    </html>

我们定义了 tablelist 样式，caption 样式，tr、th、td 的样式，具体属性就不讲解了，都能看明白。然后看一下效果:

7. 美化图像

7.1 图片样式

图片边框
- 点线式边框 dotted
- 破折线式边框 dashed
- 直线式边框 soild
- 双线式边框 double
图片缩放
- 宽度最大值 max-width
- 高度最大值 max-height

7.2 对齐图片

横向对齐方式
text-align 属性，属性值 left、 center、 right
纵向对齐方式
vertical-align 属性

7.3 图文混排

文字环绕
float 属性，属性值 none、left、right
图片与文字间距
psdding 属性。

8. 总结

CSS3 基础知识点就跟到这里了，跟 HTML 一样，肯定是学不全的，还是要具体到项目中去实践。而且你也看到，后几个知识点我记录得很草率，因为也确实是不系统，本身 CSS 就是一个为 UI 服务的语言，各项知识有点散乱。所以我的重点还是放在了 CSS 语法标准上以及各个选择器的使用上了。这进度都已经够慢的了。。

时间不等人，接下来要去啃大块头——JavaScript。

9. 参考

《精通 HTML5 + CSS3 + JavaScript 网页设计》

W3school

「已注销」

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前段入门——CSS3 基础记录

HTML 基础知识已经过了一遍了，按照顺序，开始看 CSS 相关知识。众所周知，现在 CSS 最新标准是 CSS3，所以我就直接从 CSS3 开始搞起。为什么要用 CSS 呢？它的作用是什么呢？因为刚学完 HTML 的知识，所以看到参考书上介绍这段时，心里对 HTML 的弊端清晰地映射出来：维护困难。如果后期需要更改某特殊标记格式，会大费周章，浪费很...
复制链接

扫一扫