CSS基础知识（一）CSS选择器、字体、文本属性

Tom221231

于 2023-01-06 19:18:55 发布

阅读量210

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_67961228/article/details/128581830

版权

1、CSS层叠样式表的基本简介

内容：是一种标记语言，设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
html的局限性：只关注内容的语义，丑，臃肿繁琐
css的作用：美化html，布局网页
css最大的价值在于由html专注去做结构，实现结构和布局的分离

2、CSS使用规则

由两个主要的部分构成：选择器以及一条或者多条声明

<head>
     <style>
     h1 {
          color: red;
        }
     </style>
</head>

选择器是用于指定CSS样式的html标签，{}内是对该对象设置的具体样式
属性和属性值以”键值对“的形式出现，属性属性值之间用；分开
每个属性书写完后一定要加；

3、CSS代码风格

格式：紧凑格式和展开格式（推荐使用展开格式）
大小写：小写书写（特殊情况除外）
空格规范：在属性值前面，冒号后面，保留一个空格
h1（空格）{color：（空格）red;}

4、CSS选择器的作用和分类

作用：选择标签
分类：基础选择器和复合选择器
基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

4.1、标签选择器

用html标签名称作为选择器
特点：会某一类标签全部选出来，不能差异化

4.2、类选择器

单独选择一个或某几个标签，需要用class属性来调用（使用较多）

<style>
     .red {
          color: red;
          }
</style>     
   
<div class=“red”>变红色</div>

特点：
1、类选择器用点定义样式
2、结构用class类调用
3、标签可以有一个或多个

命名规范：
1、长名称或词组可以使用中横线来为选择器命名，不要使用纯数字、中文等命名，尽量使用英文字母来表示（类名：star-sing）
2、命名要有意义，能让人看出来命名的是什么

多类名的使用方式：<div class="red font20">多类名</div>（多个类名之间用空格分开）
多类名的使用场景：把一些标签元素相同的样式放到一个类里面，这些标签都可以调用这个公共的类，然后再调用自己独有的类，从而节省CSS代码，便于统一修改

4.3、id选择器

id选择器一般用于页面唯一性的元素上，经常和javascript搭配使用

#star {
      color：pink;
      }

<div id="star">id选择器</div>

特点：
1、id选择器用#定义样式
2、结构用id类调用
3、只能调用一次

类选择器在修改样式用的最多，id选择器一般用于页面唯一性的元素上，经常和javascript搭配使用

4.4、通配符选择器

把页面中所有的标签统一修改样式

* {
   属性1：属性值；
   属性2：属性值；
   }

不需要调用样式，只在特殊情况下使用

5、字体font-family

使用font-family属性定义字体
字体之间用，隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号“”
尽量使用电脑系统默认自带的字体
最常见的字体：

font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';

5.1、字体大小font-size

使用font-size定义字体大小

font-size：20px；

px（像素）大小是我们网页中最常用的单位（别忘记写px）
谷歌浏览器默认的大小是16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给出明确值，不要默认大小
可以给body指定整个页面文字的大小，标题标签比较特殊，需要单独制定大小

5.2、字体粗细font-weight

使用font-weight设置文本字体的粗细

font-weight：700；

参数：
normal正常 400
bold粗体 700
700后面不要跟单位，等价于bold，都是加粗的效果
实际开发中，更喜欢用数字来表示加粗或者变细的效果
一般是把粗体变正常，只需要修改参数为400

5.3、斜体font-style

使用font-style设置文本的风格

font-style: normal;

normal：默认值，浏览器会显示标准字体的格式
italic：斜体
一般很少给文字加斜体，反而要给斜体标签（em、i）改为不倾斜字体

em {
    font-style: normal;}

5.3、字体的复合属性

font：font-style font-weight font-size/line-height font-family;

font：italic 700 16px 'MIcrosoft yahei'

要求：
不能随意改变顺序，各个属性之间以空格隔开
不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font将不起作用

6、文本属性

定义文本的外观，比如颜色、对齐文本、装饰文本、文本缩进、行间距等

6.1、颜色color

表示：
预定义的颜色值：red、green、blue
十六进制：#FF0000（开发中使用）
RGB代码：rgb（255，0，0）（red，green，blue的缩写）

十六进制颜色如果有两两相同可以简写，#666666 简写为#666 #ff00ff简写为#f0f

6.2、对齐text-align

只能设置水平对齐

div {text-align: center;}

left（默认）、right、center

6.3、下划线text-decoration

div {text-decoration: underline;}

none：没有装饰线（最常用）（默认）
underline：下划线（常用）
overline：上划线（几乎不用）
line-through：删除线（不常用）

链接会默认有下划线，可以通过none修改

6.4、缩进text-indent

文本第一行首行缩进

div {text-indent: 20px;}

或者

div {text-indent: 2em;}

如果写了2em，则是缩进当前2个文字大小的距离
em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小

6.5、行间距line-height

行与行之间的距离，包含了上下间距和文本高度

div {line-height: 25px;}

如果遇到多行文字，从第一行的最下沿到第二行的最上沿就是行高

7、CSS的引入方式

按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类：
1、行内样式表（行内式）
2、内部样式表（嵌入式）
3、外部样式表（链接式）

7.1、内部样式表

写在HTML页面内部，将所有CSS代码抽取出来，单独放到一个<style>标签里，通过此种方式，可以控制当前整个HTML页面

特点：代码结构清晰，但没有实现结构样式完全分离
使用内部样式表设定CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

<style>标签理论上可以放在HTML文档的任何地方，但一般会放在<head>标签里

7.2、行内样式表

在元素标签内部的<style>属性中设定CSS样式，适合于修改简单样式

<div style="color: red; font-size: 12px;">芜湖
</div>

可以控制当前的标签设置样式

特点：由于书写繁琐，并且没有体现结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
使用行内式样式表设定CSS，通常也被称为行内式引入

style其实就是标签的属性
在双引号中间，写法要符合CSS规范

7.3、外部样式表

适用于样式较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用（实际开发中使用）

引入外部样式表分为两步：
1、新建后缀为.css的样式文件，把所有的CSS代码放到此文件中（css文件里面只有样式没有标签）
2、在HTML页面中，使用<link>标签引入这个文件

<head>    
     <link rel="stylesheet" href=“css文件路径”>
</head>

rel：定义当前文档与被链接文档之间的关系，在这里要指定为“stylesheet”，表示被链接的文档是一个样式表文件
href：定义所链接外部样式表的URL，可以是相对路径，也可以是绝对路径

使用外部样式表设定CSS，通常也被称为外链式或链接式引入，这种方式是开发中最常用的方式

用快捷键link+Tab可以快速创建代码