本文介绍了CSS的基础知识，从CSS的作用和语法规范到基础选择器的使用，包括标签选择器、类选择器、id选择器和通配符选择器。接着讲解了CSS字体属性，如字体系列、大小、粗细和文字样式，以及文本属性如颜色、对齐和缩进。文章强调了CSS在网页美化和布局中的重要性，并提倡良好的CSS代码风格。
web前端之CSS技术（一）
1. CSS简介
1.1 HTML的局限性
HTML只关注内容的语义，并没有修改外观样式，虽然HTML可以做简单的样式，但是代码会非常的臃肿和繁琐。
1.2 CSS——网页的美容师
CSS是层叠样式表(cascading style sheets)的简称，也会被称为CSS样式表或级联样式表。
CSS也是一种标记语言。
CSS主要用于设置HTML页面中的文本内容（如字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
简单来说，CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。
1.3 总结
- HTML主要做结构，显示元素内容
- CSS美化HTML，布局网页
- CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构---->HTML ，样式---->CSS相分离。
1.4 CSS语法规范
CSS规则由两个主要部分组成： 选择器 以及 一条或多条声明
- 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
- 属性和属性值之间用
:分开 - 多个“键值对”之间用
;分开
所有的样式都包含在<style>标签内，表示样式表，<style>一般写到</head>上方。如下所示：
<head>
<style>
h4 {
color: blue;
font-size: 100px;
}
</style>
</head>
1.5 CSS代码风格
-
样式格式书写
① 紧凑格式
h3 { color: red; font-size: 20px; }② 展开格式
h3 { color: red; font-size: 20px; }推荐使用第二种展开格式，代码书写更为直观。
-
样式大小写
推荐全部使用小写，特殊情况除外 -
空格规范
选择器（标签）和大括号之间保留空格
属性值和冒号之间保留空格
2. CSS基础选择器
2.1 CSS选择器的作用
选择器就是根据不同需求把不同的标签选出来。 简单来说，就是选择标签用的。
以上CSS做了两件事：
- 找到所有的h1标签。
选择器---->选对人 - 设置这些标签的样式，比如颜色设置为红色。
属性: 属性值;---->做对事
2.2 选择器分类
选择器分为 基础选择器 和 复合选择器 两大类。先说基础选择器。
- 基础选择器是由单个选择器组成
- 基础选择器又包括： 标签选择器 、类选择器 、 id选择器 和 通配符选择器 。
2.3 标签选择器
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定
统一的 CSS 样式。
-
语法：
标签名{ 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; ... } -
作用：
标签选择器可以把某一类标签全部选择出来，统一赋予样式。 -
优点：
能快速为页面中的同类标签统一设置样式 -
缺点：
不能设计差异化样式，只能设置全部的当前标签。
2.4 类选择器
可以差异化设置不同标签，单独设置一个或某几个标签
-
语法：
.类名 { 属性1
最低0.47元/天 解锁文章
扫一扫
4476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
