【HTML&CSS】运维、后端你该会的前端基本内容(三)

简介: 【HTML&CSS】运维、后端你该会的前端基本内容(三)

2.1.2、内部样式表 (内嵌式)

只需要使用一个html文件,样式代码在style标签中。

内嵌方式:在html文件head标签中添加style标签。

标签 描述 块/行元素 单/双标签
style 用于为 HTML 文档定义样式信息
style标签属性 取值 说明
type text/css 规定被链接文档的 MIME 类型

html文件:

2.1.3、内联样式表 (行内样式)

只需要使用一个html文件,样式代码是元素标签属性,style的属性值。

内联方式:在html文件body体中,对应标签中添加style属性声明样式。

html文件:

2.1.4、导入样式

导入样式也是样式内容在另外一个文件中,html文件和css文件分离,样式代码在 .css 文件中。

导入方式:首先在html文件head标签中添加style标签,在style标签之间加入@import语句,详细如下:


在 @import 关键字后面,利用 url() 函数包含具体的外部样式表文件的地址(或不写url函数)。

  • @import url(文件路径);
    @import url(“文件路径”);
    @import url(’文件路径‘);
    @import 文件路径;
    @import “文件路径”;
    @import ’文件路径‘;

用途特点:一个HTML文件可以导入多个样式表,CSS文件内也可以导入其他样式表

html文件:

css文件:

2.2、CSS选择器

2.2.1、格式

css样式需要写在选择器中,如图中:

H1选择器名称,选择器名称对应到html文件标签名称;

选择器样式属性和值也会赋予到对应的标签中(选择器名称决定);

样式属性名和样式属性值之间使用冒号 : 隔开,使用分号 ; 结束。

2.2.2、语法

2.2.3、如何使用选择器

选择器名称可以有三种组成:标签选择器、.类选择器、#ID选择器。

元素选择器(标签选择器):html中标签名称。

类选择器:支持多风格同时使用,多个类选择器名用空格连接。

ID选择器:在html中只能使用一次,不支持多风格同时使用。

2.2.4、CSS文本样式

文本font样式

文本名称 属性名 属性值 语法
字体 font-family 字体名称,可一次性定义多个字体,如:楷体、宋体 font-family:属性值1,属性值2,…
大小 font-size 数字px(Pixel像素) font-size:数字px;
加粗 font-weight 数字 font-weight:属性值;
倾斜 font-style italic:使用文字的斜体 、oblique:让没有倾斜属性的文字倾斜 font-style:属性值;

文本text样式

文本名称 属性名 属性值 语法
首行缩进2字符 text-indent 2em text-indent:2em;
水平对齐 text-align left、rightcenter、justify text-align:属性值;
装饰效果 text-decoration underline、line-through、overline、blink(部分浏览器支持) text-decoration:属性值1 属性值2;
阴影特效 text-shadow x轴偏移尺寸、y轴偏移尺寸、阴影半径、阴影颜色 text-shadow:数字px 数字px 数字px 颜色;
英文字母大-小写转换 text-transform capitalize、uppercase、owercase text-transform:属性值;

文本其他样式

文本名称 属性名 属性值 语法
行间距 line-height 数字px,数字数字% line-height:属性值;
段间距 margin 数字px margin:属性值;
字母、汉字间距 letter-spacing 数字px letter-spacing:属性值;
单词间距 word-spacing 数字px word-spacing:属性值;
文字颜色 color 英文颜色名、#RRGGBB (十六进制) 、rgb() color:属性值;
文字背景颜色 background-color 英文颜色名、#RRGGBB (十六进) background-color:属性值;

2.2.5、CSS图片\背景样式

文本名称 属性名 属性值
背景颜色 background-color 英文颜色名#RRGGBB (十六进制) 初始值: transparent透明色
背景图片 background-image url (图片地址)或默认none无背景图片
背景图片是否重复及其重复方式 background-repeat repeat (默认) 、repeat-X、repeat-y、no-repeat
背景图片的水平位置和垂直位置 background-position 水平方向:left、center、right 垂直方向:top、center、bottom
背景图片是否随内容滚动 background-attachment scroll/fixed

2.2.6、CSS复合选择器

2.2.6.1、交集选择器(无间隔符)

语法

交集选择器是并且的意思, 即…又…的意思。

2.2.6.2、并集选择器(,逗号间隔)集体声明

语法

并集选择器的意思, 只要逗号隔开的,所有选择器都会执行后面样式。

2.2.6.3、后代选择器(空格间隔)

语法

子孙后代都可以这么选择(不管是包含多少层,只要是后代),它能选择任何包含在内的标签。

2.2.7、CSS的继承和层叠特性

2.2.7.1、CSS继承

  • 子标签会继承父标签的所以样式
  • 子标签可以在父标签样式基础上加以修改
  • 子标签的样式不会影响父标签

注意:边框属性是非基础的

2.2.7.2、层叠(样式的优先级)

  • 越特殊的样式,优先级越高。
  • 行内样式>ID选择器>类选择器>标签选择器

注意:后定义>先定义

目录
相关文章
|
2天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
53 33
|
7天前
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
62 25
|
1天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
13 2
|
1天前
|
前端开发 NoSQL Java
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
15 1
|
24天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
101 24
|
26天前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
1月前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
99 3
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
91 7

热门文章

最新文章