CSS 全称为 "层叠样式表 (Cascading Style Sheets)", 它主要是用于定义 html 内容在浏览器内的显示样式, 如 div{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 样式在的相同权值的情况下 =>就近原则(离被设置元素越近优先级别越高)
专门建立的学习 Q-q-u-n: 784783012 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- <!DOCTYPE HTML>
- <HTML lang="zh">
- <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>
- =
来源: http://www.jianshu.com/p/76d9f40c401d