<!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. org.apache.http.ProtocolException: Target host is not specified

    对于httpClient4.3访问指定页面,可以从下面的demo抽取方法使用. 注意:对于URL必须使用 http://开始,否则会有如下报错信息: Caused by: org.apache.htt ...

  2. http_build_query函数(学习)

    http_build_query函数   http_build_query -- 生成 url-encoded 之后的请求字符串 描述 string http_build_query ( array ...

  3. linux编译注解

    Linux kernel release 3.x <http://kernel.org/> These are the release notes for Linux version 3. ...

  4. 【ZOJ】3609 Modular Inverse

    1. 题目描述求乘法逆元. 2. 基本思路利用扩展gcd求逆元,模板题目. 3. 代码 /* 3609 */ #include <iostream> #include <sstrea ...

  5. Red hat Linux(Centos 5/6)安装R语言

    Red hat Linux(Centos 5/6)安装R语言1 wget http://cran.rstudio.com/src/base/R-3/R-3.0.2.tar.gz2 tar xzvf R ...

  6. Hibernate一对多和多对一关系详解 （转载）

    :双向一对多关系,一是关系维护端(owner side),多是关系被维护端(inverse side).在关系被维护端需要通过@JoinColumn建立外键列指向关系维护端的主键列.     publ ...

  7. JavaScript NodeList和Array

    原文引用脚本之家作者:Jeff Wong,谢谢大神提供资源 在Web前端编程中,我们通常会通过document.getElementsByTagName或者document.getElementsBy ...

  8. windows2003远程桌面退出后系统自动注销的解决方法

    最近公司有一个奇怪的需求,意思是有一个网页,要时时的打开着.现在只有把这个网页在服务器上打开. 这样才能满足需求.但我在应用中遇见了个问题.我在服务器上打开网页后,关掉远程,过一会网页的运行效果就没有 ...

  9. 【转】Ubuntu 14.04配置安装java环境和android开发环境（包括真机调试环境）

    原文网址:http://my.oschina.net/HalZf/blog/347351 总要记录下过程,不然老是会忘记掉-真老了.-_-! 一.配置安装ubuntu 64位java环境: 1.下载l ...

  10. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...