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: "微软雅黑";}
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>
标签引用:
<开始标签 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>
我是段落一
<h1 >我是标签h1</h1>
<h2 class="test5">我是标签h2</h2>
</body>
</html>
以上就是html中的css样式的作用是什么的详细内容,更多请关注编程网其它相关文章!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
软考中级精品资料免费领
- 历年真题答案解析
- 备考技巧名师总结
- 高频考点精准押题
- 资料下载
- 历年真题
193.9 KB下载数265
191.63 KB下载数245
143.91 KB下载数1148
183.71 KB下载数642
644.84 KB下载数2756
相关文章
发现更多好内容- 如何在 Java EMqtt 中实现消息确认机制?(Java EMqtt怎样实现消息确认机制)
- Java 性能调优的有效手段有哪些?(Java性能调优有何有效手段)
- 探讨Uncomtrade数据库的安全防护措施
- Java 如何获取某个接口的实现类?(Java怎么获取某个接口的实现类)
- Java中如何正确使用 collections.shuffle 方法?(Java中collections.shuffle怎么使用)
- Java Swing 中常用的布局有哪些?(java swing常用布局有哪些)
- 如何通过 Java Reflection 获取泛型信息?(java reflection如何获取泛型信息)
- 如何自定义 Java 泛型通配符?(java泛型通配符怎么自定义)
- Java Spring 注解与 XML 配置的差异究竟有哪些?(java spring注解与XML配置的区别是什么)
- Java 动态线程池对性能究竟有哪些影响呢?(Java动态线程池对性能的影响)