• 特点: CSS 将网页内容和显示样式进行分离,提高了显示效果的功能.
  • CSS 和 html 相结合的四种方式:
    1. style 属性的方式

      • 每个 html 标签中都有一个 style 样式属性, 该属性的值就是 css 代码.
      • 格式: style="键:值; 键:值"
      • 属性与属性之间用分号隔开, 属性与属性值之间用冒号连接
    2. style 标签的方式
      • 一般都定义在 head 标签中
  1. // CSS 和 html 属性结合的四种方式:
  3. // 方式一: style 属性的方式
  4.     <div style="color:#FF0000; background-color:#0066FF">这是一个 div 区域</div>
  6. // 方式二: style 标签的方式
  7. <html>
  8.     <head>
  9.         <style type="text/css">
  10.             div{
  11.                 background-color: #000000;
  12.                 color: #FFFFFF;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <div>这是一个 div 区域</div>
  18.         <div>这是一个 div 区域</div>
  19.         <span>span 区域1</span>
  20.     </body>
  21. </html>
  23. // 方式三: @import 方式引入 .css 文件
  24. <html>
  25.     <head>
  26.         <style type="text/css">
  27.             @import url(css 文件地址)
  28.         </style>
  29.     </head>
  30.     <body>
  31.         <div>这是一个 div 区域</div>
  32.         <div>这是一个 div 区域</div>
  33.         <span>span 区域1</span>
  34.     </body>
  35. </html>
  37. // 方式四: link 连接的方式
  38. <html>
  39.     <head>
  40.         <link rel="stylesheet" href="css 文件地址" type="text/css" />
  41.     </head>
  42.     <body>
  43.         <div>这是一个 div 区域</div>
  44.         <div>这是一个 div 区域</div>
  45.         <span>span 区域1</span>
  46.     </body>
  47. </html>

选择器

  • 就是指定 CSS 要作用的标签, 那个标签名就是选择器. 意为: 选择哪个容器
  • 选择器共有三种:
    • html 标签名选择器. 使用的就是 html 的标签名, 例如, div, span, p
    • class 选择器, 使用的是标签中 class 属性
    • id 选择器, 使用的是标签中 id 属性
    • 备注: 多个标签的 class 属性值可以相同, 而 id 值在页面中是唯一的
  • 样式优先级: 标签名选择器 < class 选择器 < id 选择器 < style 属性
  1. // 示例: 选择器的使用
  2. <html>
  3.     <head>
  4.         <style type="text/css">
  6.             // html 标签名选择器
  7.             div{
  8.                 background-color: #0099FF;
  9.                 color: #FFFFFF;
  10.             }   
  12.             // class 选择器
  13.             // 可以理解为: div 的名字叫做 haha 的 class 选择器
  14.             div.haha{
  15.                 background-color:#FFFF33;
  16.                 color:#00CC00;
  17.             }
  19.             // 所有类名叫做 haha 的选择器
  20.             .haha{
  21.                 background-colr:#FFFF33;
  22.                 color:#00CC00;
  23.             }
  25.             // 样式已经定义好, 但是网页中还未调用
  26.             // 预定义样式, 可以实现动态的加载.
  27.             .hehe{
  28.                 background-color: #0000EE;
  29.                 color: #0000FF;
  30.             }
  32.             // id 选择器
  33.             div#qq{
  34.                 background-color: #FFFF00;
  35.                 color: #FF0000;
  36.             }
  37.         </style>
  38.     </head>
  39.     <body>
  40.         <div id="qq">这是一个 div 区域</div>
  41.         <div class="haha">这是一个 div 区域</div>
  42.         <span>span 区域1</span>
  43.     </body>
  44. </html>

扩展选择器

  • 关联选择器 : 选择器中的选择器
  • 组合选择器 : 对多种选择器进行相同样式的定义
  • 伪元素选择器 : 就是在 html 中预先定义好的一些选择器
    • 格式: 标签名: 伪元素或者 类名: 伪选择器
    • 如超链接状态: 未访问, 悬停, 点击效果, 访问后效果
    • 段落: p:first-line: 段落的第一行; p:first-letter: 段落中的第一个字母
    • :focus 具有焦点的元素
  1. // 示例:关联选择器
  2. <html>
  3.     <head>
  4.         // span 中的 b 标签
  5.         span b{
  6.             background-color: #0099FF;
  7.             color: #FFFFFF;
  8.         }
  9.     </head>
  10.     <body>
  11.         <div>这是一个 div 区域</div>
  12.         <div>这是一个 div 区域</div>
  13.         <span>CSS 可以静态地<b>修饰网页</b></span>
  14.     </body>
  15. </html>
  17. // 示例: 组合选择器
  18. <html>
  19.     <head>
  20.         // 多个选择器, 使用逗号分隔
  21.         div,p{
  22.             background-color: #000000;
  23.             color: #CC0000;
  24.         }
  25.     </head>
  26.     <body>
  27.         <div>这是一个 div 区域</div>
  28.         <div>这是一个 div 区域</div>
  29.         <p>
  30.             CSS提供了丰富的文档样式外观，以及设置文本和
  31.             背景属性的能力；允许为任何元素创建边框.
  32.         </p>
  33.     </body>
  34. </html>
  36. // 示例: 伪元素选择器
  37. // 如超链接的状态: 未访问(a:link)  悬停(a:hover)  点击效果(a:active)  访问后效果(a:visited)
  38. //   使用顺序: L  V  H  A
  39. <html>
  40.     <head>
  41.         //  未访问
  42.         a:link{
  43.             background-color: #0066FF;
  44.             color:#FFFFFF;
  45.             text-decoration: none;   // 去除超链接中的下划线
  46.             font-size: 18px;
  47.         }
  49.         // 鼠标悬停
  50.         a:hover{
  51.             background-color: #FFFFFF;
  52.             color: #FF0000;
  53.             font-size:24px;
  54.         }
  56.         // 点击效果
  57.         a:active{
  58.             background-color:#000000;
  59.             color:#FFFFFF;
  60.             fong-size:36;
  61.         }
  63.         // 访问后效果
  64.         a:visited{
  65.             background-color:#FFFF99;
  66.             color:#000000;
  67.             text-decoration:line-through;
  68.         }
  70.         // 焦点
  71.         input:focus{
  72.             background-color:#0099FF;
  73.         }
  74.     </head>
  75.     <body>
  76.         <a href="http://www.cnblogs.com/linkworld/" target="_blank"></a>
  77.         <input type="text"/>
  78.     </body>
  79. </html>
  81. // html+css 综合应用
  82. <html>
  83.     <head>
  84.         <style type="text/css">
  85.             // 设置表格样式
  86.             table{
  87.                 border-bottom:#00cc00 double 3px;
  88.                 border-left:#ff0000 solid 3px;
  89.                 border-right:#ffff00 dashed 3px;
  90.                 border-top:#00cc00 groove 3px;
  91.                 width:500px;
  92.             }
  94.             // 设置表格中的单元格
  95.             table td{
  96.                 border:#00ccff dotted 1px;
  97.                 padding:20px;
  98.             }
  100.             // 设置 input 格式
  101.             input {
  102.                 border:none;
  103.                 border-bottom:#000000 solid 3px;
  104.             }
  105.         </style>
  106.     </head>
  107.     <body>
  108.         <table>
  109.             <tr>
  110.                 <td>单元格一</td>
  111.                 <td>单元格一</td>
  112.             </tr>
  113.             <tr>
  114.                 <td>单元格二</td>
  115.                 <td>单元格二</td>
  116.             </tr>
  117.         </table>
  119.         <br/>
  120.         <hr/>
  121.         姓名:<input type="text"/>成绩<input type="text"/>
  122.     </body>
  123. </html>

盒子模型

  • 布局方式: div + css
  • 盒子模型: content, padding, border, margin

  • CSS 布局方式

    • 漂浮 float : none, left, right
    • 漂浮清除 clear :
      • none(默认值, 允许两边都可以有浮动对象)
      • left(不允许左边有浮动对象), right, both
    • 定位 position : static(默认值), absolute, relative
  1. // 示例一: 漂浮
  2. <html>
  3.     <head>
  4.         <style type="text/css">
  5.             div{
  6.                 border:#0099ff solid 1px;
  7.                 height:100px;
  8.                 width:200px;
  9.             }
  11.             #div_1{
  12.                 background-color:#FF9900;
  13.                 float:left;
  14.             }
  15.             #div_2{
  16.                 background-color:#00ccff;
  17.                 float:left;
  18.             }
  19.             #div_3{
  20.                 background-color:#33ff00;
  21.                 clear:left;
  22.             }
  23.         </style>
  24.     </head>
  25.     <body>
  26.         <div id="div_1">
  27.             这是第一个盒子
  28.         </div>
  29.         <div id="div_2">
  30.             这是第二个盒子
  31.         </div>
  32.         <div id="div_3">
  33.             这是第三个盒子
  34.         </div>
  35.     </body>
  36. </html>
  38. // 示例二: 定位 position
  39. // absolute: 绝对定位, 从当前文档流中拖出,漂浮在空中.
  40. //           使用 left, right, top, bottom 等属性相对于其最接近的一个
  41. //           具有定位设置的父对象进行绝对定位. 如果不存在这样的父对象, 则依据 body 对象.
  42. // relative: 不拖出文档流.
  43. <html>
  44.     <head>
  45.         <style type="text/css">
  46.             div{
  47.                 border:#0099ff solid 1px;
  48.                 height:100px;
  49.                 width:200px;
  50.             }
  52.             #div_1{
  53.                 background-color:#FF9900;
  54.                 position:absolute;
  55.             }
  56.             #div_2{
  57.                 background-color:#00ccff;
  58.                 width: 300px;
  59.             }
  60.             #div_3{
  61.                 background-color:#33ff00;
  62.             }
  63.         </style>
  64.     </head>
  65.     <body>
  66.         <div id="div_1">
  67.             这是第一个盒子
  68.         </div>
  69.         <div id="div_2">
  70.             这是第二个盒子
  71.         </div>
  72.         <div id="div_3">
  73.             这是第三个盒子
  74.         </div>
  75.     </body>
  76. </html>

图像签名

  1. <html>
  2.     <head>
  3.         <style type="text/css">
  4.             #text{
  5.                 font-family:Courier New;
  6.                 font-size:24px;
  7.                 color:#0000EE;
  9.                 position:absolute;
  10.                 top:220px;
  11.                 left:10px;
  12.             }
  14.             #imgtext{
  15.                 border:#ff6600 dotted 1px;
  16.                 width:500px;
  18.                 position:absolute;
  19.             }
  20.         </style>
  21.     </head>
  22.     <body>
  23.         // 将图片和文字作为整体封装
  24.         <div id="imgtext">
  25.             // 使用 div 将图片封装起来
  26.             <div id="img">
  27.                 <img src="1.jpg" height="300" width="500"/>
  28.             </div>
  30.             // 使用 div 将文字封装起来
  31.             <div id="text">
  32.                 乐在其中
  33.             </div>
  34.         </div>
  35.     </body>
  36. </html>

**参考资料**
- [JavaSE 基础视频(毕向东)](https://www.bilibili.com/video/av3137994/#page=1)
- [CSS2 参考手册](http://tool.oschina.net/apidocs/apidoc?api=css2)

CSS 快速入门的更多相关文章

  1. CSS快速入门（四）

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  2. Html与CSS快速入门01-基础概念

    Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...

  3. Html与CSS快速入门02-HTML基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...

  4. Html与CSS快速入门03-CSS基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...

  5. Html与CSS快速入门04-进阶应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...

  6. HTML/CSS快速入门

    Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...

  7. #001 CSS快速入门讲解

    CSS入门讲解 HTML人+CSS衣服+JS动作=>DHTML CSS: 层叠样式表 CSS2.0 和 CSS3.0 版本,目前学习CSS2, CSS3只是多了一些样式出来而已 CSS 干啥用的 ...

  8. CSS快速入门例子

    CSS入门应用 01-结合方式01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  9. CSS快速入门基础篇，让你快速上手（附带代码案例）

    1.什么是CSS 学习思路 CSS是什么 怎么去用CSS(快速上手) CSS选择器(难点也是重点) 网页美化(文字,阴影,超链接,列表,渐变等) 盒子模型 浮动 定位 网页动画(特效效果) 项目格式: ...

  10. 02-03 CSS快速入门

    css四种引入方式:test.html: p{ color: gold; font-size: 20px; } title.html: <!DOCTYPE html> <html l ...

随机推荐

  1. Unity编辑器下获取动画的根运动状态并修改

    我最初想直接修改.anim文件 但通过后来得到的信息,其实根运动状态储存在FBX.meta文件里,转出的.anim文件虽然也有根运动的信息但是算是塌陷过的,无法进行开关操作. 这是我针对有根运动.an ...

  2. atitit.项目设计模式---ioc attilax总结

    atitit.项目设计模式---ioc attilax总结 1. .IOC的之前 1 2. ioc后的实现 1 3. 认识引入IOC框架的缺点, 2 4. 自己实现ioc 3 4.1. ioc框架的实 ...

  3. [na] centos如何通过vmware Windows共享文件

    参考 自我感觉都会使用Windows中的文件.在Windows与linux之间互传文件是一个问题.本方法介绍的是在linux下挂载Windows共享文件夹的方法来实现的 首先安装VMware Tool ...

  4. error while loading shared libraries错误解决

    在编译引用了第三方库的代码后,执行出现了以下错误 [work@xxx zktest]$ ./a.out ./a.out: error while loading shared libraries: l ...

  5. c++11 thread (目前我使用的ZThread库)

    目前为止(2014-11-30),GCC其实已经基本上完全支持C++11的所有功能了,事实上从GCC4.7之后,就支持了-std=c++11选项,在4.7版本之前,也开始支持-std=c++0x的选项 ...

  6. Oracle基础（三）数据库管理

    上篇介绍了Oracle数据库的基本操作指令:增.删.改.查以下针对数据库的管理进行介绍 数据库角色介绍 数据管理员:  至少有一个数据库管理员dba. 职责:安装和升级oracel数据库 建库,表空间 ...

  7. The Definitive Guide To Django 2 学习笔记(三） URLconfs 和松耦合

    前面的例子体现了一个设计模式中的重要思想,松耦合. 不论我们是将/time/改成/current_time/,还是新建一个/another-time-page/同样指向views.py中的 curre ...

  8. 【Raspberry pi】系统安装及基础配置

    1.系统安装 见官网:http://www.raspberrypi.org/quick-start-guide 2.基础配置 转载自http://www.eeboard.com/bbs/thread- ...

  9. Linux中buffer/cache,swap,虚拟内存和page ++

    1.Buffer 和 cache Free 命令相对于top 提供了更简洁的查看系统内存使用情况: [apptest@vs022 ~]$ free -m               ——以MB为单位  ...

  10. RadioButton ---- 样式效果切换

    \res\drawable\radio_button_bg.xml <?xml version="1.0" encoding="utf-8"?> & ...