<!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <title>CSS常用属性</title>

     <style media="screen">

     /*标签+ 空格 + 大括号 = 标签选择器 ，可在标签选择器中定义标签属性*/

        .d23 {

          color: white;

          font-size: 30px;

          background-color: orange;

          width: 300px;

          height: 60px;

          border:2px red solid;/*第一个参数：边框宽度 第二个参数：边框颜色 第三个参数：边框样式*/

          background-image: url("myImage.png");

          opacity: 0.9;/*透明度*/

          text-align: center;

        }

        p {

          color:blue;

        }

        .p1 {

          text-decoration: overline;

          color: green;

        }

        .p2 {

          text-decoration:line-through;;

          color: red;

        }

        ul {

          list-style: circle;/*列表样式*/

        }

        a {

          text-decoration: none;/*a标签样式（是否存在下划线）*/

        }

        .div {/*盒模型*/

          background-color: gold;

          width: 200px;

          height: 200px;

          border: 20px solid black;

          margin: 50px;/*margin:外边距，相当于左上角的坐标*/

          padding: 10px;/*padding:content 距离 border的距离，会增大整个div大小*/

          /* border, margin,padding都可以-出来上下左右的分别值*/

        }

     </style>

   </head>

   <body>

 <!--  可以在单个div块中的style属性中添加font color等属性，不过一般不推荐，高耦合-->

     <!-- <div class="" style="font-size:30px;color:blue;"> -->

     <div class="d23" >

       这有一个div

     </div>

 <a href="">a标签-点击跳转</a>

 <!--  标签被class赋值后，相当于添加了一个标识符属性，在head中条用相应的标签时要 ‘.’出来相应的属性;

 注意被赋值开头不能是数字，否则不识别-->

     <p class="p1">

       p1标签的文本

     </p>

     <p class="p2">

       p2标签的文本

     </p>

 <ul>

   <li>HTML5</li>

   <li>iOS</li>

   <li>CSS</li>

 </ul>

 <div class="div">

 div

 </div>

   </body>

 </html>

 <!--  1、元素选择器：标签种类名 +空格 +大括号

 eg：

 h1 {

 background-color : #ccc;

 }

 -->

 <!--  2、选择器的分组（可用来选择多个标签）：标签种类名 + ‘,’ + 空格 + 大括号

 eg:

 h1,h2 {

 background-color : #ccc;

 }

 -->

 <!--  3、通配符选择器（可选择全部标签，通常用来去掉外边框，内边框）： '*' + 空格 + 大括号

 * {

 }

 -->

 <!--  4、class选择器：点 + class名 + 空格 + 大括号

 eg：

 .p2 {

   color: red;

 }

 -->

 <!-- 5、结合元素选择器（标签和class相结合，用来精准获取某一个标签）

 eg:

 div.div {

 background-color : #ccc;

 }-->

 <!--  6、id先择器（类似class用法）：‘#’ + id名 + 大括号

 eg：

 #p1 {

 color:red;

 }

 -->

 <!--注意： id 和 class都有标志符的作用，但是区别在于class可以在不同种类标签中使用同一个名称；

 id在不同种类标签中也存在唯一性，即在一个html页面中只能存在一个id-->

HTML5要点_CSS（三）的更多相关文章

  1. 老李分享：《Linux Shell脚本攻略》 要点（三）

    老李分享:<Linux Shell脚本攻略> 要点(三)   1.生产任意大小的文件 [root@localhost dd_test]#[root@localhost dd_test]# ...

  2. SDR软件无线电知识要点（三）EVM

    SDR软件无线电知识要点(三)EVM 信号质量如何评估 Noise Figure (NF) or sensitivity and Error Vector Magnitude (EVM) provid ...

  3. HTML5实现动画三种方式

    编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制 ...

  4. HTML5/CSS3 第三章页面布局

    页面布局 1 页面组成 2 布局相关的标签 <div></div> 定义文档中的分区或节 <span></span> 这是一个行内元素,没有任何意义 & ...

  5. HTML5学习笔记三 HTML元素、属性、标题、段落简介

    一.HTML 元素 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容(empty content) 空元素在开始标签 ...

  6. 【C#】第3章学习要点（三）--常用类和结构的用法

    分类:C#.VS2015 创建日期:2016-06-19 使用教材:(十二五国家级规划教材)<C#程序设计及应用教程>(第3版) 一.DateTime结构和TimeSpan结构 DateT ...

  7. 2016.6.20 计算机网络复习要点第三章之CSMA/CD协议

    1.最早的以太网是将许多计算机都连接到一根总线上: (1)总线的特点是:当一台计算机发送数据时,总线上的所有计算机都检测到这个数据,这种就是广播通信方式: (2)为了实现在总线上的一对一通信,可以使每 ...

  8. HTML5要点（二）

    <p> <b>今天周一</b>,<span>呵呵呵呵呵...</span> </p> <i>斜体文字</i&g ...

  9. HTML5要点（一）

    一.标签: <!-- -->:注释:cmd +/ <!DOCTYPE html><!--HTML5 专属版本声明标签(表明该页面使用HTML编写),代码最上层--> ...

随机推荐

  1. mysql 读取硬盘数据

    innodb 的最小管理单位是页 innodb的最小申请单位是区,一个区 1M,内含64个页,每个页16K ,即 64*16K=1M, 考虑到硬盘局部性,每次读取4个区,即读4M的数据加载至内存 线性 ...

  2. mysql 幻读

    幻读(Phantom Read) 是指当用户读取某一范围的数据行时,B事务在该范围内插入了新行,当用户再读取该范围的数据行时,会发现有新的“幻影”行.InnoDB和Falcon存储引擎通 过多版本并发 ...

  3. bzoj1003： [ZJOI2006]物流运输

    dp+最短路.暴力枚举就可以了.O(n3logn).样例中m=n然后测样例过了.然后 54行习惯性的dis[n]然后就WA了!!!. #include<cstdio> #include&l ...

  4. 如何在同一台服务器上安装多套通达OA

    本人最近研究了在同一服务器安装多套通达OA的方法:发现网上关于这个话题的文章比较少,于是录制成视频,在此发布,希望对有这方面需求的朋友有所帮助: http://blog.163.com/zhuwei_ ...

  5. 非均匀B样条拟合MATLAB程序

    直接上代码,多的不再说了. %------------------非均匀B样条拟合MATLAB程序----------------- clear k=; x=load('data.txt'); [n, ...

  6. HDU 4276-The Ghost Blows Light（树状背包）

    题意: n个房间,每个有一定的钱,一个房间到另一个房间花费一定的时间,给你房间连接树,求在t时间内到达房间m能得到的最大钱数(从房间1(根)出发) 分析: 该题关键是最后要到达m,没有这个条件,就是基 ...

  7. QT中使用 slot 传递 opencv 中得Mat对象以及 使用多线程集成开源代码。

    关于 slot传递 Mat 对象 以前一直是使用 Qtimer 定时器,设定超时后读取 dialog 对象的 Mat成员实现在 UI 里显示图像,发现这样对以后集成其他面向过程的代码增加了复杂度. 所 ...

  8. 将UIWebView显示的内容转为图片和PDF

    今天开发MarkEditor时要用到将 UIWebView 中显示的内容转为图片,方便转发到各个社交网络(Twiiter,Facebook,Weibo),这样内容就不受长度限制,类似于长微博. 之前关 ...

  9. viedeo

    http://download.farsight.com.cn/download/Android.htm

  10. windows安装python开发环境

    1.下载python 官网下载最新版python python-2.7.5.amd64.msi http://vdisk.weibo.com/s/Cd8pPaw56OWbR 2.下载PyCharm 官 ...