提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

CSS 基础 之 基础选择器+字体文本相关样式

基础CSS 相关 文本 样式 字体 选择器
2023-06-13 09:14:42 时间

目录

1、认识 CSS

1.1 CSS的介绍

1.2 CSS 语法规则

1.3 CSS 初体验

2、CSS引入方式

2.1 内嵌式

2.2 外联式

2.3 行内式

3、基础选择器

3.1 标签选择器

3.2 类选择器

3.3 id选择器

3.4 通配符选择器

4、字体样式

4.1 字体大小

4.2 字体粗细

4.3 字体样式（是否倾斜）

4.4 字体系列

5、文本样式

5.1 文本缩进

5.2 文本水平对齐方式

5.3 文本修饰

1、认识 CSS

1.1 CSS的介绍

CSS：层叠样式表（Cascading style sheets） ; 作用：给页面中的HTML标签设置样式

1.2 CSS 语法规则

css写在style标签中，style标签一般写在head标签里面，title标签下面。

1.3 CSS 初体验

我们先来认识一下CSS 常见的属性：

CSS 常见属性

作用

color

文字颜色

font-size

字体大小

background-color

背景颜色

width

宽度

height

高度

代码：

<!doctype html>
<html class="no-js" lang="">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<head>
  <style>
    p {
      color: #b3d4fc;
      font-size: 30px;
      background-color: aquamarine;
      width: 300px;
      height: 200px;
    }
  </style>
</head>

<body>
<p>我是什么颜色？</p>
</body>

</html>

效果：

注：

  • CSS 标点符号都是英文状态下的 。
  • 每一个样式键值对写完之后，最后需要写分号。

2、CSS引入方式

内嵌式

CSS 写在style标签中

外联式

CSS 写在一个单独的.css文件中

行内式

CSS 写在标签的style属性中

2.1 内嵌式

style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中。

代码演示：

2.2 外联式

需要通过link标签在网页中引入。

2.3 行内式

3、基础选择器

选择页面中对应的标签（找她），方便后续设置样式（改她）。

3.1 标签选择器

结构

标签名 { css属性名：属性值； } 。

作用

通过标签名，找到页面中所有这类标签，设置样式。

注意点

1. 标签选择器选择的是一类标签，而不是单独某一个 ； 2. 标签选择器无论嵌套关系有多深，都能找到对应的标签。

代码演示：

3.2 类选择器

结构

.类名 { css属性名：属性值； } 。

作用

通过类名，找到页面中所有带有这个类名的标签，设置样式。

注意点

1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）； 2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头 ； 3. 一个标签可以同时有多个类名，类名之间以空格隔开 ； 4. 类名可以重复，一个类选择器可以同时选中多个标签；

3.3 id选择器

结构

#id属性值 { css属性名：属性值； } ；

作用

通过id属性值，找到页面中带有这个id属性值的标签，设置样式；

注意点

1. 所有标签上都有id属性 ； 2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！ ； 3. 一个标签上只能有一个id属性值 ； 4. 一个id选择器只能选中一个标签；

3.4 通配符选择器

结构

#id属性值 { css属性名：属性值； } ；

作用

找到页面中所有的标签，设置样式

注意点

1. 开发中使用极少，只会在极特殊情况下才会用到

效果：

4、字体样式

字体大小

font-size

字体粗细

font-weight

字体样式

font-style

字体类型

font-family

4.1 字体大小

属性名

font-size

取值

数字 + px

注意点

谷歌浏览器默认文字大小是16px ;单位需要设置，否则无效

  1. 谷歌浏览器默认文字大小是16px ;
  2. 单位需要设置，否则无效

4.2 字体粗细

属性名

font-weight

取值

关键字： 正常——>normal 加粗 ——>bold纯数字：100~900的整百数：正常——>400 加粗 ——>700

注意点

不是所有字体都提供了九种粗细，因此部分取值页面中无变化实际开发中以：正常、加粗两种取值使用最多。

  1. 关键字： 正常——>normal 加粗 ——>bold
  2. 纯数字：100~900的整百数：正常——>400 加粗 ——>700

注意点

  1. 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
  2. 实际开发中以：正常、加粗两种取值使用最多。

4.3 字体样式（是否倾斜）

属性名

font-style

取值

正常（默认值）：normal；倾斜：italic；

  1. 正常（默认值）：normal；
  2. 倾斜：italic；

4.4 字体系列

属性名

font-family

常见取值

具体字体：微软雅黑、黑体、宋体、楷体等……sans-serif、serif、monospace等……

渲染规则：

1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体 2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点：

1. 如果字体名称中存在多个单词，推荐使用引号包裹 2. 最后一项字体系列不需要引号包裹 3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

  1. 具体字体：微软雅黑、黑体、宋体、楷体等……
  2. sans-serif、serif、monospace等……

渲染规则： 1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体 2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体 注意点： 1. 如果字体名称中存在多个单词，推荐使用引号包裹 2. 最后一项字体系列不需要引号包裹 3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

5、文本样式

文本缩进

text-indent

文本水平对齐方式

text-align

文本修饰

text-decoration

5.1 文本缩进

属性名

text-indent

取值

数字+px数字+em（推荐：1em = 当前标签的font-size的大小）

  1. 数字+px
  2. 数字+em（推荐：1em = 当前标签的font-size的大小）

5.2 文本水平对齐方式

属性名

text-align

取值

left ：左对齐center ： 居中对齐right：右对齐

注意点

如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置。text-align : center 能让哪些元素水平居中？ 1. 文本 ；2. span标签、a标签，3. input标签、img标签

  1. left ：左对齐
  2. center ： 居中对齐
  3. right：右对齐

注意点

  1. 如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置。
  2. text-align : center 能让哪些元素水平居中？ 1. 文本 ；2. span标签、a标签，3. input标签、img标签

5.3 文本修饰

属性名

text-decoration

取值：

underline 下划线line-through 删除线overline 上划线none 无装饰线

注意点

开发中会使用 text-decoration : none ; 清除a标签默认的下划线

  1. underline 下划线
  2. line-through 删除线
  3. overline 上划线
  4. none 无装饰线

注意点 开发中会使用 text-decoration : none ; 清除a标签默认的下划线

若有收获，就点个赞吧

相关文章