html和css入门（二）

来源：cnblogs　　作者：hchui　　时间：2018/10/20 15:09:18　　对本文有异议

CSS基础

什么是CSS

简单来说，层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。

CSS发展历史

1996年 CSS 1.0 规范面世，其中加入了字体、样色等相关属性。
1998年 CSS 2.0 规范推出，这个版本的 CSS 也是最广为人知的一个版本。
2004年 CSS 2.1 规范推出，对 CSS 2.0 进行了一些小范围的修改，删除了一些浏览器支持不成熟的属性。
2010年 CSS 3.0 规范推出，将 CSS3 分成了不同的模块，例如盒子模型、背景和边框、文字特效等模块。

CSS使用方式

行内样式

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
    </head>
    <body>
        <p style="font-size: 16px; color: red;">My cat is very grumpy</p>
    </body>
</html>

行内样式需要写到标签的 style 属性值中。

内部样式表

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
        <style>
            p {
                font-size: 16px;
                color: red;
            }
        </style>
    </head>
    <body>
        <p>My cat is very grumpy</p>
    </body>
</html>

内部样式需要写到 <style> 标签中。

外部样式表

链接式

将样式写到单独的文件中，文件的扩展名为 .css。例如，index.css 文件中有如下样式：

p {
    font-size: 16px;
    color: red;
}

然后通过 <link> 元素将 index.css 文件引入到页面中：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
        <link rel="stylesheet" type="text/css" href="./index.css">
    </head>
    <body>
        <p>My cat is very grumpy</p>
    </body>
</html>

导入式

创建 style1.css 文件，文件中有如下样式：

/* style1.css */
h1 {
    font-size: 32px;
    color: green;
}

创建 style2.css 文件，并使用 @import 指令将 style1.css 导入到 style1.css 文件中：

/* style2.css */
p {
    font-size: 16px;
    color: red;
}

最后，通过 <link> 元素将 style2.css 文件引入到页面中：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
        <link rel="stylesheet" type="text/css" href="./style2.css">
    </head>
    <body>
        <h1>一级标题</h1>
        <p>My cat is very grumpy</p>
    </body>
</html>

定义在外部文件（外链样式）：本教程中案例主要是通过这种形式定义样式。在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。

CSS基本语法

CSS 样式由一系列的规则集组成，规则集中有一条或多条样式声明，每条样式声明包含着一对属性名和属性值，属性名和属性值之间以冒号（:）隔开，样式规则之间以分号（;）隔开，最后一对样式声明后面可以省略分号。

基本选择器

标签选择器

p {
    font-size: 16px;
    color: red;
}

选择页面中所有的 <p> 元素，给它们设置字体大小和颜色。

Class 选择器

.box {
    font-size: 20px;
    color: green;
}

选择页面中 class 属性值中包含 box 类名的所有元素，给它们设置字体大小和颜色。

ID 选择器

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

选择页面中 id 属性值是 nav 的元素，给它设置字体大小和颜色。

通配符选择器

* {
    font-size: 24px;
    color: blue;
}

样式的优先级

行内样式的优先级最高
选择器的优先级根据权重计算

选择器	ID选择器	Class选择器	标签选择器	总权重
`html body header h1`	0	0	4	4
`.page-header .title`	0	2	0	20
`#page-title`	1	0	0	100

属性选择器权重与类相同，+ > ~ 权重为 0

在选择器权重相同的情况下，遵循就近原则，也就是说，谁距离目标元素近，应用哪个个样式。
使用 !important 声明调整样式的优先级

样式的来源

共有三种主要的样式来源：

浏览器对HTML定义的默认样式。
用户定义的样式。
开发者定义的样式。

特别声明：本人也是小白，想让与我一样的初学者一起学习，写的不好的地方请见谅

友情链接：直通硅谷　点职佳　北美留学生论坛

CSS热门文章

CSS实现文字两端对齐

【WEB基础】HTML & CSS 基础入门（6）超链接

Javascript 对象 - 数学对象

对移动端兼容适配的分析

Element FORM结合Vue实现横向排列表单项

如何让一个input输入框居中

CSS Grid 布局完全指南(图解 Grid 详细教程)

css常见的各种布局上（两列布局）

vue+element导入导出excel

WEB前端动态背景集

CSS推荐文章

CSS布局概念与技术教程

15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder

现代 CSS 解决方案：文字颜色自动适配背景色！

脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质

深入解析css-笔记

CSS 还原拉斯维加斯球数字动画

震惊！CSS 也能实现碰撞检测？

前端开发如何更好的避免样式冲突？级联层(CSS@layer)

现代 CSS 解决方案：CSS 原生支持的三角函数

利用css var函数让你的组件样式输出规范样式API，可定制性更高；