您好,欢迎访问一九零五行业门户网

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

html中的css样式的作用是把页面内容和修饰的效果分离开进行管理,并可以通过css来添加不同的修饰效果;对于html标签来说,产生的页面效果比较单一,虽然有属性的修饰,但是更多的页面效果的多样化,还是要借助于css样式表。
html中的css样式的作用是什么?
css样式表在html中的作用
1.css样式表作用:
对于html标签来说,产生的页面效果比较单一,虽然有属性的修饰,但是更多的页面效果的多样化,还是要借助于css样式表。样式表的使用,可以把页面内容和修饰的效果分离开进行管理(html生成页面以及相关的内容,css来添加不同的修饰效果)
2.css样式表的应用一(内部样式表):放在93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1
格式一:<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>
推荐学习:《css视频教程》
以上就是html中的css样式的作用是什么的详细内容。
其它类似信息

推荐信息