CSS样式表在HTML中的作用

最新推荐文章于 2024-05-13 11:50:38 发布

peace or love

最新推荐文章于 2024-05-13 11:50:38 发布

阅读量1.1k

点赞数

文章标签： p2p linq wpf

本文链接：https://blog.csdn.net/m0_59315964/article/details/122093060

版权

1.CSS样式表作用：

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

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

格式一：

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

</style>

font-size：设置字体的大小

font-family：设置字体的样式

<!DOCTYPE html>

<html>

<head>

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>

格式二：

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

.类名 {属性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>

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

.test1 {color: yellow;}

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

</style>

</head>

我是第一个段落文字

我是第二个段落文字

我是斜体标签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>

方式一：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

我是段落一

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

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

</body>

</html>

peace or love

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS样式表在HTML中的作用

1.CSS样式表作用：对于HTML标签来说，产生的页面效果比较单一，虽然有属性的修饰，但是更多的页面效果的多样化，还是要借助于CSS样式表。样式表的使用，可以把页面内容和修饰的效果分离开进行管理(html生成页面以及相关的内容，css来添加不同的修饰效果)2.CSS样式表的应用一(内部样式表)：放在<head></head>格式一：<style type="text/css">选择器(关键词) {属性1:属性值1;属性2:属性值2...}&...
复制链接

扫一扫