HTML5 混合APP开发学习笔记（二）——CSS样式设计

最新推荐文章于 2023-04-17 17:57:17 发布

123，机器人

最新推荐文章于 2023-04-17 17:57:17 发布

阅读量533

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5混合APP 文章标签： CSS3 混合APP

本文链接：https://blog.youkuaiyun.com/weixin_43569314/article/details/90209948

17 篇文章

订阅专栏

本文深入解析CSS样式设计，涵盖核心基础、样式规则、颜色应用及三种应用模式：内联、内嵌与链接样式。详细介绍了各类选择器，如基础、id、类、限定式、后代、并集与通配符选择器，以及尺寸与文本属性，帮助读者掌握高效、精确的网页样式设置技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS样式设计

CSS样式规则
selector {property1: value1;property2: value2;…}
选择器 {属性1:值1;属性2:值2;…}
选择器：规定CSS的作用范围
键值对：更改相应的属性，显示出想要展现的效果

CSS颜色

在HTML文档中应用CSS

<head>
   <style>
      selector {property1: value1;
                property2: value2;...}
   </style>
</head>

适合小规模设置格式，代码量较小的情况

链接样式
<head> <link rel=“stylesheet” href=“CSS文件路径” /> </head>
需要做全局统一的修改，CSS代码量较大，单独成为一个文件
三种模式混合使用，有助于达到最好的效果

基础选择器

标签选择器
div{…}、p{…}：所有具有div、p标签的内容都做{…}中的格式修改
id选择器
#mydiv{…}：所有具有 id 属性为 mydiv 的标签的内容都做{…}中的格式修改
类选择器
.myclass{…}：所有具有 class 属性为 myclass 的标签的内容都做{…}中的格式修改
限定式选择器
div#mydiv{…}、p.myclass{…}：基本格式为 ‘标签选择器’+‘类选择器 or id选择器’，中间无空格
表示选择所有 id 属性为 ‘mydiv’ 的 div 标签
后代选择器
div #mydiv{…}、div p{…}、p .myclass{…}：基本格式为 ‘标签选择器’+‘类选择器 or id选择器 or 标签’，中间有空格
表示选择所有 div 标签中的 p 标签
并集选择器
h1,span#myspan,.myclass{…}：基本格式为多个选择器，用 , 隔开，其为并列关系，具有相同的CSS样式
通配符选择器
*{…}：表示选择所有
其他选择器

做更加细致的选择分类