html中的css样式的用途有哪些

发布时间：2023-07-27 15:30:28 所属栏目：教程来源：互联网

导读： 　　本篇内容介绍了“html中的css样式的作用有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望

　　本篇内容介绍了“html中的css样式的作用有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

　　html中的css样式的作用是把页面内容和修饰的效果分离开进行管理，并可以通过css来添加不同的修饰效果；对于HTML标签来说，产生的页面效果比较单一，虽然有属性的修饰，但是更多的页面效果的多样化，还是要借助于CSS样式表。

　　CSS样式表在HTML中的作用

　　1.CSS样式表作用：

　　对于HTML标签来说，产生的页面效果比较单一，虽然有属性的修饰，但是更多的页面效果的多样化，还是要借助于CSS样式表。样式表的使用，可以把页面内容和修饰的效果分离开进行管理(html生成页面以及相关的内容，css来添加不同的修饰效果)

　　2.CSS样式表的应用一(内部样式表)：放在<head></head>

　　格式一：

　　<style type="text/css">

　　选择器(关键词) {属性1:属性值1;属性2:属性值2...}

　　</style>

　　font-size：设置字体的大小

　　font-family：设置字体的样式

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<meta charset="UTF-8">

　　<title>css</title>

　　<style type="text/css">

　　p {color:red;font-size: 35px;font-family: "微软雅黑";}

　　h4 {color: pink;}

　　</style>

　　</head>

　　<body>这是我的第一句话。

　　这是我的第二句话

　　这是我的第三句话

　　<h2>我是标题标签H1</h2>

　　<h3>我是标题标签H2</h3>

　　<h4>我是标题标签H3</h4>

　　</body>

　　</html>

　　格式二：

　　很多时候，部分标签所需要的样式效果是一样的，就可以把该样式，设置成共享的操作，只要标签有需要，直接引用即可。

　　<style type="text/css">

　　.类名 {属性1:属性值1;属性2:属性值2...}

　　</style>

　　标签引用：

　　<开始标签 class="类名"></结束标签>

　　疑问：当一个标签，既有选择器样式的使用，也有类样式的引用，最终结果是如何的？

　　不同部分的属性，做融合；相同部分的属性，以类样式为准

　　文本属性说明

　　font-size 字体大小

　　font-family 字体类型

　　font-style 字体样式(风格)

　　color 设置或检索文本的颜色

　　text-align 文本对齐

　　CSS样式表中背景属性的设置：

　　背景色：background-color

　　背景图片：background-image

　　设置背景图片的平铺方式：background-repeat:

　　repeat-x沿着X轴平铺

　　repeat-y沿着Y轴平铺

　　no-repeat 以实际图片占背景位置大小

　　repeat 铺满整个页面

　　背景图片在加载时，需要借助于url()--->等同于src作用

　　background-image:url(图片路径信息)

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<meta charset="UTF-8">

　　<title>css</title>

　　<style type="text/css">

　　.testcss {color: green;font-size: 25px;font-family: "微软雅黑";}

　　.test1 {color: yellow;}

　　.tet4 {background-image:url(img/tupian03.jpg);background-repeat: repeat-y;}

　　</style>

　　</head>

　　<body class="test4">

　　我是第一个段落文字

　　我是第二个段落文字

　　我是斜体标签i

　　我是第二个斜体标签i

　　我是删除线标签del

　　</body>

　　</html>

　　3.CSS样式表的应用二(行内样式表)

　　3.1概述：样式表只针对某一行内容会有修饰效果，或者把样式表嵌入到某一行(某一个标签内部)

　　3.2格式：把style当作属性来看待

　　<开始标签 style="属性1:属性值1;属性2:属性值2..."></结束标签>

　　我是第一个段落的内容

　　我是第二个段落的内容

　　我是big大标签内容

　　4.CSS样式表的应用三(外部样式表)

　　4.1概述：把样式表的声明，不在嵌套html文件，而是单独放在一个css文件中。真正意义上把html文件和css文件独立分开，如果html文件有需要样式，只需关联即可。

　　4.2格式：单独新建一个css文件，把<style></style>标签中内容，照搬过来即可，直接写样式的声明。

　　4.3html文件如何关联外部样式表？都是放在<head></head>

　　方式一：

　　<link href="写上引用的外部css文件" rel="stylesheet" type="text/css" />

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<meta charset="UTF-8">

　　<title>css</title>

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

　　</head>

　　<body>

　　我是段落一

　　<h2 >我是标题标签h2</h2>

　　<h3 class="test5">我是标题标签h3</h3>

　　</body>

　　</html>

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!