本篇文章给大家介绍一下 CSS 语法特点和三种引入到页面的方式与其优先级. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
CSS 全称为 "层叠样式表 (Cascading Style Sheets)", 它主要是用于定义 html 内容在浏览器内的显示样式, 如 p{font-size:12px;color:red;font-weight:bold;}文字大小, 颜色, 字体加粗等. CSS 优势是什么? 编写一条 CSS 语句控制 3 个 span 里面的文本语句颜色, 使用 CSS 样式的一个好处是通过定义某个样式, 可以让不同网页位置的文字有着统一的字体, 字号或者颜色等.
☆CSS 样式由选择符和声明组成, 而声明又由属性和值组成,/* 选择符 {属性: 值} 选择符 =>选择器 {属性: 值}=>声明 */ 选择符: 又称选择器, 指明网页中要应用样式规则的元素; 声明: 在英文大括号 "{}" 中的的就是声明, 属性和值之间用英文冒号 ":" 分隔. 当有多条声明时, 中间可以英文分号 ";" 分隔; 注意: 1, 最后一条声明可以没有分号, 但是为了以后修改方便, 一般也加上分号. 2, 为了使用样式更加容易阅读, 可以将每条代码写在一个新行内.
CSS 注释代码就像在 HTML 的注释一样, 在 CSS 中也有注释语句: 用 /* 注释语句 */ 来标明(HTML 中使用<!-- 注释语句 -->).
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title > 简单了解 CSS 特点, 语法和注释</title>
- <style type="text/css">
- div{
- font-size:20px;/* 设置文字字号 */
- color:red;/* 设置文字颜色 */
- font-weight:#f90;/* 设置字体加粗 */
- }
- div>span{
- color: aqua;
- text-decoration: underline;
- }
- /* 选择符 {属性: 值} 选择符 => 选择器 {属性: 值}=>声明 */
- </style>
- </head>
- <body>
- <div>
- <span > トラブルに別れを告げ</span>,
- <span > 苦情で断ち切り</span>, 勤勉に手を振って, お互いをしっかりと抱きしめ,
困難と戦ってください. ためらうことを忘れて, 話をして, 来て, すべての夢を実現してください.
- <span > あなたの栄光が実現します</span>.
- </div>
- </body>
- </HTML>
CSS 样式可以写在哪些地方呢? 从 CSS 样式代码插入的形式来看基本可以分为以下 3 种: 内联式, 嵌入式 (外联式) 和外部式三种.* 注意外联式 CSS:
1,CSS 样式文件名称以有意义的英文字母命名, 如 main.CSS;
2,rel="stylesheet" type="text/css" 是固定写法不可修改;
3,<link > 标签位置一般写在 < head > 标签之内.
对于同一个元素我们同时用了三种方法设置 CSS 样式, 那么哪种方法真正有效呢?
因为这三种样式是有优先级的, 它们的优先级: 内联式> 嵌入式> 外部式 (嵌入式> 外部式有一个前提: 嵌入式 CSS 样式的位置一定在外部式的后面.)
☆前提: 内联式, 嵌入式, 外部式样式表中 CSS 样式在的相同权值的情况下 =>就近原则(离被设置元素越近优先级别越高)
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- 内联式, 嵌入式, 外部式, 优先级
- </title>
- <link rel="stylesheet" type="text/css" href="./style.css" />
- <!-- 外部式 css 样式就是把 css 代码写一个单独的外部文件中, 这个 css 样式文件以 ".css" 为扩展名, 在 < head> 内 (不是在 < style > 标签内) 使用 < link > 标签将 css 样式文件链接到 HTML 文件内 -->
- <style type="text/css">
- div::first-letter{ text-transform: uppercase; font-size: 24px; } div>span{
- /* color: #5F9EA0!important; */ color: blue; }
- </style>
- <!-- 嵌入式 css 样式, 需要把代码写在 < style type="text/css"></style > 标签之间,
- 并且一般情况下嵌入式 css 样式写在 < head></head > 之间 -->
- </head>
- <body>
- <div>
- You are my only obsession / Only you can make me happy /
- <span style="color: #F90;">
- are the trust of my life
- </span>
- / Even if you go to the soup / If I forget how to love you / It must be
- my memory loss coma /
- <span style="color: #F90;">
- If I leave suddenly I must not want to drag you down
- </span>
- </div>
- <!-- 内联式: css 样式表就是把 css 代码直接写在现有的 HTML 标签中, 注意 css 样式代码要写在 style="" 双引号中,
- 如果有多条 css 样式代码设置可以写在一起, 中间用分号隔开.-->
- </body>
- </HTML>
本文转载自: https://www.cnblogs.com/dhnblog/p/12398894.html
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/17586.html