Featured image of post (一)CSS简介与基础选择器

(一)CSS简介与基础选择器

(一)CSS 简介与基础选择器

1. CSS 简介

1.1 HTML 的局限性

HTML 是网友的骨架,只关注内容的语义。例如<h1>表示大标题,<p>表示段落。

早期的时候,HTML 只能做一些简单的样式,网页非常丑,而且使 HTML 代码臃肿。

1.2 CSS-网页的美容师

CSS 是 层叠样式表(Cascading Style Sheets)的简称。

CSS 也是一种标记语言。

CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。·

HTML 呈现结构,CSS 决定样式,结构与样式分离。

1.2 CSS 语法规范

CSS 规则由两个部分组成:选择器和一条或多条声明。

1.3 CSS 代码风格

  • 展开式
  • 选择器,属性名,属性关键字全部小写
  • 空格规范

2. CSS 基础选择器

2.1 选择器的作用

选择器就是根据不同需求把不同标签选择出来。

2.2 选择器分类

选择器分为基础选择器和复合选择器两大类。

  • 基础选择器由单个选择器组成
  • 基础选择器包括:标签选择器、类选择器、id 选择器和通配符选择器

2.3 标签选择器

直接用 HTML 标签名作为选择器,按标签名称分类,为页面某一类标签指定统一的 CSS 样式。

语法

1
2
3
4
5
标签名 {
    属性1: 属性值1;
    属性2: 属性值2;
    属性3: 属性值3;
}

优点 标签选择器可以把某一标签全部选择出来,快速为同类型标签设置统一样式。

缺点 不能设置差异化样式,只能选择全部当前标签。

2.4 类选择器

差异化选择不同标签,单独选一个或者某个标签。

语法

使用 class 属性来调用 class 类,样式点定义,结构类调用,一个或多个,开发最常用。

类选择器用 . 号显示。

注意

  1. 类选择器用 . 标识,紧跟类名。
  2. 小写,使用 - 连接单词。
  3. 不要用纯数字、中文。
  4. 命名有意义。

2.4.1 类选择器-多类名

类名间用空格分开

1
<p class="class-name1 class-name2"></p>

2.5 id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器,用 # 来定义。

1
2
3
4
#id名 {
    属性1: 属性值1;
    ...
}

样式 # 定义,结构 id 调用,别人切勿使用。

id 选择器与类选择器的区别

  1. 类选择器可以被多个元素调用。
  2. id 选择器只能允许一个标签调用。
  3. 类选择器使用的较多,id 选择器用于唯一特性的标签。

2.6 通配符选择器

语法

1
2
3
4
* {
    属性1: 属性值1;
    ...
}
  • * 定义通配符选择器,选取页面中所有标签。
  • 不需要调用,自动给所有标签。
  • 特殊情况使用
1
2
3
4
* {
    margin: 0;
    padding: 0;
}

2.7 基础选择器总结

基础选择器 作用 特点 使用情况 用法
标签选择器 选中所有相同标签 不能差异化选择 较多 p{color:red;}
类选择器 选出一个或多个标签 可以根据需求选择 较多 .nav {color: red;}
id 选择器 一次只能选出一个标签 一个 id 属性在页面中只能出现一次 一般配合 js 使用 #nav {color: red;}
通配符选择器 选择所有标签元素 选择的太多,有部分不需要 特殊情况使用 * {color: red; }
  • 每个选择器都有自己的使用场景,都要掌握。
  • 如果是修改样式,类选择器是使用最多的。

3. CSS 字体属性

3.1 字体系列

CSS 使用 font-family 属性定义文本字体系列。 尽量使用默认字体,保证不同浏览器的兼容性。

1
2
3
body {
  font-family: "微软雅黑", Arial, Helvetica, sans-serif;
}

3.2 字体大小

CSS 使用 font-size 属性定义字体大小。

1
2
3
body {
  font-size: 16px;
}
  • px 大小是我们网页常用单位
  • 谷歌浏览器默认是 16px
  • 可以给 body 指定整个页面文字大小

3.3 字体粗细

CSS 使用 font-weight 属性设置字体粗细

1
2
3
p {
  font-weight: 700;
}

实际开发中,更常用数字来表示加粗或变细。400normal700bold。 |属性值|描述| |-|-| |normal|默认值| |bold|定义粗体| |100-900|400 等价于 normal,700 等价于 bold,无单位|

3.4 文字样式

CSS 使用 font-style 属性设置文本风格。

1
p { font-style: italic; }Copy to clipboardErrorCopied
属性值 描述
normal 正常显示
italic 斜体

注意:平常很少给字体加斜体,而是给斜体标签(em,i)给位不倾斜字体。

3.5 字体复合属性写法

将各种字体属性写在同一选择器下,节约代码。

规则

严格遵守顺序,且 font-siezefont-family 必须有。

1
2
3
body {
  font: font-style font-weight font-size/line-hight font-family;
}

3.6 字体属性总结

字体属性 表示 注意
font-size 字号 单位是 px
font-family 字体 按照团队约定来写
font-weight 字体粗细 400=normal,700=bold
font-style 字体样式 italic,normal,常用 normal
font 属性连写 顺序不能变,==字体和字号属性必须有==

4. CSS 文本属性

CSS Text(文本)属性定义文本外观,比如颜色、对齐、装饰、缩进、行间距等。

4.1 文本颜色

color 属性定义文本颜色。

1
2
3
div {
  color: red;
}

属性值 |表示颜色|属性值| |-|-| |预定义的颜色值|red,green,pink| |十六进制|#FF0000,#FF6600| |RGB 代码|rgb(255,0,0)|

实际开发中,最常用的是十六进制。

4.2 对齐文本

text-align 属性用于设置元素文本内容的对齐方式。

1
2
3
div {
  text-align: center;
}
属性值 解释
left 左对齐(默认)
right 右对齐
center 居中对齐

4.3 装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

1
text-decoration: underline;
属性值 描述
none ==默认,无装饰(最常用)==
underline ==下划线,a 标签自带(常用)==
overline 上划线。(几乎不用)
line-through 删除线。(不常用)

4.4 文本缩进

text-indent定义段落首行缩进。

1
2
3
p {
  text-indet: 5px;
}

em 是一个相对单位,1em 就是一个字符所占大小。当 text-indent=2em,则恰好缩进两个文字。

4.5 行间距

line-height 设置行间的距离,行间距=文本高度+上间距+下间距

4.6 文本属性总结

属性 表示 注意
color 文本颜色 通常十六进制缩写
text-align 文本对齐
text-indent 文本缩进 记住 text-indent: 2em;
text-decoration 文本装饰 记住下划线和去除下划线
line-height 行高

5. CSS 引用方式

按照 CSS 书写的位置不同,CSS 样式表可以分为三大类:

  1. 行内样式表(行内式)
  2. 内部样式表(嵌入式)
  3. 外部样式表(链接式)

5.1 内部样式表

将 CSS 代码写在 HTML 页面内部,单独放在一个 <style> 标签中。

  • <style> 理论上可以放在 HTML 文档中任何一个地方,一般放在 <head> 标签中。
  • 方便控制整个页面中的元素样式。

==练习时使用,实际开发不用。==

5.2 行内样式表

==行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式,适合修改简单样式。==

1
<div style="color: red; font-size: 12px">行内样式表</div>
  • 设置当前标签样式
  • ==书写繁琐,不推荐大量使用。==

5.3 外部样式表

实际开发中都是外部样式表,适用于样式比较多的情况。 核心:样式单独写到 CSS 文件中,再将 CSS 文件引入到 HTML 页面中。

引入格式

1
<link rel="stylesheet" href="css文件路径" />
Licensed under CC BY-NC-SA 4.0
Powered by GitHub.Pages
Built with Hugo
主题 StackJimmy 设计
© Licensed Under CC BY-NC-SA 4.0