<!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. Java API ——Arrays类

    1.Arrays类概述 · 针对数组进行操作的工具类. · 提供了排序,查找等功能. 2.成员方法 · public static String toString(int[] a):in[] a可以改 ...

  2. P102、面试题14：调整数组顺序使奇数位于偶数前面

    题目:输入一个整数数组,实现一个函数来调整该数组中数字的属性怒,使得所有奇数位于数组的前半部分,所有偶数位于数组的后半部分. 思路:其实就是用快速排序法的第一轮排序,从左右夹逼,左边遇到偶数,停下来, ...

  3. 【剑指offer】数字在排序数组中出现的次数

    2013-09-02 16:28:35 找出数字在排序数组中出现的次数. 注意几点: 一开始试图用size_t类型表示数组的下标begin.end,到那时这样做在end = 0时,end - 1是si ...

  4. foreach中引用 的问题

    在工作中遇到 关于 php foreach 引用的一个问题 简单来说,如下代码 $arr=array('a','b','c' ,'d'); foreach($arr as $k=>&$v ...

  5. [原]Unity3D深入浅出 - 光源组件(Light)

    Unity中提供了四种光源: Directional light: 方向光,类似太阳的日照效果. Point light: 点光源,类似蜡烛. Spotlight: 聚光灯,类似手电筒. Area L ...

  6. Java泛型类与类型擦除

    转载自:http://blog.csdn.net/lonelyroamer/article/details/7868820 一.Java泛型的实现方法:类型擦除 前面已经说了,Java的泛型是伪泛型. ...

  7. Java [leetcode 29]Divide Two Integers

    题目描述: Divide two integers without using multiplication, division and mod operator. If it is overflow ...

  8. 手把手教你WEB套打程序开发

    WEB套打可选方案不多,理想的更少,利用免费控件Lodop+JavaScript实现精确套打,算是较为经典的选择.这种方案其实比较简单,利用一个htm文件就可以实现模板设计过程,几乎是“空手套”式的开 ...

  9. 编程精粹：编写高质量的C语言代码———笔记一

    第一章 假想的编译程序 要记得对空语句进行处理,最好使用NULL使其明显可见 char * strcpy(char* pchTo, char* pchFrom) { char* pchStart = ...

  10. 第一章 Lambda表达式

    1.1 Why Lambdas? 当你操作多线程的时候,你会像下面这样将要处理的代码放到run()函数中: class Worker implements Runnable { public void ...