Python全栈 Web(CSS样式表、选择器)

作者 : 开心源码 本文共1280个字,预计阅读时间需要4分钟 发布时间: 2022-05-12 共138人阅读

CSS层叠样式表:

(Cascading Style Sheet)

作使用:

装饰和美化页面元素,实现网页的排版布局

CSS为HTML标记语言提供了一种样式形容,定义了其中元素的显示方式。

CSS在Web设计领域是一个突破。利使用它可以实现修改一个小的样式升级与之相关的所有页面元素

CSS 能够对网页中元素位置的排版进行像素级准确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力

用:

1.行内样式/内联样式:

特点:

在具体的标签中用参style属性,引入CSS的样式的代码

语法:

1)样式公告/CSS语句:

对当前元素增加样式

语法:

CSS属性:值;

2)

CSS的样式公告可以是多条

常见的CSS属性:

1》.设置字体大小

属性:

funt-size

取值:

以像素为单位的数值 默认16px

2》.设置字体颜色

属性:

color

取值:

颜色的英文单词

3》.设置背景颜色:

属性:

background-color

取值:

颜色的英文单词

2.文档内嵌/内部样式表:

特点:

将CSS代码与具体的标签相分离,在HTML文档中用标签引入CSS代码

语法:

选择器1

选择器2

选择器3

选择器:

用文档内嵌方式引入CSS样式表时,实现了结构与样式分离

但凡需要自己定义选着器来匹配文档中元素 与其余应使用样式

作使用:

匹配文档原数为其应使用样式

语法:

选择器实际上由两部分组成

选择器(符){

属性:值;

属性:值;

}

标签选择器/元素选择器:

用标签名作为选择符,匹配文档中所有的标签,并应使用样式

注意:

可以写在任意位置 但是基于样式的优先准则,一般写在head里

3.外链方式/外部样式表:

定义外部的.css文件,在HTML中引入就可 真正实现文档与样式表的分离

语法:

在外部样式表中用选着器来定义样式:

在HTML中使用引入CSS文件

样式表的特征:

继承性:

大部分的CSS属性都是可以被继承的

子元素或者后代元素都是可继承父元素中的样式的

所有的文本属性都可以被继承

块元素的宽度与父元素保持一致

层叠性:

允许为元素定义多个样式,共同起作使用

样式表的优先级:

低~高

1.浏览器的缺省设置:浏览器默认样式

2.文档内嵌/外链方式:在不发生样式冲突时:共同起作使用,不冲突时:后来者居上

3.行内样式的优先级最高

CSS的选着器:

作使用:

规范页面中哪些元素能够应使用公告好的样式

目的:

匹配页面原素

详解:

1.标签选择器/元素选择器:

特点:

将标签名作为选择符,来匹配文档中所有的该标签,包含后代元素

语法:

p{

color: red;

text-decoration: none;

}

2.类选择器:

特点:

通过元素的class属性值进行匹配

语法:

.c1{

样式

}

文本

类选择器的结合用:

1.

标签名.类名

表示在指定的标签中匹配的class属性值对应的元素

标签名肯定要写在前面

语法:

p.c1{

样式

}

2.

.类名1.类名2(不常使用)

3.

标签中用两个选择器的样式

语法:

3. ID 选择器:

作使用:

HTML中所有的元素都有一个ID属性,主要使用来表示元素在文档中的标志具备唯一性

通过元素的ID属性值进行匹配

*通常网页中外围的结构化标签。都用ID进行标识 具备唯一性

语法:

#nav{

样式

}

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Python全栈 Web(CSS样式表、选择器)

发表回复