一起学HTML基础-CSS样式表-基本概念、分类、选择器

时间:2024-01-02 13:57:32

一、基本概念:

CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

Style,样式,即目标显示出来的风格样式,作用是美化页面。

二、样式表分类:

内联式样式表、内嵌式样式表、外联式样式表。

1、内联式样式表:直接写在标签内部,使用Style属性设置样式。例如:设置div及span背景颜色及宽和高,会发现span是无法设置宽和高的,因为默认内容有多少就占用多少,无法设置。

一起学HTML基础-CSS样式表-基本概念、分类、选择器

2、内嵌式样式表:作为一个独立区域内嵌在网页里,必须写在head标签里,使用<style type="text/css"></style>标签包裹起来,设置一种标签样式属性,允许body里所有同类标签引用同这个样式属性,无需设置每个标签的样式属性,减少冗余。例如:设置div样式属性,body内所有div都会套用该样式属性。

一起学HTML基础-CSS样式表-基本概念、分类、选择器

3、外联式样式表:新建一个CSS文件,用来存放样式表,作为一个单独文件存放。如果要在HTMl文件中调用样式表,需要在HTMl文件中右键→CSS样式表→附加样式表,一般用link连接方式连接。

新建CSS样式表:

一起学HTML基础-CSS样式表-基本概念、分类、选择器

写CSS样式表:

一起学HTML基础-CSS样式表-基本概念、分类、选择器

关联样式表:空白处右键

一起学HTML基础-CSS样式表-基本概念、分类、选择器

一起学HTML基础-CSS样式表-基本概念、分类、选择器

4、有些标签有默认的边距,一般写样式表代码的时候都会先去除。前后对比如下:(*——针对所有标签)

一起学HTML基础-CSS样式表-基本概念、分类、选择器

一起学HTML基础-CSS样式表-基本概念、分类、选择器

三、选择器:

在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。

(1)标签选择器,用标签名做选择器,比如:p为标签名,用p做选择器,从内嵌式样式表中选择。

一起学HTML基础-CSS样式表-基本概念、分类、选择器

(2)class选择器,调用以“.”开头的样式表样式。例如:用“.”命名一个样式表gushi0和gushi1,用class调用

一起学HTML基础-CSS样式表-基本概念、分类、选择器

(3)id选择器,调用以“#”开头的样式表样式,class无法调用“#”命名的样式表,id也无法调用“.”命名的样式表。id选择器类似class选择器,id为唯一,区别此处不讲。例如:用“#”命名一个样式表g2,用id调用

一起学HTML基础-CSS样式表-基本概念、分类、选择器

(4)复合选择器

a-用“,”隔开,表示并列,使用同样的样式,例如:设置“p,div”表示p标签和div标签都是用指定的样式。

一起学HTML基础-CSS样式表-基本概念、分类、选择器

b-用空格隔开,表示后代,例如:“div p”表示div标签中的p标签

一起学HTML基础-CSS样式表-基本概念、分类、选择器

c-筛选“.”,例如"p.gushi"表示p标签中执行了class="gushi"的标签,执行样式

一起学HTML基础-CSS样式表-基本概念、分类、选择器