CSS:前端开发的基础

发表时间: 2023-03-07 18:44


“这里是云端源想IT培训,帮你轻松拿offer”

嗨~大家好,我是学长

今天的你过得还好吗?

- 2023.03.07 -

女神节到了,所有的女孩都好看,愿我们成为自己的阳光,不需借谁的光!

上期给大家分享了关于HTML的基础知识,今天接着来说说CSS是什么。

一、CSS简介

1. CSS是什么

Css (层叠样式表)是种格式化网页的标准方式,用于控制设置网页的样式,并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。

2. 使用CSS的优势

  • 格式和结构分离:有利于格式的重用以及网页的修改与维护。
  • 精确控制页面布局:对网页实现更加精确的控制,如网页的布局,字体,颜色,背景等。
  • 实现多个网页同时更新。

3. CSS的作用

  • 页面外观美化
  • 布局和定位

二、CSS基本用法

1.CSS基本语法

CSS的定义是由三部分组成的,包括选择符( selector)、属性( properties)、属性值(value)。

  • 选择器:要修饰的对象(东西)
  • 属性名:修饰对象的哪一个属性(样式)
  • 属性值:样式的取值

2.CSS应用方式

也称为CSS引用方式,有三种方式:内部样式、行内样式、外部样式。

内部样式:

也称为内嵌样式,在页面头部通过style标签定义。对当前页面中所有符合样式选择器的标签都起作用

行内样式:

也称为嵌入样式,使用HTML标签的style属性定义。只对设置style属性的标签起作用。

外部样式:

使用单独的 .CSS 文件定义,然后在页面中使用 link标签 或 @import指令 引入。

  • 使用 link标签 链接外部样式文件

提示:type属性可以省略

  • @import 指令 导入外部样式文件

三种引入优先级:

1.三种引入方式内容属性不冲突:三种方式会同时起作用。

2.三种引入方式内容属性会冲突

  • 内联式和外联式冲突,内联式位于外联式上方。— 由外联式决定
  • 内联式和外联式冲突,外联式位于内联式上方。— 由内联式决定
  • 三种方式并存且冲突。 — 由行内式决定

注意:当属性值内存在**“!important ”**关键字的时候,优先使用该类方式导入属性值。


三、CSS选择器

1、id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,一般来说,一个页面中标签的id的名称,必须唯一且不能重复。

示例:为id为part1的段落添加红色字体样式

2、class选择器

class 选择器可以为标有特定 class 的 HTML 元素指定特定的样式,一般来说,一个页面中标签的class的名称,可以不唯一且可以重复。

示例 :为class为green的段落添加绿色字体样式,为class为bold的段落添加加粗字体样式。

3、标签选择器

除了使用id选择器和class选择器,我们也可以直接使用标签选择器。

示例:为所有段落标签添加黄色字体样式,为所有超链接标签添加红色字体样式。

4、子代选择器

子代选择器可以选择当前元素的所有子元素。定义的时候用 “> ”隔开。

示例 :为div标签下所有h1子节点设置为红色文本样式

5、后代选择器

标签元素除了并列书写还可以嵌套书写,后代选择器就是用于选择嵌套标签元素的一种选择器。定义的时候用“空格 ”隔开。

示例:为所有段落标签中的超链接标签添加红色文本

6、相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。定义的时候用 “+ ”隔开。

示例 :为div之后的第一个p标签元素设置为黄色文本样式

7、后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。定义的时候用“~ ”隔开。

示例 :为div之后的所有p标签元素设置为黄色文本样式

8、交集选择器

选择的元素必须同时满足多个条件才可以被选择,交集选择器就是干这个的。定义的时候用标签名.ID名/类名 。

示例 :为所有p标签且class为part的段落添加绿色文本样式

9、并集选择器

多种元素共享某种属性,这时候就可以使用并集选择器。定义的时候用“逗号”隔开。

示例 :为p标签、h1标签、class=‘link’、id='click’的这几种元素添加红色文本样式

10、通配符选择器

通配符选择器可以匹配任何标签,我们常用于统一页面样式。

示例:将页面所有元素的字体设置为红色文本样式

11、伪类选择器

根据不同的状态显示不同的样式,一般多用于标签。

有四种状态:

  • :link 未访问的链接
  • :visited 已访问的链接
  • :hover 鼠标悬浮到连接上,即移动在连接上
  • :active 选定的链接,被激活

注:默认超链接为:蓝色、下划线

12、属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

示例 :为类型为text和button的input标签设置一下样式

选择器就讲到这里了,下面来看看css基本属性都有哪些

四、CSS基本属性

1、字体属性

css字体属性指的是设置字体相关的样式

2、文本属性

文本属性包括阴影效果、大小写、文本缩进、对齐方式等等。

3、背景属性

CSS背景属性主要用于设置对象的背景颜色、背景图片、背景图片的重复性、背景图片的位置等。

background-clip属性规定背景的绘制区域,该属性是CSS3的属性,主要用于设置背景图像的裁剪区域,其基本语法格式是:

background-clip : border-box|padding-box|content-box;

4、边框属性

CSS边框属性可以设置对象边框的颜色、样式以及宽度。使用对象的边框属性时必须先设定对象的高度及宽度。语法格式如下:

border :边框宽度 边框样式 边框颜色

注意:border-width属性可以单独设置边框宽度;border-style属性可以单独设边框样式;border-color属性可以单独设置边框颜色。

5、列表属性

常用的列表属性是list-style-type 、list-style-image、 list-style-position以及list-style

  • list-style-type属性用于设置列表项标记的类型,主要有disp (实心圆)、circle (空心圆)、square (实心方块)、none (不使用项目符号) 。
  • list-styl-image属性用于设置使用什么图像作为列表符号。
  • list-style-position属t用来指定列表符号的显示位置,当值为outside时, 表示将列表符号放在文本块之外,该值为默认值,当值为inside时,表示将列表符号放在文本块之内。

6、 鼠标属性

CSS中可以通过鼠标指针的cursor属性设置鼠标指针的显示图形,语法格式如下:

cursor:鼠标指针样式;

今天的分享就到这里了,想学习更多前端知识,记得常来看我!



我们下期再见!

END

文案编辑|云端学长

文案配图|云端学长

内容由:云端源想分享