一、CSS简介： 

w3c(World Wide Web Consortium):万维网联盟，是规定网页标准的一个组织（叫做Web标准）

Web标准：是由w3c和其他标准化组织制定的一系列标准的集合，包含有HTML XTHML Javascript DOM CSS等

　　作用：

　　　　在于创建一个统一用于Web表现层的技术标准，以便通过不同的浏览器或终端设备向用户展示信息内容

　　 好处：

　　　　1.提高网页浏览速度节约文件尺寸,比传统的web设计方法至少节约50%以上的文件尺寸

　　　　2.缩短改版时间将表现（样式/外观）与内容（信息/数据）相分离，只要修改几个CSS文件就可以改变成千上万的网页样式

　　　 3.降低网站的流量费用，带宽要求降低（代码更简洁）
  　　　 4.更容易被搜索引擎搜索到，提高网站在百度或谷歌中的排名
           5.内容被更多的设备所访问

组成： 内容，结构（Structure），表现（presentation），行为（behavior）
   　　 1.内容就是制作这房租页面内真正想要让访问者浏览到的信息
   　　 2. 结构标准对应的是XHTML，使内容更加具有逻辑性和易用性，也就是把内容结构化
   　　 3. 表现标准对应的是CSS，用于修饰内容的外观的样式，即表现
  　　  4.行为标准对应的是Javascript，对内容的交互及操作效果，比如通过javascript判断表单提交等

CSS简介：（Cascading Style Sheets 层叠样式表）是一种设计网页样式的工具，可以作为html，xhtml，xml样式的控制语言

CSS 样式排版的优点:

　　　　　　排版属性功能完整,排版文件可以独立存在,可以共用排版文件

传统HTML设计网页版面的缺点 :

　　　　　　设置麻烦,修改麻烦,功能严重不足.

测试网页是否有用CSS，在浏览器中改变文字大小就可以知道，有变化说明没用CSS

二、CSS语法结构：

选择符（选择器）{属性:属性值} 列如：

  1. body{font-size:20px;}

选择符（selector）：指明这组样式针对的对象，可以是xhtml标签也可以是定义了特定的id或class的标签
属性：选择符的样式属性，如颜色，大小定位等
值：是指属性的值
可以同时为一个选择符定义多个属性每个属性之间用分号分隔（所有属性值后面都要带上分号）

  1. <style type="text/css">
  2.     body{font-size:20px; background:#0F3; color:#F06;}
  3.     h1{font-size:24px;}
  4.     span{font-size:2em;}
  5.  </style>
  6. </head>
  7. <body>
  8.     <h1>李克强主持召开<span>国务院</span>常务会议</h1>
  9.    <h2> 听取最低生活保障政策落实督查情况汇报</h2>
  10.     部署进一步加强和改进低保工作<br />
  11.     决定将《社会救助暂行办法（草案）》向社会公开征求意见
  12. </body>

body表示我们要控制的范围-针对的对象
font-size：表示的是样式的属性
14px：表示的是属性的值

三、CSS的长度单位：

1.相对长度单位：
　　　　em 相对于当前对象内文本的字体尺寸
　　　　px 像素（推荐使用）
2.绝对长度单位：
　　　　in 英寸
　　　　cm 厘米
　　　　mm 毫米
　　　　pt 点

四、CSS的应用方式

1、内联式样式表：直接写在现有的标记中

  1. <p style="font-size:24px;">0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p>
  2. <h1 style="font-weight:normal; color:#900;">玩命暴扣扳平+助攻绝杀三分 热火太幸运有这颗队魂</h1>

2、嵌入式样式表：

使用<style></style>标签嵌入到HTML文件的头部中<head>标记中

  1. <style type="text/css">
  2.     p{font-size:24px; color:#F03;}
  3. </style>
  4. </head>
  5. <body>
  6.         <p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p>
  7.         <p>斯帅称客战开拓者奥登不打 波什：他很快就可复出</p>
  8. </body>

3、外链式：

使用<link>标签调用CSS文件（开发中用这种方式）

  1. <link href="CSS在网页中应用的方式.css"  rel="stylesheet" type="text/css" />
  2. </head>
  3. <body>
  4.     <h1>李克强主持召开<span>国务院</span>常务会议</h1>
  5.     <div>决定将《社会救助暂行办法（草案）》向社会公开征求意faksdjfkasfkasdfj</div>
  6. </body>

4、导入式：

也可以使用导入方式import,但这种方式和内嵌式一样会占用网页文件的大小，并且有的浏览器解析会有问题，就是先显示网页内容在给网页内容加样式

  1. <style type="text/css">
  2.     @import url("CSS在网页中应用的方式.css");
  3. </style>
  4. </head>
  5.  
  6. <body>
  7.     <h1>李克强主持召开<span>国务院</span>常务会议</h1>
  8. </body>

五、标签的默认样式重置（css reset）

  1. 　　/*body，p,标题标签标签有上下外边距,  ol和ul有上下外边距和左右内边距         每个标签里面的内容字体大小都不太一样这里可以重置一下所有标签中的字体*/
  2.     body,p,h1,h2,h3,h4,h5,h6,ol,ul,dd,dl{ padding:0; margin:0; font-size:16px; font-family:Arial, Helvetica, sans-serif,"宋体"}
  3.     ol,ul{ list-style:none;}/*ol，ul默认有上下内外边距*/
  4.     a{ text-decoration:none;}
  5.     img{ border:none;}
  6.  
  7.     /*用*号，表示所有标签都重置，这样会影响性能*/

CSS_简介/语法结构/长度单位/应用方式/标签的样式重置/表单样式重置的更多相关文章

  1. <button>标签也能提交表单问题

    如何避免<button>标签也能提交表单的问题: 只需加上一个属性:type='button'即可:如<button type="button"> < ...

  2. html5之table嵌入form表单布局（务必注意：table标签必须在form表单内部，不能再form表单外部！）

    切记:用table标签来布局form表单元素,table标签必须放在form表单内部,否则可能会出现各种bug 原文地址:https://blog.csdn.net/weixin_43343144/a ...

  3. 4 django系列之HTML通过form标签来同时提交表单内容与上传文件

    preface 我们知道提交表单有2种方式,一种直接通过submit页面刷新方法来提交,另一种通过ajax异步局部刷新的方法提交,上回我们说了通过ajax来提交文件到后台,现在说说通过submit来提 ...

  4. HTML高级标签（3）————表单的应用

    在HTML开发中,标签的种类和数量非常多,不可能说每一种都研究透.非常多能够用CSS来控制的标签,我们基本没有必要在上面浪费时间.所以,我们仅仅要掌握在HTML开发中比較经常使用的标签就全然能够了. ...

  5. 如何阻止<a>标签默认行为和表单提交

    阻止<a>标签默认行为 方式一 (通过return false) <!DOCTYPE html> <html> <head> <meta char ...

  6. H5C3--语义标签以及语义标签IE8兼容，表单元素新属性，度量器，自定义属性，dataList,网络监听，文件读取

    HTML5新增标签以及HTML5新增的api     1.H5并不是新的语言,而是html语言的第五次重大修改--版本     2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...

  7. 10-1 body标签里面相关的标签（列表，表单，表格）

    一 列表标签<ul>,<ol>,<dl> <!DOCTYPE html> <html lang="en"> <he ...

  8. HTML语言 网页制作-----标签、表格、表单、框架

    一:序 Html静态网页,内容(hyper text markup language,超文本标记语言) Css 网页美化 Javascript 脚本语言 二:html的介绍 <!DOCTYPE ...

  9. css 为元素选择器，css目标状态伪类，结构化选择器，多媒体选择器，清除表默认样式、属性选择器

    伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...

随机推荐

  1. windows下安装php5.2.*,php5.3.*,php5.4.*版本的memcache扩展(转)

    拓展安装调试方法: 编写调试php文件 <?php  memcache();  通过命令行执行测试,因为php拓展安装成功与否与apache无关,所以没必要不断重启apache去看phpinfo ...

  2. logback日志项目使用方法 - 150205交易模块添加日志信息logback,orderNo订单号为log主键便于跟踪，数字常量化，解决取消支付BUG，弱网络环境原因

    1.项目里面的日志,便于跟踪数据的变更和异常错误信息产生.生产环境的日志级别是INFO,测试环境日志级别DEBUG,如果生产环境的日志级别是DEBUG,虽然方便查询问题,可以看到SQL语句等信息,但是 ...

  3. 2016年度 JavaScript 展望（下）

    [编者按]本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能,是<jQuery UI 实践> 一书的作者. 本文系 OneAPM 工程师编译呈 ...

  4. Random的用法

    import java.util.Random; public class RandomTest { public static void main(String[] args) { Random r ...

  5. 自制 JS.format带分页索引

    //第一参数是:Json对象,第二个是   序号  第三个   页数     第四  当前页数String.prototype.format = function (args, sid, pagesi ...

  6. MFC中错误知识总结（一）

    1.在继承与派生中,单目:表示派生,双目::表示继承,例如 class A { public: void c(); }; class B: public A {}; //类B继承类A void A:: ...

  7. DFS/BFS+思维 HDOJ 5325 Crazy Bobo

    题目传送门 /* 题意:给一个树,节点上有权值,问最多能找出多少个点满足在树上是连通的并且按照权值排序后相邻的点 在树上的路径权值都小于这两个点 DFS/BFS+思维:按照权值的大小,从小的到大的连有 ...

  8. 【转】SQL Server T-SQL写文本文件

    原文:http://www.nigelrivett.net/SQLTsql/WriteTextFile.html The are several methods of creating text fi ...

  9. PHP中global全局变量的使用

    在方法里面想用外面的变量,可以声明这个变量为全局变量. $a=1; $b=2; test_global(); function test_global() { global $a,$b; echo $ ...

  10. PageLayoutControl的基本操作

    整理了下对PageLayoutControl的基本功能操作 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2 ...