CSS基础选择器

CSS 基础选择器

  • 基础选择器由单个选择器组成

  • 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器

标签选择器

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

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

类选择器

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

类选择器用 . 号显示。

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

多类名

类名间用空格分开

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

id 选择器

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

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

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

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

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

通配符选择器

用 * 定义通配符选择器，选取页面中 所有标签。

1
2
3
4
* {
    属性1: 属性值1;
    ...
}

基础选择器总结

基础选择器 作用 特点 使用情况 用法
标签选择器 选中所有相同标签 不能差异化选择 较多 p{color:red;}
类选择器 选出一个或多个标签 可以根据需求选择 较多 .nav {color: red;}
id 选择器 一次只能选出一个标签 一个 id 属性在页面中只能出现一次 一般配合 js 使用 #nav {color: red;}
通配符选择器 选择所有标签元素 选择的太多，有部分不需要 特殊情况使用 * {color: red; }

字体属性

字体系列

font-family 属性定义文本字体系列，， 分隔

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

字体大小

font-size 属性定义字体大小。常用 px作为单位

1
2
3
body {
  font-size: 16px;
}

字体粗细

font-weight 属性设置字体粗细，400为normal，700 为 bold

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

文字样式

font-style 属性设置文本风格，normal 为 正常显示，italic 为 斜体

1
p { font-style: italic; }

字体符合属性写法

将各种字体属性写在同一选择器下，节约代码。严格遵守顺序，且 font-sieze 和 font-family 必须有。

1
2
3
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 属性连写 顺序不能变，字体和字号属性必须有

文本属性

文本颜色

color 属性定义文本颜色，属性值可为 预定义的颜色值（如：red），十六进制（如#fff），RGB 代码（如rgb(255,255,255)）。十六进制最常用

1
2
3
div {
  color: red;
}

文本对齐

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

1
2
3
4
5
6
7
8
/*
left 左对齐（默认）
rigth 右对齐
cneter 居中对齐
*/
div {
  text-align: center;
}

装饰文本

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

1
2
3
4
5
6
7
/*
none	默认，无装饰（最常用）
underline	下划线，a 标签自带（常用）
overline	上划线。（几乎不用）
line-through	删除线。（不常用
*/
text-decoration: underline;

文本缩进

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

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

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

行间距

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

文本属性总结

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

引入方式

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

  • 行内样式表（行内式）
  • 内部样式表（嵌入式）
  • 外部样式表（链接式）

行内样式表

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

1
<div style="color: red; font-size: 12px">行内样式表</div>

内部样式表

将 CSS 代码写在 HTML 页面内部，单独放在一个 <style> 标签中。<style> 理论上可以放在 HTML 文档中任何一个地方，一般放在 <head> 标签中。

外部样式表

样式单独写到 CSS 文件中，再将 CSS 文件引入到 HTML 页面中。适用于样式比较多的情况

1
<link rel="stylesheet" href="css文件路径" />