什么是CSS,CSS的作用是什么

日期:2023-04-10  作者:小天  来源:www.txunda.com  人气:543

1.Css选择器 

1.1 通用选择器 

1.2 标签选择器 

1.3 ID选择器 

1.4 类选择器 

1.5 后代选择器 

1.6 子选择器 

1.7 相邻兄弟选择器 

1.8通用兄弟选择器 

1.9分组选择器 

1.10 属性选择器 

2.HTML引用CSS(4种方法) 

2.1 内嵌样式表

<!DOCTYPE html>

<html>

<head>

<title>编程帮</title>

<style>

body {

background-color: linen;

}

h1 {

color: maroon;

margin-left: 40px;

}

</style>

</head>

<body>

<h1>文字</h1>

<p>http://www.biancheng.net/</p>

</body>

</html>


2.2 内联样式 内联样式就是将样式信息直接定义在 HTML 标签的 style 属性中,由于内联样式定义在标签内部,所以它只对所在的标签有效。示例代码如下: 

<!DOCTYPE html>

<html>

<head>

<title>编程帮</title>

</head>

<body>

<h1 style="color: maroon; margin-left: 40px">文字</h1>

<p style="color: blue;">http://www.biancheng.net/</p>

</body>

</html>


2.3 外部样式表 

外部样式表是最常见也是最推荐的引用 CSS 的方式,您只需要将 CSS 样式定义在一个 .css 格式的文件中,然后使用 HTML 的标签将这个 .css 格式的样式文件应用到 HTML 文档中。 

下面通过具体的示例来演示外部样式表的使用。首先,需要定义一个 .css 格式的样式文件(例如 style.css),如下所示: 

body {

           background-color: linen;

        } 

h1 { 

       color: maroon; 

       margin-left: 40px; 

    }

 然后我们在 HTML 文档中引入这个 style.css 文件,如下所示: 

<!DOCTYPE html>

<html>

<head>

<title>文字</title>

<link rel="stylesheet" href="./style.css">

</head>

<body>

<h1>文字</h1>

<p>http://www.biancheng.net/</p>

</body>

</html>


2.4 导入样式表 

您同样可以使用@import来引用外部样式表,这一点与使用标签比较相似。使用@import引用外部样式表的语法格式如下: 

@import "URL"; 

或者 

@import url("URL"); 

其中 URL 为外部样式表的存放路径。 

总结:CSS用于美化网页,它是网页的灵魂,灵活使用·CSS会让网页达到意想不到的效果,天津天迅达科技有限公司使用不同的CSS解决方案为您创建精美的网页。

天津天迅达科技有限公司经过多年来对APP小程序、以及网站建设的探索,已经帮助每一个客户快速开发出属于自己的APP小程序网站,是万千企业之选。