一篇教会你css基础语法
CSS简介
html局限性
HTML 是网友的骨架，只关注内容的语义。例如<h1>表示大标题，<p>表示段落。
早期的时候，HTML 只能做一些简单的样式，网页非常丑，而且使 HTML 代码臃肿。
css网页的美容师
CSS 是 层叠样式表（Cascading Style Sheets）的简称。
CSS 也是一种标记语言。
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。·
HTML 呈现结构，CSS 决定样式，结构与样式分离。
CSS语法规范
CSS规则由两部分组成：选择器和一条或多条声明。
CSS代码风格
- 展开式
- 选择器，属性名，属性关键字全部小写
- 空格规范
CSS基础选择器
选择器分为基础选择器和复合选择器两大类。
- 基础选择器由单个选择器组成。
- 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器。
标签选择器
直接用 HTML 标签名作为选择器，按标签名称分类，为页面某一类标签指定统一的 CSS 样式。
h1{
color: pink;
background-color: aliceblue;
font-size: large;
}
-
优点 标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。
-
缺点 不能设置差异化样式，只能选择全部当前标签。
类选择器
差异化选择不同标签，单独选一个或者某个标签。
语法
使用 class 属性来调用 class 类，样式点定义，结构类调用，一个或多个，开发最常用。
注意
- 类选择器用
.标识，紧跟类名。 - 小写，使用
-连接单词。 - 不要用纯数字、中文。
- 命名有意义
<p class="class-name1"></p>
类选择器多类名
类名间用空格分开
<p class="class-name1 class-name2"></p>
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，用 # 来定义。
#pink{
color: green;
background: blue;
font-size: large;
}
样式 # 定义，结构 id 调用，别人切勿使用。
- 类选择器可以被多个元素调用。
- id 选择器只能允许一个标签调用。
- 类选择器使用的较多，id 选择器用于唯一特性的标签。
通配符选择器
语法
*{
color: green;
background: blue;
font-size: large;
}
- 用
*定义通配符选择器，选取页面中所有标签。 - 不需要调用，自动给所有标签。
- 特殊情况使用
基础选择器总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 选中所有相同标签 | 不能差异化选择 | 较多 | p{color:red;} |
| 类选择器 | 选出一个或多个标签 | 可以根据需求选择 | 较多 | .nav {color: red;} |
| id 选择器 | 一次只能选出一个标签 | 一个 id 属性在页面中只能出现一次 | 一般配合 js 使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有标签元素 | 选择的太多，有部分不需要 | 特殊情况使用 | * {color: red; } |
- 每个选择器都有自己的使用场景，都要掌握。
- 如果是修改样式，类选择器是使用最多的。
CSS字体属性
字体系列
CSS 使用 font-family 属性定义文本字体系列。 尽量使用默认字体，保证不同浏览器的兼容性。
body {
font-family: "微软雅黑", Arial, Helvetica, sans-serif;
}
px大小是我们网页常用单位- 谷歌浏览器默认是
16px - 可以给
body指定整个页面文字大小
字体粗细
CSS 使用 font-weight 属性设置字体粗细
p {
font-weight: 700;
}
文字样式
CSS 使用 font-style 属性设置文本风格。
p { font-style: italic; }
| 属性值 | 描述 |
|---|---|
| normal | 正常显示 |
| italic | 斜体 |
字体复合属性写法
将各种字体属性写在同一选择器下，节约代码。
规则
严格遵守顺序，且 font-sieze 和 font-family 必须有。
body {
font: font-style font-weight font-size/line-hight font-family;
}
字体属性总结
| 字体属性 | 表示 | 注意 |
|---|---|---|
| font-size | 字号 | 单位是 px |
| font-family | 字体 | 按照团队约定来写 |
| font-weight | 字体粗细 | 400=normal，700=bold |
| font-style | 字体样式 | italic，normal，常用 normal |
| font | 属性连写 | 顺序不能变，字体和字号属性必须有 |
CSS文本属性
CSS Text（文本）属性定义文本外观，比如颜色、对齐、装饰、缩进、行间距等。
文本颜色
color 属性定义文本颜色。
div {
color: red;
}
对齐文本
text-align 属性用于设置元素文本内容的对齐方式。
div {
text-align: center;
}
| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认） |
| right | 右对齐 |
| center | 居中对齐 |
装饰文本
text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
text-decoration: underline;
| 属性值 | 描述 |
|---|---|
| none | 默认，无装饰（最常用） |
| underline | 下划线，a 标签自带（常用） |
| overline | 上划线。（几乎不用） |
| line-through | 删除线。（不常用） |
文本缩进
text-indent定义段落首行缩进。
p {
text-indet: 5px;
}
行间距
line-height 设置行间的距离，行间距=文本高度+上间距+下间距
CSS引用方式
按照 CSS 书写的位置不同，CSS 样式表可以分为三大类：
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）
内部样式表
将 CSS 代码写在 HTML 页面内部，单独放在一个 <style> 标签中。
<style>理论上可以放在 HTML 文档中任何一个地方，一般放在<head>标签中。- 方便控制整个页面中的元素样式。
练习时使用，实际开发不用。
行内样式表
行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合修改简单样式。
<div style="color: red; font-size: 12px">行内样式表</div>
- 设置当前标签样式
- 书写繁琐，不推荐大量使用。
外部样式表
实际开发中都是外部样式表，适用于样式比较多的情况。 核心：样式单独写到 CSS 文件中，再将 CSS 文件引入到 HTML 页面中。
<link rel="stylesheet" href="css文件路径" />
扫一扫
190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
