css 基本概念学习篇【四】

作者：黎燃

2022 年 5 月 20 日
本文字数：1179 字
阅读完需：约 4 分钟

通过 css 来转换块级元素和内联元素

区分这 2 种元素最好的方式就是看，该元素是否是独占一行，独占一样的就是块级元素，否则就是内联元素。

<div>我是块级元素</div><div>我是块级元素</div><span>我是内联元素</span><span>我是内联元素</span>将上面的代码存为html文件，就会看到`span`元素在一行，`div`元素就是独占一行的。
<div>我是块级元素</div><div>我是块级元素</div><span>我是内联元素</span><span>我是内联元素</span><style>div { display: inline; }span { display: block; }</style>

复制代码

将上面的代码存为 html 文件，就会看到div元素在一行，span元素就是独占一行的。

这个就是 css 的基本用法。

html 文件引入 css 的 3 种方式

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>网页标题</title>    <meta name="keywords" content="文档关键词">    <meta name="description" content="文档描述">    <link rel="shortcut icon" href="/favicon.ico">    <link rel="stylesheet" href="main.css" media="all"> <!-- 方式1：引入外部css文件 -->    <!-- 方式2：css块 -->    <style>    h1 { font-size: 16px; color: red; }</style>  </head>  <body>    <div class="text">命中外部css的样式</div>    <h1>totonoo</h1>    <!-- 方式3：直接写在元素上 -->    <div style="color: green;">心中的大草原</div>  </body></html>

复制代码

建 main.css 文件

.text {  color: #ffcc00;}

复制代码

css 优先级

第一原则：默认<外部引入<内联样式<行内第二原则：内联样式 > ID 选择器 > （类选择器 = 属性选择器 = 伪类选择器） > （标签选择器 = 伪元素选择器）伪类元素：!important 最高首先伪类是用单冒号表示：如:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()然后伪元素用双冒号表示：如::first-letter, ::first-line, ::before, ::after1.用于链接的几个伪类元素:link 用这个可以设置未被访问的链接的样式:visited 用这个设置已经被访问的链接的样式:hover 用于设置将鼠标悬浮在链接上的样式:active 用于设置鼠标点击链接时到鼠标松开时的样式:focus 用于设置用键盘将焦点放在链接上时的样式（如用 tab 键或者上下键来移动页面焦点时）position:absolute 绝对定位 position:relative 相对定位 position:fixed 固定定位子绝父相

使用 CSS 重置（reset）

css 重置库如 normalize.css 已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的 margin、padding 改变浏览器默认的盒模型。

*{ box-sizing:border-box; margin:0; padding:0 }

复制代码

使用 box-sizing 声明是可选择，如果你使用下面继承的盒模型形式可以跳过它。

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/d2ee92d0df77ffdedfcebeff2】。文章转载请联系作者。

黎燃

关注

前端工程师 2022.05.06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

css 基本概念学习篇【四】

通过 css 来转换块级元素和内联元素

html 文件引入 css 的 3 种方式

css 优先级

使用 CSS 重置（reset）

黎燃

评论