CSS 基础语法

[导读] css 语法 css 规则由两个主要的部分构成:选择器,以及一条或多条声明。selector {declaration1; declaration2;     declarationn }选择器通常是您需要改变样式的 html 元素。每条声明由一个属性和一个

CSS 语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

立即学习“前端免费学习笔记(深入)”;

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。

在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构:

CSS 语法

 

提示:请使用花括号来包围声明。

 

值的不同写法和单位

除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:

p { color: #ff0000; }

为了节约字节,我们可以使用 CSS 的缩写形式:

p { color: #f00; }

我们还可以通过两种方法使用 RGB 值:

p { color: rgb(255,0,0); }p { color: rgb(100%,0%,0%); }

请注意,当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。

记得写引号

提示:如果值为若干单词,则要给值加引号:

p {font-family: "sans serif";}

多重声明:

提示:如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么的好处是,当你从现有的规则中增减声明时,会尽可能的减少出错的可能性。就像这样:

p {text-align:center; color:red;}

你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:

p {  text-align: center;  color: black;  font-family: arial;}

空格和大小写

大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:

body {  color: #000;  background: #fff;  margin: 0;  padding: 0;  font-family: Georgia, Palatino, serif;  }

是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

以上就是 CSS 基础语法的详细内容,更多请关注php中文网其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1608084.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 21:29:17
下一篇 2025年12月23日 21:29:30

相关推荐

  • CSS派生选择器

    [导读] 派生选择器通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。在 css1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应 派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标…

    好文分享 2025年12月23日
    000
  • CSS 高级语法

    [导读] 选择器的分组你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。h1,h2,h3,h4,h5 选择器的分组 你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明…

    好文分享 2025年12月23日
    000
  • CSS id 选择器

    [导读] id 选择器id 选择器可以为标有特定 id 的 html 元素指定特定的样式。id 选择器以 ” ” 来定义。下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色: red {color:re id 选择器 id 选择器可以为标有特…

    好文分享 2025年12月23日
    000
  • 有关css的绝对定位

    [导读] 定位(左边和顶部) css定位属性将是网虫们打开幸福之门的钥匙: h4 { position: absolute; left: 100px; top: 43px }这项css规则让浏览器将 的起始位置精 确地定在距离浏览器左边100象素,距离其 定位(左边和顶部) css定位属性将是网虫们…

    好文分享 2025年12月23日
    000
  • css相对定位

    [导读] css绝对定位使你能精确地定位要素在页面的 独立位置,而不考虑页面其它要素的定位 设置。相对定位指你所定位的要素的位置相对于 它在文件中所分配的位置。例: i { position: relative; left: 40px; t css绝对定位使你能精确地定位要素在页面的 独立位置,而不…

    好文分享 2025年12月23日
    000
  • html5怎么加php_html5用Ajax与PHP后端交互实现数据传递【交互】

    HTML5不能直接运行PHP,需通过Ajax与PHP通信:前端用fetch发送请求,PHP接收处理并返回JSON,前端解析响应更新DOM;注意跨域、编码、CSRF防护和输入过滤。 HTML5 本身是前端标记语言,不能直接运行 PHP 代码,但可以通过 Ajax(异步 JavaScript)与 PHP…

    2025年12月23日
    000
  • 手机端怎么运行html文件_手机端运行html文件方法【教程】

    可通过手机浏览器、代码编辑器、本地服务器或在线工具四种方式预览HTML文件:一、用文件管理器打开HTML并选择浏览器即可渲染页面;二、使用Acode等编辑器导入文件后点击预览功能实时查看;三、对复杂项目可用KSWEB搭建本地服务器,将文件放入指定目录后通过http://127.0.0.1:8080访…

    2025年12月23日
    000
  • html5如何插入txt纯文本_html5txt文本嵌入与编码设置【实操】

    可通过iframe、fetch+pre、object标签或服务端预处理四种方式在HTML5中显示外部TXT文件,需重点处理字符编码(如UTF-8声明、BOM、响应头)并防范XSS风险。 如果您希望在HTML5页面中显示外部TXT纯文本文件的内容,浏览器默认不支持直接嵌入TXT文件为可渲染内容,必须通…

    2025年12月23日
    000
  • php如何html_在PHP代码中输出HTML内容【输出】

    必须确保PHP正确解析并输出原始HTML字符串而非转义文本;可通过echo/print直接输出、heredoc语法处理多行含变量HTML,或用PHP结束标签切换至纯HTML模式。 如果您在PHP脚本中需要将HTML代码作为响应内容发送给浏览器,则必须确保PHP正确解析并输出原始HTML字符串,而非将…

    2025年12月23日
    000
  • html5标题如何缩短_HTML5标题缩短方法与显示优化技巧【详解】

    HTML5标题优化有五种方法:一、CSS text-overflow截断;二、JavaScript动态裁剪;三、服务端预截断;四、CSS clamp响应式缩放;五、HTML语义化标记配合aria属性。 如果您在网页开发中发现HTML5标题过长,导致在移动端或窄屏设备上显示不全、换行错乱或影响页面美观…

    2025年12月23日
    000
  • 如何查找HTML文件路径_资源定位技巧【指南】

    使用浏览器开发者工具可快速定位HTML资源路径:打开Network面板刷新页面,查看Request URL及状态码;相对路径以HTML文件所在目录为基准;注意base标签对路径解析的影响。 如果您在开发网页时需要快速定位HTML文件或其引用的资源路径,可能由于项目结构复杂或路径配置错误导致资源无法加…

    2025年12月23日
    000
  • phpstorm怎么新建html5_PHPStorm新建HTML File选HTML5模板快速创建【新建】

    PHPStorm新建HTML文件未自动应用HTML5结构时,需检查并设置默认HTML模板为HTML5格式,或使用Live Template输入html5后按Tab键快速生成标准结构。 如果您在 PHPStorm 中新建 HTML 文件时未自动应用 HTML5 文档结构,则可能是模板配置未启用或文件类…

    2025年12月23日
    000
  • html5能否插入在线文档链接_html5在线文档嵌入与权限设置【教程】

    HTML5中嵌入在线文档需根据来源选择方案:一、用iframe嵌入Google Docs等公开文档,须设“任何人可查看”;二、通过OnlyOffice等第三方服务中转,确保响应头允许嵌入;三、用object/embed加载PDF,需服务器配置CORS;四、无法修改源站时,可用服务端代理过滤禁用响应头…

    2025年12月23日
    000
  • html中怎么运行sql语句_html中运行sql语句方法【教程】

    必须通过后端服务执行SQL操作。一、PHP与MySQL交互:使用PHP脚本在服务器端连接数据库,执行查询并嵌入HTML输出,避免硬编码凭证。二、Ajax调用API:前端通过JavaScript向后端API发送请求,服务端执行SQL并返回JSON数据,前端动态渲染结果。三、SQLite与JavaScr…

    2025年12月23日
    000
  • html5游戏怎么加密_HT5用JS混淆或加密工具保护游戏代码逻辑【加密】

    HTML5游戏可通过五种方法保护JavaScript核心逻辑:一、混淆工具重命名变量并压缩代码;二、WebAssembly封装敏感算法;三、关键逻辑移至服务端校验;四、动态解密执行加密函数;五、混淆资源路径并碎片化加载。 如果您的HTML5游戏使用JavaScript编写,源代码容易被直接查看和复制…

    2025年12月23日
    000
  • html5怎么传值_html5用URL参数或表单提交实现页面间数据传值【传值】

    HTML5页面间传值主要有三种方式:一、URL参数传值,通过query string附加数据并用URLSearchParams解析;二、表单GET提交,自动拼接查询字符串,适合用户输入场景;三、表单POST配合服务器中转,适用于大量或特殊字符数据,需后端处理后再以URL参数或AJAX方式传递。 如果…

    2025年12月23日
    000
  • phpstorm怎么运行html5_PHPStorm右键选Run运行html5文件预览效果【操作】

    PHPStorm中HTML5文件右键无Run选项,需配置内置服务器、设置文件类型、安装Live Server插件或添加外部工具。一、Run→Edit Configurations→JavaScript Debug→设URL为http://localhost:63342/项目名/文件名.html;二、…

    2025年12月23日
    000
  • html5邮件怎么发_HTML5用mailto:链接或Ajax调接口发送邮件【发送】

    HTML5邮件发送有三种方式:一、mailto:链接调用本地邮件客户端,需URL编码参数;二、Ajax调用后端SMTP接口,支持附件与状态反馈;三、混合方案优先Ajax,失败时降级mailto,并前端校验邮箱格式。 如果您希望在HTML5网页中实现邮件发送功能,则可以通过mailto:协议创建超链接…

    2025年12月23日
    000
  • html如何调用外部css_html调用外部css技巧【教程】

    HTML调用外部CSS的五种方式:一、link标签引入;二、@import在CSS中导入;三、JavaScript动态创建link;四、HTTP响应头声明Content-Type;五、data URL内联小型CSS。 如果您希望在HTML文件中应用样式,但不想将CSS代码直接写入HTML内部,则需要…

    2025年12月23日
    000
  • php怎么写html5_PHP echo输出HTML5标签字符串生成动态页面【编写】

    应检查字符串拼接、引号嵌套及特殊字符转义;一、直接echo时用单引号防解析,属性值统一用单引号或转义双引号;二、大段HTML用heredoc语法嵌入变量。 如果您在PHP中使用echo输出HTML5标签字符串来生成动态页面,但发现页面结构异常或标签未被正确解析,则可能是由于字符串拼接错误、引号嵌套冲…

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信