CSS 基本概念
CSS 是什么? 不需要了解太多文字类介绍, 记住 CSS 是层叠样式表, html 是页面结构, CSS 负责页面样式, javascrt 负责静态页面的交互. CSS 能够对网页中元素位置的排版进行像素级精确控制, 拥有对网页对象和模型样式编辑的能力. 详情参考 [CSS 百度百科] 了解其发展历史, 语言特点与语言基础等, 也是有好处的.
标签的属性决定了静态页面的展示效果, 在早期, 标签属性过多, 对于浏览器的识别过于麻烦, 因为一修改标签, 页面的版本什么都需要变动, 可谓牵一发而动全身! 除此之外, 对于开发人员来说, 代码过于臃肿冗长, 为此 W3CS, 也就是万维网联盟制定了一个标准, 把 CSS 与 HTML 相分离, 选择器通过样式属性与标签相关联, 这样就提高了 HTML 代码与 CSS 样式的可用性.
CSS 核心语法
1.CSS 的三种引入方式属于 CSS 的核心语法, 分为内部样式, 外部样式, 内联样式(也叫行内样式), 最终展示页面效果都是一样的
2.CSS 组成为: 选择器 {属性: 属性值}, 同时{属性: 属性值} 也称之为选择器声明部分, CSS 的注释与 HTML 的注释不同, 它的注释表示为 / 注释部分 /
3.CSS 中颜色为 RGB 红, 绿, 蓝三种色彩模式, 颜色由浅入深, 对应数字 0-255, 这也是系统默认颜色
3.1 颜色表示 color(255,0,0)红色, 如果用百分比表示为(100%,0,0)
3.2 颜色也可以用具体的英文单词表示, 比方说: 红色就是 red, 绿色就是 green, 蓝色就是 blue 等
3.3 从设计师而言, 颜色也可以按照 16 进制, 0-9 是 10, 剩余的从 a-f 开始, 这才 15 位, 至于 16 则用 10 表示; 颜色表示形式为 #开头, 比方红色是 #ff0000=>rgb(255,0,0)针对这种重复的就可以 2 个写成一个, 展示为 #f00
专门建立的学习 Q-q-u-n: 784783012 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS 基本概念与 CSS 核心语法介绍</title>
- 7 <!-- css 外部样式 -->
- 8 <!-- 新建一个 css 样式文件, 结尾. css 文件内容如下, 再通过 < link rel="stylesheet" href="">链接外部样式 9 div{ 10 color: blue; 11 } -->
- 12 <!-- <link rel="stylesheet" href="demo.css"> -->
- 13
- 14 <!-- css 内部样式 -->
- 15 <!-- <style type="text/css"> 16 div{ 17 color: blue; 18 } 19 </style> -->
- 20
- 21 <!-- 颜色三种展示形式 -->
- 22 <style type="text/css">
- 23 .box1{
- 24 color: blue;/* 英文单词名称 */
- 25 color: rgb(255,0,0);/*rgb 中 0-255*/
- 26 color: rgb(100%,0,0);/* 百分比展示 */
- 27 /* color: #ff0000; */color: #f00;
- 28 }
- 29 </style>
- 30 </head>
- 31 <body>
- 32 <!--<div style="color: blue;">css 三种样式引入分为内部样式, 外部样式, 内联样式(行内样式)</div>--><!-- 内联样式(行内样式)-->
33 <div class="box1">CSS 三种样式引入分为内部样式, 外部样式, 内联样式(行内样式), 执行顺序是先将外部样式与内部样式合并再执行内联样式</div>
- </body>
- </HTML>
专门建立的学习 Q-q-u-n: 784783012 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
来源: http://www.jianshu.com/p/f6aae649a36a