热门标签
热门文章
- 1第11章 Tkinter 概述_51:/##y6h6ubdyl##1:/＄wbsmkqt＄11:/￥ubsd5akboofpxgpk
- 2记录在项目中引用本地的npm包
- 3html 列表标签 ul ol dl_html中dl自动编号
- 4ELF文件结构描述_、简述elf 文件的内部层次结构。
- 5Spring6详解-概述，入门
- 6flutter图片预览photo_view_flutter photo_view
- 7xcode6(ios8) 编译出现 CodeSign error_codesign error with: 2
- 8华为三层交换机 VLANIF 配置_vlanif的ip地址给谁配置的
- 9超详细的 K8s 高频面试题，绝对实用篇
- 10SAP ADM100-2.3 系统启动：AS ABAP和AS ABAP+JAVA_sap netweaver java administrator console
当前位置: article > 正文
前端开发学习笔记2 （CSS简介、CSS基础选择器、CSS字体属性、CSS文本属性和CSS引入方式）
作者：weixin_40725706 | 2024-04-02 19:57:02
赞
踩
前端开发学习笔记2 （CSS简介、CSS基础选择器、CSS字体属性、CSS文本属性和CSS引入方式）
CSS简介
CSS基本介绍
- 基本作用：CSS主要是对网页进行布局和美化。HTML语言中只关注内容的语义，而忽略了网页的布局和外观，因此我们需要使用CSS。CSS可以设置HTML中的文本样式、图片样式、版面布局和外观显示样式。
- 名称介绍：CSS是层叠样式表的简称，有时候也会被称为CSS样式表或级联样式表。
CSS基本语法规范
-
基本组成：CSS规则由选择器以及一条或多条声明组成。
- 选择器：指定需要进行CSS样式设置的HTML标签；
- 声明：对指定的标签进行设置的样式，用一个大括号进行表示；每一条声明表示一种样式设置，多个声明之间通过英文分号进行隔开；属性和属性值之间以键值对的形式进行表示。具体表示形式为：
标签名 {样式1: 样式1的属性值; 样式2: 样式2的属性值;...}。
-
写在代码中的位置：常常在网页头部尾标签
</head>前写一对<style></style>标签，其中插入选择的样式。通过这样的方式，就实现了网页设计的样式和结构（写在<body>标签中）相分离。
CSS代码风格
- 注意事项：代码风格不是强制规范，而是符合实际开发习惯的书写方式。
- 样式格式书写：更加推荐展开格式的书写，因为更加直观。
- 紧凑格式：
标签名 { 样式1: 样式1的值; 样式2: 样式2的值}。 - 展开格式：
- 紧凑格式：
标签名 {
样式1: 样式1的值;
样式2: 样式2的值；
}
- 1
- 2
- 3
- 4
- 样式大小写：推荐样式选择器、属性名和属性关键值都采用小写字母。
- 空格规范：
- 习惯于属性值之前冒号之后保留一个空格；
- 习惯于在选择器和大括号之间保留一个空格；
CSS基础选择器
选择器的作用和分类
- 选择器的作用：根据不同的需求将需要进行样式设置的标签选择出来。
- 选择器的分类：可以分为基础选择器和复合选择器两类。
- 基础选择器：
- 基本组成：由单个选择器组成。
- 包含范围：标签选择器、类选择器、id选择器和通配符选择器。
标签选择器
- 基本概念：用HTML标签名称作为选择器，按照标签名称分类，为页面中某一类标签指定统一的CSS样式。
- 基本语法：
标签名 {属性1: 属性值1; 属性2: 属性值2}。 - 选择器优点：能够为页面中同类型的标签统一设置样式。
- 选择器缺点：不能对同一标签进行差异性设置。
- 基本语法：
类选择器
- 基本作用：可以实现差异化选择，单独选择一个或某几个标签。
- 使用语法：首先，创建一个样式类，语法为
.类名{属性1: 属性值1; 属性2:属性值2}；接着，所有需要设置为该类别样式的标签，只需要将自己的类的class属性的值设置为该类的类名即可。 - 选择器优点：实际开发过程中使用最多的选择器，可以通过定义一个类，多次进行使用，非常方便。
- 注意事项：命名要有意义，不要随便起名；不要使用纯数字和中文进行命名，尽量使用英文进行表示。
- 多类名使用方式：
- 基本作用：可以为一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。
- 注意事项：为一个标签设置多个类名时，多个类名之间需要用空格进行分隔。具体表示为：
class="类别1 类别2"。
id选择器
- 基本作用：可以为标有特定id的HTML元素指定特定的样式。
- 使用语法：首先，创建一个样式，语法为：
#id名称 {属性1: 属性值1; 属性2: 属性值2}，然后将需要进行样式设置的标签的id属性的值设置为定义好的id名称即可。 - 和类选择器的区别：id选择器只能被代码中一个标签调用，如果有一个标签已经调用了，则其他标签无权调用。可以理解为，id是每一个标签唯一的，不得重复。
通配符选择器
- 基本作用：选择页面中的所有元素；
- 使用语法：以星号创建一个样式，具体的语法为：
* {属性1: 属性值1; 属性2: 属性值2}。 - 注意事项：通配符选择器不需要进行调用，自动给所有元素使用样式。
CSS字体属性
font-family字体类型设置
- 属性作用：设置文本的字体类型；
- 常用属性值：“
Microsoft Yahei” “Arial” "tahoma,arial"等。 - 设置多个字体：样式中也可以同时设置多种字体，表示如果用户电脑未安装第一种字体，则会执行第二个字体，以此类推。需要注意的是，各个字体之间以英文逗号进行分隔。
- 注意事项：谷歌浏览器的默认字体是微软雅黑。
- 常用形式：使用标签选择器给
<body>标签中的所有文本内容设置字体类型。
font-size字体大小设置
- 属性作用：设置文本的字体大小；
- 属性值：一个数字加上"
px"构成，其中px即像素，是网页中最常用的大小单位。对于谷歌浏览器，默认的文字大小是16像素。 - 注意事项：对于不同的浏览器默认的字体大小可能不一致，因此推荐给出一个明确的字体大小而不是直接采用默认字体大小。
- 常用形式：使用标签选择器给
<body>标签中的所有文本内容设置字体大小。
font-weight字体粗细设置
- 属性作用：设置字体的粗细；
- 可选属性值：
normal表示正常字体，bold表示粗体，bolder表示特粗体，lighter表示细体。另外，还可以使用整数表示具体的粗细（实际开发过程中更加提倡），例如bold对应的数字是700。
font-style字体样式设置
- 属性作用：定义字体显示的风格，主要是斜体和非斜体。
- 属性值：默认值为
normal，表示标准的字体样式；italic表示斜体样式。 - 使用场景：一般情况下很少给文字加斜体，但是常常用该属性让斜体标签变为不倾斜的字体。
font字体复合属性设置
- 属性作用：同时设置字体的多个属性，节约代码空间。
- 使用语法：
font: font-style属性值 font-weight属性值 font-size属性值 font-family属性值； - 注意事项：
- 上面四个属性值之间的顺序不能颠倒，属性值之间以空格进行分隔。
- 不想设置的属性值可以省略（此时会自动取默认值），但是必须保留
font-size和font-family两个属性的属性值。
CSS文本属性
color文本属性设置
- 属性作用：用于设置文本的颜色；
- 属性值：
- 预设值：例如
red，green，blue和pink等。 - 十六进制：例如
#FF0000等，需要注意的是十六进制要用#开头。实际开发过程中这是最常用的使用方式。 - RGB代码：例如
rgb(255,0,0)等。
- 预设值：例如
text-align文本对齐设置
- 属性作用：用于设置文本的水平对齐方式（即左对齐、居中对齐和右对齐）；
- 属性值：
left是左对齐，right是右对齐，center是居中对齐。其中左对齐是默认值。
text-decoration文本装饰线设置
- 属性作用：用于设置文本的装饰线，包括下划线、删除线和上划线等。
- 属性值：
none表示无装饰，为默认值；underline表示下划线，是一个常用的线形（超链接自带下划线）；overline表示上划线（很少使用）；line-through表示删除线（几乎不用）。
text-indent文本缩进设置
- 属性作用：设置指定区域文本的第一行的缩进方式，通常是将段落的首行进行缩进。
- 属性值：
- 以像素为单位：一个整数加上"
px"结尾，表示缩进多少个像素值。也可以设置为一个负数，只是这种情况很少用。 - 以相对文字大小为单位：以当前元素中的字体大小作为一个单位，用一个整数加上"
em"结尾，表示用指定个单位的距离作为缩进距离。如果当前元素没有设置字体大小，则会采用父元素中的字体大小。
- 以像素为单位：一个整数加上"
line-height行间距设置
- 属性作用：设置某一区域中我呢本的行间距，即相邻行之间的距离。
- 属性值：用像素值进行表示，仍然采用整数值+"
px"的方式。 - 注意事项：修改行间距不会修改文本本身的高度。
CSS引入方式
- CSS样式表的分类：按照CSS样式书写的位置（也被称为引入的方式），CSS样式表可以分为内部样式表（嵌入式）、行内样式表（简称行内式）和外部样式表（链接式）三类。
- 内部样式表：
- 使用方法：将CSS部分的代码写在HTML页面的内部，即将所有的CSS代码抽取出来，单独放到一个
<style>标签中。 - 注意事项：
<style>标签理论上可以放在HTML文档中的任何位置，但是一般会放在<head>标签中。 - 控制范围：可以方便地控制整个网页页面中的元素样式。
- 优点缺点：代码结构非常清晰，但是没有实现结构和样式完全分离。
- 使用方法：将CSS部分的代码写在HTML页面的内部，即将所有的CSS代码抽取出来，单独放到一个
- 行内样式表：
- 使用方法：直接在元素标签内部设置style属性的值为指定的CSS样式，例如
<div style="color: red; font-size: 12px;">。 - 适用情况：该类型的样式表适用于修改简单样式。
- 使用方法：直接在元素标签内部设置style属性的值为指定的CSS样式，例如
- 外部样式表：
- 类型地位：在实际开发过程中采用的都是外部样式表，也是推荐使用的方式。
- 适用场景：适用于样式非常多的情况。
- 核心内容：将样式单独写入到一个CSS文件中，之后把CSS文件引入到HTML页面中进行使用。
- 使用方法：首先，新建一个后缀名为
.css的文件，然后再在里面写入CSS代码（写代码的方式和其他两种样式表相同）；接着，在HTML界面中，使用<link>标签引入这个文件，使用语法为<link rel="stylesheet" href="CSS文件路径">。
- 内部样式表：
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/353585
推荐阅读
相关标签
