CSS的解释:
CSS是英文 Cascading Style Sheets的缩写，称为层叠样式表。用于对页面美化，CSS可以是页面更加美观。基本上所有的html页面或多或少的使用CSS。
CSS在使用方式上有三种:元素内嵌、页面嵌入、和外部导入
语法:style=‘key1:value1;key2:value2;‘
在标签中使用style=‘xx:xx;‘
在页面嵌入中使用:<style type=text/css></style>#在html头部指定CSS样式
引入外部CSS文件
优先级:标签>页面嵌入>外部导入，这个仅限在同样的样式冲突才有效
①元素内嵌:
直接在标签上应用:代码如下
<p style="background-color: aqua"> python之路 </p>
显示效果:
②页面嵌入
在头部写好css样式然后应用:代码如下
<head>
<meta charset="UTF-8">
<title>Python 从入门到精通</title>
<!--在头部指定好CSS样式然后在标签里使用class="样式名应用"-->
<style>
.css_test{
background-color: darkorchid;
}
</style>
</head>
<body>
<div>
<p class="css_test">
<!--这里指定应用的样式名css_test-->
CSS样式展示
</p>
</div>
</body>
③外部应用
把CSS样式单独写在一个文件里
CSS样式文件css_color.css:
.css_color{
background-color: darkorchid;
}
test_html文件内容如下
<head> <meta charset="UTF-8"> <title>Python 从入门到精通</title> <!--在头部指定好CSS样式然后在标签里使用class="样式名应用"--> <!--这里通过link导入样式，有点类似与python导入模块中的import *--> <link rel="stylesheet" href="css_color.css"> </head> <body> <div> <p class="css_color"> <!--这里指定应用的样式名css_color--> CSS样式展示 </p> </div> </body>
浏览效果:
CSS样式应用中通过class应用CSS样式即可，还有两种知道即可，具体代码如下:
<head>
<meta charset="UTF-8">
<title>Python从入门到精通</title>
<style>
#name{
background-color: red;
}
</style>
</head>
<body>
<div>
<p id="name">
<!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->
CSS样式展示①
</p>
<p id="name">
CSS样式展示②
</p>
</div>
</body>
浏览效果如下：
标签的应用为指定标签统一设置格式：在头部<style>p{....}</style> 这里的p是标签的名称，也可以是div这样就会给所有的div设置格式，代码如下
<head>
<meta charset="UTF-8">
<title>Python从入门到精通</title>
<style>
p{
background-color: lightskyblue;
width: 100px;
height:100px;
}
</style>
</head>
<body>
<div>
<p>
<!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->
CSS浏览展示①
</p>
<p>
CSS浏览展示②
</p>
</div>
</body>
浏览效果如下:
时间： 2024-10-05 21:36:28