html中的css样式的作用是什么

藏色散人
发布: 2023-02-02 10:31:27
原创
2777人浏览过
html中的css样式的作用是把页面内容和修饰的效果分离开进行管理,并可以通过css来添加不同的修饰效果;对于HTML标签来说,产生的页面效果比较单一,虽然有属性的修饰,但是更多的页面效果的多样化,还是要借助于CSS样式表。

html中的css样式的作用是什么

html中的css样式的作用是什么?

CSS样式表在HTML中的作用

1.CSS样式表作用:

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

立即学习前端免费学习笔记(深入)”;

2.CSS样式表的应用一(内部样式表):放在

格式一:

<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: "微软雅黑";}
h3 {color: pink;}
</style>
</head>
<body>这是我的第一句话。 
这是我的第二句话
这是我的第三句话
<h1>我是标题标签H1</h1>
<h2>我是标题标签H2</h2>
<h3>我是标题标签H3</h3>
</body>
</html>
登录后复制

格式二:

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

<style  type="text/css">
.类名 {属性1:属性值1;属性2:属性值2...}
</style>
登录后复制

标签引用:

结束标签>

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

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

文本属性 说 明
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文件,把标签中内容,照搬过来即可,直接写样式的声明。

4.3html文件如何关联外部样式表?都是放在

方式一:

<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>
我是段落一
<h1 >我是标题标签h1</h1>
<h2 class="test5">我是标题标签h2</h2>
</body>
</html>
登录后复制

推荐学习:《css视频教程

以上就是html中的css样式的作用是什么的详细内容,更多请关注php中文网其它相关文章!

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号