天涯论坛

 找回密码
 立即注册
搜索
查看: 77|回复: 1

CSS(一)

[复制链接]

3053

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109022
发表于 2024-6-30 11:00:37 | 显示全部楼层 |阅读模式

网页分成三个部分:

结构(HTML)

表现(CSS)

行径(JavaScript)

CSS

层叠样式表

网页实质上是一个多层的结构,经过css能够分别为网页的每一个层来设置样式

最后 咱们能看到只是网页的最上边一层

总之一句话,CSS用来设置网页中元素的样式

第1种方式

(内联样式,行内样式):

在标签内部经过style属性来设置元素的样式问题

运用内联样式,样式只能对一个标签生效,倘若期盼影响到多个元素必要在每一个元素中都复制一遍,并且当样式出现变化时,咱们必要要一个一个的修改,非常的不方便

第二种方式:内嵌式

将样式编写到head中的style标签里

而后经过css的选取器来选中元素并为其设置各样样式

能够同期为多个标签设置样式,并且修改时只必须修改一处就可所有应用

内部样式表更加方便对样式进行复用

问题:

咱们的内部样式表只能对一个网页起功效

它里边的样式不可跨页面进行复用

第三种方式 外边文件链入式

1. 能够将CSS样式编写到一个外边的CSS文件中,而后经过link标签来引入外边的CSS文件

2. 外边样式表必须经过1ink标签进行引入,寓意着只想要运用这些样式的网页都能够对其进行复用

3. <link rel=”stylesheet” href=”CSS文件路径”/>

4. 将样式编写到外边的css文件中,能够运用到浏览器的缓存机制,从而加快网页的加载速度,加强用户的体验。

CSS语法

CSS中的注释,注释中的内容会自动被浏览器所忽略

CSS的基本语法:

选取器 声明块

选取器,经过选取能够选中页面中的指定元素

例如p的功效便是选中页面中所有的p元素

声明块,经过声明块来指定要为元素设置的样式

声明块由一个一个的声明构成

声明是一个名值对结构

一个样式名 对应一个样式值, 名和值之间以:连接,以;结尾

将所有的段落设置为红色(字体)

通配选取

功效:选中页面中的所有元素

语法:*{}

元素(标签)选取

功效:按照标签名来选中指定的元素

语法:标签名(}

id选取

功效按照元素的id属性值选中一个元素

语法: #id属性值{}

选取

功效:按照元素的c lass属性值选中一组元素

语法: .class属性值{}

class是一个标签的属性,它和id类似, 区别的是class能够重复运用

能够经过class属性来为元素分组,能够同期为一个元素指定多个class属性

id不可重复而class能够重复

交集选取

功效:选中同期复合多个要求的元素

语法:选取器1选取器2选选器3选取器n{}

重视点:

交集选取器中倘若有元素选取器,必要运用元素选取器开头

选取器分组(并集选取器)

功效:同期选取多个选取器对应的元素

语法:选取器1,选取器2,选取器3,选取器n{}

父元素

直接包括子元素的元素叫做父元素

子元素

直接被父元素 包括的元素是子元素

祖先元素

直接或间接包括后代元素的元素叫做祖先元素

一个元素的父元素是它的祖先元素

后代元素

直接或间接被祖先元素包括的元素叫做后代元素

子元素是后代元素

兄弟元素

持有相同父元素的元素是兄弟元素

子元素选取

功效:选中指定父元素的指定子元素

语法:父元素>子元素

后代元素选取

功效:选中指定元素内的指定后代元素

语法:祖先后代

选取下一个兄弟

语法:前一个+下一个

紧挨着的下一个元素标签

选取下边所有的兄弟

语法:兄~弟

[属性名]选取含有指定属性的元素

[属性名=属性值]选取含有指定属性和属性值的元素

[属性名^=属性值]选取属性值以指定值开头的元素

[属性名¥=属性值]选取属性值以指定值结尾的元素

[属性名*=属性值]选取属性值中含有某值的元素的元素

伪类

伪类(不存在的类,特殊的类)

伪类用来描述一个元素的特殊状态

伪类通常状况下都是运用:开头

:first-child 第1个子元素

:last-child 最后一个子元素

:nth-child() 选中第n个子元素

特殊值:

n第n个n的范围到正

2n暗示选中偶数位的元素

2n+1暗示选中奇数位的元素

:first-of-type

:last-of-type

:nth-of-type()

这几个伪类的





上一篇:CSS基本语法(一)
下一篇:CSS 怎么样垂直居中
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-9-2 16:23:46 | 显示全部楼层
论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上,我们要把这种精神传递下去。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-24 02:06 , Processed in 0.104098 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.