xml和html的css

最新推荐文章于 2024-09-27 18:38:53 发布
最新推荐文章于 2024-09-27 18:38:53 发布
阅读量47 收藏
点赞数
文章标签： xml html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68805114/article/details/134233913
版权
本文介绍了CSS在XML和HTML中的应用，包括外部样式引用、内部样式嵌入、行内样式，以及Selecter选择器（类型选择器、类选择器、ID选择器、成组选择器和伪元素）的详细讲解。此外，还涵盖了常用CSS属性如显示、字体、颜色、文本和边框，以及定位和浮动的概念，如绝对定位、相对定位和浮动元素的处理方法。
摘要由CSDN通过智能技术生成

一、CSS的引入

XML与HTML的引入：

  调入外部样式：通过引用外部css文件来定义xml文件的表现形式

xml:

<?xml-stylesheet type="文件类型" herf="css文件的URL" ？>

 html:

<link rel="stylesheet" type="text/css" href="style.css" />

内部调入样式：将css样式直接嵌入xml文档内部调用了HTML的<style>标记 

xml:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css">
<persons xmlns:Html="http://www.w3.org/Profiles/XHTML-transitional">
    <HTML:style>
        person{
            display:block;
            font-size:25px;
        }
     </HTML:style>
</persons>

html:

​
book {
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
chapter {
font-size: 18px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}

​

行内式：提升效率

xml:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css">
<student>
    <name style="display:block;font-size:18px";font-weigth">
        <sex style="display:line;font-size:12px">女</sex>
    </name>
</student>

html: 

<p style="display:block;font-size:18px">这是一个标签</p>

 二：Selecter选择器:

可以同时指定多个元素，也可以是元素的class属性和ID属性

通配符选择器：

可以简化代码，实现全部代码

*{
    margin:0px;
    padding:0px;
}

定义样式：

选择器{
    属性1：属性值1；
    属性2：属性值2；
    属性3：属性值3；
    ......
    属性n：属性值n；
}

1、类型选择符（Type Selecter）：

以元素、对象的名称作为选择符。

.name{
        font-family:"微软雅黑"；
        font-size:22px;
        font-weigth:bold;
    }

2、类选择符(Class Selector)：

可以以一种独立于文档元素的方式来指定，可以单独使用也可以与其他元素结合使用。

.anthorname{
    color:pink;
    font-size:20px;
}
<name class="anthorname">张三</name>

3、ID选择符：（ID Selector）

允许以一种独立于文档元素的方式来指定；前面必须有一个#；只能在文档中使用一次，

#intro {
    font-weight:bold;
}
<p id="intro">这是一个标题</p>

4、成组选择器：

可以把一组属性用于多个元素，用逗号将个元素隔开。

并集：

teacher,student{
    display:block;
    margin:10px;
    padding:5px;
}

 交集：即是title元素，又是class=c1的元素

title.c1{
    display:block;
    margin:10px;
}

5、后代选择器(包含选择器/上下文选择器)：

包含关系：

A B
{

}

 例：message里面包含的name元素里字体都会变为20px,颜色为粉色

message name{
    font-size:20px;
    color:pink;
}
<message>
    <name>
        <b>张三</b>
    </name>
    <sex>男</sex>
    <name>李四 </name>
    <sex>男</sex>
</message>

子元素选择器 ：

A的子元素是B才可以被选中:

A>B{

}

 例：message里面只有包含name元素里字体才会变为20px,颜色为粉色

message > name{
    font-size:20px;
    color:pink;
}
<message>
    <name>
        <b>张三</b>
    </name>
    <sex>男</sex>
    <name>李四 </name>
    <sex>男</sex>
</message>
<message>
    <name>王丽 </name>
</message>

兄弟元素：

相邻的才会被选中：
A+B{

}
后续的全部选中：
A~B{

}

 6伪元素（pseude-element）：

用来添加一些选择器的特殊效果，将文档中不能作为独立元素看待的部分作为元素看待

（1）首行伪元素   :first-line[只能用于块级元素]

p:first-line{
    color:#00ff00;
    font-weight:bold;    //字体的粗细程度
}

（2）首字符伪元素  :first-letter[用于向文本的首字母设置特殊格式]

p:first-letter 
{
    color:#ffff00;
    font-weight:bold;    //字体的粗细程度
}

（3）伪类(:link,:visited,:hover,:active,:focus,:first-child)

选择未访问链接样式
a:link
{
background-color:yellow;
}
选择访问过得链接样式

a:visited
{
    background-color:yellow;
}
选择鼠标移到链接上的样式：

a:hover
{ 
    background-color:yellow;
}

选择激活的链接样式：

a:active
{
    background-color:yellow;
}

一个输入字段获得焦点时选择的样式：

input:focus
{
    background-color:yellow;
}
用来指定元素的第一个子元素
p:first-child
{ 
    background-color:yellow;
}

 三、常用css属性

1、显示属性（display）

 行内元素：span  a  

块级元素：div     p

行内块级元素   img

1.1 块方式   display:block

使文本在一个块区域内显示
name
{
    display:block
//可通过设置width和heigth设置块区域的宽和高
    width:200px;
    heigth:300px;
}

 同级别元素按先后顺序靠左对齐；子元素指定的块区域将被包含在为父元素指定的块区域中

position:absolute   改变区域默认的左对齐方式，但必须同时设置left、top、width、height

1.2 行方式： display:line(inline)使文本与行的方式显示

name
{
    display:line
}

 同级别元素按先后顺序首位相接；子元素指定的块区域将被包含在为父元素指定的块区域中以行的方式显示

position:absolute   改变区域默认的先后顺序尾随在另一行首位之后，但必须同时设置left、top

1.3列表方式： display:list-item使文本按列表方式在浏览器中显示

name
{
    display:list-iten;
}

 list-iten-type属性有：

disc (缺省值，黑圆点)、circle (空心圆点)square (小黑方块)、decimal (数字排序)、lower-roman (小写罗马字排序)、upper-roman (大写罗马字排序)、lower-alpha (小写字母排序)、upper-alpha (大写字母排序)、none (无列表项标记)

name{
    display:none;    //不显示文本，不占用空间
    visibility:hidden   //不显示文本，但是占用空间
}

2、字体属性(font)

name{
    font-family:Arial;	      //字体类型
    font-style:italic;        //字体样式  italic斜体，normal正常显示、oblique倾斜
    font-variant：small-caps;  //英文字体打印时的大小写状态  normal（大小写无变化）small-caps大写字母代替小写
    font-weight:600px;          //粗细程度 bold加粗；normal默认标准字体
    font-size:20px;            //字体大小
}

3、颜色属性（color、background-color）和背景属性（background-xxx）

color:置元素的文本以及文本装饰的前景色颜色值

background-color:设置不同元素的背景色

表示颜色的三种属性方法：

name{
    background-color:rgb(255,255,255)
    color:#00ff00;
    coloe:pink;
    background-img:(URL("a1.jpg")
}

4、文本属性(text-xxx)文本的对齐方式

name{
    text-align:center;    //居中
    text-align:right;     //右对齐
    text-align:justify;   //两端对齐
    text-index:17px;           //首行缩进
    //指定在一个文本中的大写和小写字母。
    text-transform:uppercase;  //全部大写
    text-transform:lowercase;  //全部小写
    text-transform:capitalize;  //首字母大小
     //向文本添加修饰
    text-decoration: none;     //不加任何线
    text-decoration:overline;  //加下划线
    text-decoration:line-through;//加删除线
    text-decoration:underline      //   加上划线  
    line-height:1.5;  //设置文本的行间距
}

5、边框(border-xxx)

border-xxx-width属性：设置边框的宽度  xxpx;
border-xxx-color属性：设置边框颜色
border-xxx-style属性：设置元素的边框

四、定位和浮动

1、定位：指定元素的显示位置（position：static、absolut、

relative）

偏移量用left和top来决定

1、1绝对定位(absolut):以设置了position的左上角为原点，偏移后原来的位置不在占用空间

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>相对定位</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 300px;
		}
		.box1{
			background-color: red;
		}
		.box2{
			position: relative;
			top: 30px;
			left: 40px;
			background-color: green;
		}
		.box3{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="box1">盒子1</div>
	<div class="box2">盒子2</div>
	<div class="box3">盒子3</div>
</body>
</html>

1、2相对定位(relative)相对于自己原来位置的偏移，原来的位置还要占用空间

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 300px;
			border: 3px solid #ff6700;
		}
		.box1{
			position: absolute;
			left: 50px;
			background-color: red;
		}
		.box2{
			background-color: green;
		}
		.box3{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="box1">One</div>
	<div class="box2">Two</div>
	<div class="box3">Three</div>
</body>
</html>

 2浮动（float）

浮动的原则：上方元素不浮动则浮动元素上不去；脱离原来的文本流；下方元素会占据浮动元素的位置；对后续元素有影响，要清除浮动

2.1清除浮动

2.1.1、父盒子设置固定高度
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动元素的破坏性</title>
	<style type="text/css">
		.father{
            /*父盒子设置了固定高度*/
			height: 200px;
			border: 1px solid red;
		}
		.child{
			width: 200px;
			height: 200px;
			float: left;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="child">儿子</div>
	</div>

</body>
</html>

缺点：使用不灵活，后期不易维护 

2.1.2内墙法：在浮动元素的后面加一个空的块级元素(通常是div),并且该元素设置clear:both；属性。
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动元素的破坏性</title>
	<style type="text/css">
		.father{
			
			border: 1px solid red;
		}
		.child{
			width: 200px;
			height: 200px;
			float: left;
			background-color: green;
		}
		.clearfix{
			clear: both;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="child">儿子</div>
		<div class="clearfix"></div>
	</div>

</body>
</html>

 缺点：结构冗余

2.1.3伪元素清除法
p::after{
    /*p::after{}一定要有content。表示在p元素内部的最后面的添加内容*/
    content:'...'
}
<style>
    .clearfix:after{
        content:'.';//给.clearfix元素内部最后添加一个内容，该内容为行内元素。
        display: block;//设置该元素为块级元素，符合内墙法的需求
        clear: both;//清除浮动的方法
        overflow: hidden;//表示隐藏元素
        height: 0;
    }
</style>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动元素的破坏性</title>
	<style type="text/css">
		.father{
			border: 1px solid red;
		}
		.child{
			width: 200px;
			height: 200px;
			float: left;
			background-color: green;
		}
		.cleafix:after{
			content:'.';
			display: block;
			clear: both;
			overflow: hidden;
			height: 0;
		}
		
	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="child">儿子</div>
	</div>

</body>
</html>
2.1.4overflow:hidden(定义一个元素的内容太大而无法适应盒子的时候该做什么)
visible默认值。内容不会被修剪，会呈现在元素框之外
hidden内容会被修剪，并且其余内容不可见
scroll内容会被修剪，浏览器会显示滚动条以便查看其余内容auto由浏览器定夺，如果内容被修剪，就会显示滚动条
inherit规定从父元素继承
overflow属性的值
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>overflow属性的用法</title>
	<style type="text/css">
		.box{
			width: 300px;
			height: 300px;
			border: 1px solid red;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div class="box">
		这是一个文本
	</div>
</body>
</html>

万一629
关注
via定制html和css,Injecting HTML via CSS
weixin_36311421的博客
06-27 1826
问题I need to basically set the content of something with HTML from CSS. I'm currently doing the following:.myclass { content "";}However, instead of the image, I see the literal text:How can I inje...
pyui4win：一个用python实现业务逻辑，用xml和htmlcssjs描述界面的windows程序的快速开发框架。该框架将duilib运行时和python运行时结合到一起，实现用xml快速构建界面的同时，利用python及其众多久经考验的库编写业务逻辑，极大地延长开发周期
02-04
该框架将duilib运行时和python运行时结合到一起，实现用xml快速构建界面的同时，利用python来实现业务逻辑，用xml和html / css / js描述界面的Windows程序的快速开发框架。该大量适合长期计算考验的库编写业务逻辑，...
用html和CSS做个人简历
zsyabcd的博客
05-15 6986
很多刚学web的同学第一个项目应该都是做一个个人简历，这个是查了多方资料的刚刚写出来的一个简历，所以可能会参考网上的一些代码，兄弟们拿去复制就可以。里面有的注释可能不太对劲，不要太在意，毕竟我也是一个刚学一周的小菜鸟。也希望大佬们多来指正。 ​ <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de
HTML+CSS学习总结
weixin_53351919的博客
06-26 2904
html+css学习总结
HTML +CSS 制作个人简历
qq_42782011的博客
10-21 6418
原创不易，你们的支持是我最大的原创动力！
HTML与CSS详细介绍
热门推荐
weixin_44454512的博客
11-28 1万+
HTML 与 CSS 1. 主要内容 2. HTML HTML（HyperText Markup Language）就是超⽂本标记语⾔。"超⽂本"就是表示⻚⾯内可以包含⾮⽂字元素，如：图⽚、链接、⾳乐等等。 它是⼀种建⽴⽹⻚⽂件的语⾔，通过标记式的指令（Tag），将影像、声⾳、图⽚、⽂字等链接显示出来。这种标记性语⾔是因特⽹上⽹⻚的主要语⾔。 HTML ⽹⻚⽂件可以使⽤记事本、写字板、HBuilder、Sublime 等编辑⼯具来编写，以 .htm 或 .html 为⽂件后缀名保存。将 HTML ⽹⻚⽂件
HTML与CSS的区别
qq_51066068的博客
03-10 2092
1.1.什么是HTML？什么是CSS？ HTML是HyperText Markup Language(超文本标记语言) 它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字
【前端】XML和HTML的区别详解
double222222的博客
05-28 2537
XML（eXtensible Markup Language）是一种标记语言，主要用于存储和传输数据。XML的设计目标是强调数据的自描述性和可扩展性。XML标签没有预定义，用户可以根据需要创建自己的标签。HTML（HyperText Markup Language）是一种标记语言，用于创建和展示网页内容。HTML的设计目标是强调内容的显示和链接能力。HTML标签是预定义的，每个标签都有特定的意义和用途。XML：标签是用户自定义的，可以根据需要创建任何标签，标签名必须遵循规则。HTML。
HTML+CSS+JS总结
m0_51480841的博客
08-28 8530
HTML是超文本标记语言是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 二.HTML标签 标签的概念 一个html文件是由标签和元素组成的html的标签还有很多包括input,from等等html标签对照表CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。1:继承性:父元素的样
html、css 和 JS(JavaScript) 的相互关联
LJ的博客
06-14 1912
工作所需，需要承担一些字体矢量动效玩法实现；调研发现前端可以快速实现一些矢量动画效果；本文旨在介绍前端的三大利器（HTML / CSS / JS）的区别和联系，就当个引子。
html和css是编程语言吗,js和css是什么？
weixin_39634876的博客
05-31 1979
HTML和CSS，JavaScript(简称js)是万维网的核心技术，三种技术一起构成前端开发。下面本篇文章给大家介绍一下CSS和JS，希望对大家有所帮助。什么是JS(JavaScript)？JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。JavaScript是一种高级的、解释型、直译式脚本语言，是一种...
XML、HTML、CSS与JS的区别整理
10-22
总结一下，XML、HTML、CSS和JS在Web开发中的角色分别是： 1. XML：用于结构化数据的存储和传输，提供了一种灵活的数据表示方式。 2. HTML：定义网页的结构和内容，使信息能够以人类可读的形式呈现。 3. CSS：分离...
xml.rar_html简历_schema_xml_xml+css个人简历_xml简历
09-21
XML（eXtensible Markup Language）是一种用于标记数据的语言，其设计目的是传输和存储数据，而非显示数据。在本案例中，"xml.rar" 是一个压缩包，它包含了一个使用XML编写的个人简历。XML简历的优势在于其结构清晰...
HTML+XML+CSS资料
08-23
HTML、XML和CSS是网页开发中的核心技术，它们共同构建了网页的结构、内容和样式。以下是对这些技术的详细介绍： 1. **HTML (HyperText Markup Language)** HTML是超文本标记语言，它是网页的基础，定义了网页的...
使用xml编写查询前提下MyBatisPlus分页IPage用法
m0_74276153的博客
09-25 347
在service定义一个方法实现分页，这里传入两个参数，current和size，current表示当前页码，size表示每页几行。在mapper层调用xml中的查询语句，并加上参数。在pom文件里增加MyBatisPlus依赖。在control层调用接口方法。在config层定义拦截器。在postman中测试。
XPath基础知识点讲解——用于在XML中查找信息的语言
最新发布
2301_79858914的博客
09-27 850
XPath（XML Path Language）是用于在XML（Extensible Markup Language）文档中查找信息的语言。它可以通过路径表达式来选择XML文档中的节点，类似于如何在文件系统中使用路径查找文件。XPath是W3C（万维网联盟）的标准，广泛应用于XML文档的解析和处理。XPath是一个强大且灵活的查询语言，能够轻松在复杂的XML文档中查找节点。通过掌握基本的路径表达式、过滤条件、函数等知识，可以高效地提取和处理XML文档中的数据。
Note_XML学习笔记
qq_51407861的博客
09-24 453
学习网址：https://www.runoob.com/xml/xml-attributes.html。
使用jaxb来生成多层嵌套xml
fxtxz2的专栏
09-23 644
需要生成多层嵌套xml，类似如下内容：</</</</
AndroidManifest.xml 文件中的 package 属性不再是强制要求定义
galoiszhou的博客
09-25 351
在 Android 的较新版本中，文件中的package属性不再是强制要求定义应用程序包名的位置，而是通过文件中的namespace属性来设置包名。这种更改的主要目的是更好地将应用程序包名和代码包结构分离，同时简化项目的管理。
CSS格式化XML文档指南
- XML和HTML的CSS语法是相同的，都通过属性设置来决定元素的显示形式。 - 可设置的属性涵盖字体、颜色、位置、对齐、边框、背景等多个方面。 - 将样式表与XML数据内容分离，提高了文档显示的灵活性，并便于样式表的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值