前端开发中css这些样式你还熟悉吗，Chrome调试工具还可以这样用

前端史塔克
522 阅读5分钟

css基础篇（第一篇）

开篇词

在前几篇文章中我们综合的讲解了 html 的基础用法，用两篇文章来综合的阐述了 html 基本用法以及浏览器的相关内容，如果 html 不太熟悉的话，建议好好看看之前的两章内容，在此之后我们要开启新的知识点了，那就是 css ，css对于整个前端来讲还是相当重要的，所以需要好好的学习和回顾。css 部分 一共分为 7 讲，都是阐述了 css 的基本用法，相对于 html 来说 css 的知识点还是挺多。在 css 熟悉之后，我会单独的加一篇文章来说明下 scss，这个对以后的工作是十分有用的，也是现在工作中要求掌握的东西，基本上在工作中 都是用的 sass / scss，所以需要好好学一学。

css是干什么

css 可以说是一个美容师，因为 html 知识结构，所以在单纯的结构需要加上衣服（css）去装饰，这就产生了css，css一般称之为——层叠样式表，css最大的贡献就是让 html 从样式中脱离，实现了两者之间的分离，html 专注于结构的呈现，而 css 专注于样式的呈现。

引入css的方式

引入css样式一般可以分为三种（详细见 图1）

  • 行内式：内联样式表—通过标签里面来设置，一般来讲在这里的样式只能影响到这个文件夹
  • 内部样式表：内嵌样式表。一般指得是在head中设置 style
  • 外部样式表：外联式，真正的样式和结构完全分离

1.png

css书写样式

保持一种良好的书写习惯也是十分重要的，在css中有以下几种基本需要遵守的书写习惯

  • 选择器用户指定 css 样式作用的 html 标签，花括号内是对该对象设置的具体样式
  • 属性和属性值以 “ 键值对 ” 形式出现
  • 属性是对指定的对象设置的样式属性，例如 字体大小、文本颜色等
  • 属性和属性值之间用英文 “ ： ” 隔开
  • 多个 “ 键值对 ”之间末尾用英文 “ ； ”进行区分

css选择器

类选择器

类选择器一般用 “ . ” 一个 点 来选择，标签中使用 class 例如：

<div class="content">我是内容</div>

<style>
.content {
	color: red;
}
</style>

这样选择的 div 这个字体就会变成红色 如 图2所示

2.png 除此之外，在类选择器中 也可以添加空格 然后写多个类，例如：

<div class="content center">我是内容</div>

<style>
.content {
	color: red;
}
.center {
	// 添加一个 text-align: center 让字体在页面中水平居中
	text-align: center;
}
</style>

如下图 3 所示

3.png

id选择器

除了 class 选择器之外，还有id选择器。id选择器是用 “ # ” 来选择的，在标签中添加 id=“ ”，然后在 style 中用 “ # ”选中 添加样式

<div id="blue">我是内容</div>

<style>
#blue{
	color: blue;
}
</style>

如下图 4 所示 4.png 注意：id选择器和类选择器最大的不同就是使用次数上

  • 类选择器：表示名字（可以重复调用）
  • id选择器：类似身份证只能单次调用，即使多次调用能生效，但是不建议这么做。

通配符选择器

“ * ” 表示讲页面中所有的选择全部更改，一般在工作中都会使用通配符讲所有的初始化的 margin 和padding 全部更改为 0 ，为了可以很好的控制。因为刚开始在浏览器上 margin 和 padding 是有值的。可以自己在代码中试试，看看加上这个之后 你的标签会出现那种不同。

 * {
	margin：0;
	padding: 0
}

基础选择器总结

  • 标签选择器：可以选出所有相同的标签，例如：p{ }
  • 类选择器：可以选出 一个 或 多个标签，例如：class = “ ”
  • id 选择器：一次只能选择一个标签，例如： id = “ ”
  • 通配符选择器：选择所有的标签，例如：*{ }

css 字体样式学习目标

font字体学习

  • font-size：大小 例如：font-size：20px；
  • font-family：字体 例如：font-family：‘微软雅黑’；
  • font-weight：字体粗细 例如：font-weight：400；
  • font-style：字体风格
  • font-style： 让字体倾斜 例如：font-style：italic；
  • font-style 让字体不倾斜 例如：font-style：normal；

注意：一般在实际的开发中 会将所有的body设置为 16px，如果在font-family 中设置多个字体的名字 会依次查找，然后依次选择。如果找到一个字体就直接用，后面就不需要查找。如果没找到继续向下找

font综合写法
  • font 有一个综合写法
  • font：font-style font-weight font-size / line-height font-family；
  • font：字体风格 字体粗细 字体大小 / 行高 设置那类字体； 注意：使用综合写法，必须按照顺序，各个属性用空格隔开，其中不需要设置的可以省略，但必须保留font-size和font-family属性

css 外观样式

  • color：文本颜色——16进制的需要加 “#”
    • 预定义的颜色写法：color：red；等
    • 十六进制写法：color：#ffffff；
    • RGB代码：color：rgb（255，255，255）
  • line-height：行间距
    • 一般情况下：行间距比字号大7、8像素属于正常
    • 写法：line-height：24px；
  • text-align：文本对齐方式
    • left：左对齐
    • right：右对齐
    • center：居中对齐
  • text-indent：首行缩进
    • text-indent：2em；（一个em表示一个字）
  • text-decoration：文本的装饰
    • text-decoration：取消下划线，定义标准的文本
    • text-decoration：underline： 定义文本下的一条线
    • text-decoration：overline： 定义文本上的一条线
    • text-decoration：line-through：定义穿过文本下的一条线

开发者工具（chrome）

调试工具——Chrome 在前端开发中Chrome的调试工具是非常具有调试的价值，可以用它来测试是否对错。所以掌握Chrome调试工具也是前端开发必备的技能之一。

5.png 好了，css第一篇就讲完了，有什么不明白的欢迎留言讨论

avatar
文章
阅读
粉丝