1.样式

外部样式表（通过css文件定义样式，整体样式）

当样式需要被应用到很多页面的时候，使用外部样式表，在 head 部分<link>。

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

内部样式表（单个文件的样式）

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

</head>
这样<body>和<p>就是上面的属性了

内联样式（单个控件的样式）

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>
2.样式选择器（内部样式表）
标签选择器（选择器是标签）

用逗号将需要分组的选择器分开h1，h2；值也可以有多个，用逗号隔开；
class选择器

　类选择器以一个点号显示：

.center {text-align: center}
用class=“”来使用

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义，用id=“”来使用

属性选择器

下面的例子为带有 title 属性的所有元素设置样式：

选择器定义：元素名 [属性 = 属性值]   只要元素使用了该属性，就可设置此样式 。其中元素名、=属性值可不写


响应式 Web 设计


  • RWD 指的是响应式 Web 设计（Responsive Web Design）
    • 

  • RWD 能够以可变尺寸传递网页
    • 

  • RWD 对于平板和移动设备是必需的




创建您自己的响应式设计


方法一：自己来创建它


方法二：使用现成的 CSS 框架——Bootstrap




<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet"

  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>


<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

												


											
HTML学习笔记（三）样式CSS的更多相关文章
	

    
						
  1. angular学习笔记(三十)-指令(2)-restrice,replace,template
		
    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素:  ...
    
		
    2. 
						
  2. angular学习笔记(三十一)-$location(2)
		
    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
    
		
    3. 
						
  3. angular学习笔记(三十)-指令(10)-require和controller
		
    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
    
		
    4. 
						
  4. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
		
    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
    
		
    5. 
						
  5. angular学习笔记(三十)-指令(5)-link
		
    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
    
		
    6. 
						
  6. amazeui学习笔记三（你来我往1）--常见问题FAQs
		
    amazeui学习笔记三(你来我往1)--常见问题FAQs 一.总结 1.DOM事件失败:记得加上初始化代码,例如 图片轮播 $('#my-slider').flexslider(); 2.jquer ...
    
		
    7. 
						
  7. iView学习笔记(三)：表格搜索，过滤及隐藏列操作
		
    iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
    
		
    8. 
						
  8. Oracle学习笔记三 SQL命令
		
    SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)  
    
		
    9. 
						
  9. [Firefly引擎][学习笔记三][已完结]所需模块封装
		
    原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读:        笔记三主要就是各个模块的封装了,这里贴 ...
    
		
    10. 
						
  10. JSP学习笔记(三):简单的Tomcat Web服务器
		
    注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. SAP-ABAP系列 第二篇SAP ABAP开发基础
			
    第二章SAP ABAP开发基础 1.ABAP数据类型及定义 ABAP程序中共包含8种基本数据类型定义, 类型名称 描述 属性 C Character Text (字符类型) 默认长度=1,默认值 =  ...
    
			
    2. 
						
  2. Mvc之Ajax上传图片
			
    MyAjaxForm下载地址,点击此处下载 视图部分: @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Lay ...
    
			
    3. 
						
  3. 【BZOJ1845】[Cqoi2005] 三角形面积并 几何+扫描线
			
    [BZOJ1845][Cqoi2005] 三角形面积并 Description 给出n个三角形,求它们并的面积. Input 第一行为n(N < = 100), 即三角形的个数 以下n行,每行6 ...
    
			
    4. 
						
  4. Sping框架概述
			
    一.什么是spring框架 spring是J2EE应用程序框架,是轻量级的IoC和AOP的容器框架,主要是针对javaBean的生命周期进行管理的轻量级容器,可以单独使用,也可以和Struts框架,i ...
    
			
    5. 
						
  5. 小程序 富文本 的页面展示 json 数据处理   go-echo 为小程序提供feed流服务
			
    go生成页面 返回给web-view {{define "DBHtmlCode"}} <!DOCTYPE html> <html lang="zh-cm ...
    
			
    6. 
						
  6. Use Apache HBase™ when you need random, realtime read/write access to your Big Data.
			
    Apache HBase™ is the Hadoop database, a distributed, scalable, big data store. Use Apache HBase™ whe ...
    
			
    7. 
						
  7. spring boot redis分布式锁 （转）
			
    一. Redis 分布式锁的实现以及存在的问题 锁是针对某个资源,保证其访问的互斥性,在实际使用当中,这个资源一般是一个字符串.使用 Redis 实现锁,主要是将资源放到 Redis 当中,利用其原子 ...
    
			
    8. 
						
  8. 各种数据库(oracle、mysql、sqlserver等)在Spring中数据源的配置和JDBC驱动包----转
			
    在开发基于数据库的应用系统时,需要在项目中进行数据源的配置来为数据 库的操作取得数据库连接.配置不同数据库的数据源的方法大体上都是相同的,不同的只是不同数据库的JDBC驱动类和连接URL以及相应的数据 ...
    
			
    9. 
						
  9. MVC设计模式应用
			
    MVC登录程序清单 1 User JAVABean 用户登录操作类,跟数据库中表的信息对应 2 DatabaseConnection JavaBean 负责数据库的连接和关闭操作 3 IUserDAO ...
    
			
    10. 
						
  10. R in Action(0) 开篇
			
    这几年数据挖掘的火热,也越来越多的人把R作为数据挖掘的一个辅助工具,据国际性组织kkguter统计有60%的人在挖掘过程中用到R工具,可见这个工具是多么的流行,对于数据统计.筛选以及画图绝对是神器.尽 ...
    
			
    11.