CSS的基础知识点

最新推荐文章于 2024-04-19 20:33:06 发布

Just-Lsy

最新推荐文章于 2024-04-19 20:33:06 发布

阅读量406

点赞数 2

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/m0_59030524/article/details/121048845

版权

笔记专栏收录该内容

69 篇文章 6 订阅

订阅专栏

1.CSS简介

1.1 CSS-网页美容师

CSS 是层叠样式表（Cascading Style Sheets）的简称。

CSS 也是一种标记语言。

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

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

2.CSS基础选择器

选择器分类

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

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

2.1 标签选择器

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

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

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

2.2 类选择器

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

2.2.1 语法

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

类选择器用 . 号显示。

注意

类选择器用 . 标识，紧跟类名（自己起的，但不能用标签名）。
小写，使用 - 连接单词。
不要用纯数字、中文。
命名有意义。

2.2.2 课堂案例

制作盒子：

2.2.3 类选择器-类多名

（1）在标签class属性中写多个类名

（2）多个类名之间必须用空格分开

2.3 id选择器

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

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

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

类选择器可以被多个元素调用。
id 选择器只能允许一个标签调用。
类选择器使用的较多，id 选择器用于唯一特性的标签。
类选择器在修改样式中用得多，id选择器一般用于页面唯一性元素上，经常和JavaScript搭配使用

2.4 通配符选择器

语法

* {
    属性1: 属性值1;
    ...
}

用 * 定义通配符选择器，选取页面中所有标签。
不需要调用，自动给所有标签。
特殊情况使用

* {
    margin: 0;
    padding: 0;
}

2.5 总结

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

每个选择器都有自己的使用场景，都要掌握。
如果是修改样式，类选择器是使用最多的。

3.CSS字体属性

3.1 字体系列

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

p {font-family: "微软雅黑";}
div{font-family:Arial,"微软雅黑","Microsoft Yahei"}

注意：

各种字体之间必须使用英文状态下的逗号隔开

一般情况下，如果有空格隔开的多个单词组成的字体，加引号

尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

3.2 字体大小

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

body {
  font-size: 16px;
}

px 大小是我们网页常用单位
谷歌浏览器默认是 16px
可以给 body 指定整个页面文字大小

3.3 字体粗细

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

p {
  font-weight: 700;
}
.bold{
    font-weight:bold;
}

上面两个写法是一样的意思，数值的后面不用跟单位，700和bold等价都是加粗的效果

实际开发中，更常用数字来表示加粗或变细。400为normal（默认值），700 为 bold。

3.4 文字样式

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

p { font-style: italic; }

属性值	描述
normal	正常显示
italic	斜体

注意：平常很少给字体加斜体，而是给斜体标签（em,i）给位不倾斜字体。

3.5 字体复合属性

规则

严格遵守顺序，且 font-sieze 和 font-family 必须有。

3.6 字体属性总结

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

4 文本属性

4.1 文本颜色

color属性定义文本颜色

4.2 文本对齐

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

4.3 装饰文本

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

4.4 文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

div {
text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

p {
text-indent: 2em;
}

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元
素的 1 个文字大小。

4.5 行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.

p {
line-height: 26px;
}

4.6 文本属性总结

5 CSS的引入方式

5.1 内部样式表

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。

 <style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中
 通过此种方式，可以方便控制当前整个页面中的元素样式设置
 代码结构清晰，但是并没有实现结构与样式完全分离
 使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

5.2 行内样式表

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

 style 其实就是标签的属性
 在双引号中间，写法要符合 CSS 规范
 可以控制当前的标签设置样式
 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
 使用行内样式表设定 CSS，通常也被称为行内式引入

5.3 外部样式表（最常用！）

实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.

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

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

Just-Lsy

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的基础知识点

1.CSS简介1.1 CSS-网页美容师CSS 是层叠样式表（Cascading Style Sheets）的简称。CSS 也是一种标记语言。CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。·HTML 呈现结构，CSS 决定样式，结构与样式分离。2.CSS基础选择器选择器分类选择器分为基础选择器和复合选择器两大类。基础选择器由单个选择器组成基础选择器包括：标签选择器.
复制链接

扫一扫