一、CSS基本知识

  1. 内联式css样式，直接写在现有的HTML标签中
    1. 内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：

      <p style="color:red">这里文字是红色。</p>

  2. 嵌入式css样式，写在当前的文件中

    1. 　嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：

      <style type="text/css">
      
span{
      
color:red;
      
}
      
</style>

  3. 外部式css样式，写在单独的一个文件中

    1. 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

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

  4. 三种方法的优先级

    1. 记住他们的优先级：内联式 > 嵌入式 > 外部式

二、CSS选择器

  1. 　　每一条css样式声明（定义）由两部分组成，形式如下：

    选择器{
    
    样式;
    
}

  2. 标签选择器

    1. 标签选择器其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>。

    2. 例如下面代码：

      p{font-size:12px;line-height:1.6em;}

      上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。

  3. 类选择器

    1. 类选择器在css样式编码中是最常用到的，如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。

      语法：

      .类选器名称{css样式代码;}
    2. 

      注意：
      

      1、英文圆点开头
      

      2、其中类选器名称可以任意起名（但不要起中文噢）
      3. 

    3. 使用方法：
      

      第一步：使用合适的标签把要修饰的内容标记起来，如下：
      

      <span>胆小如鼠</span>
      

      第二步：使用class="类选择器名称"为标签设置一个类，如下：
      

      <span class="stress">胆小如鼠</span>
      

      第三步：设置类选器css样式，如下：
      

      .stress{color:red;}/*类前面要加入一个英文圆点*/
    4. 

  4. ID选择器
    

    1. 在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：

      1. 　为标签设置id="ID名称"，而不是class="类名称"。
        2. 

      2. 　ID选择符的前面是井号（#）号，而不是英文圆点（.）。
    5. 

  5. 类和ID选择器的区别
    

    1. 相同点：可以应用于任何元素
      2. 

    2. 不同点：
      

      1. ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
        2. 

      2. 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
    6. 

  6. 子选择器
    

    1. 　还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：
      

      .food>li{border:1px solid red;}
      

      这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
    7. 

  7. 包含(后代)选择器
    

    1. 包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
      

      .first  span{color:red;}
    8. 

  8. 通用选择器
    

    1. 通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
      

      * {color:red;}
    9. 

  9. 伪类选择符
    

    1. 　它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
      

      a:hover{color:red;}
    10. 

  10. 分组选择符
    

    1. 　　
      

      当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
      

      h1,span{color:red;}
      

      它相当于下面两行代码：
      

      h1{color:red;}
      
span{color:red;}
												


											
CSS基本知识和选择器的更多相关文章
	

    
								
  1. 前端学习——css基础知识，选择器与html模板、值得收藏的html标签
		
    一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
    
		
    2. 
						
  2. css基本知识、选择器
		
    CSS 是指层叠样式表 (Cascading Style Sheets),基本语法规则如下 CSS 由两个主要的部分构成:选择器,以及一条或多条声明 声明以大括号{ }括起来,一个申明包括属性和值,属 ...
    
		
    3. 
						
  3. HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用
		
    文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块  ...
    
		
    4. 
						
  4. css基础知识之属性选择器
		
    css属性选择器及属性和值选择器如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
    
		
    5. 
						
  5. HTML与CSS基础知识补遗（一）
		
    开始从零基础系统地学习前端知识了,虽说html和css多少了解一些,但是学着还是能发现很多新大陆.... 一. HTML中head标签 1. <meta>标签: meta标签里是一些基础的 ...
    
		
    6. 
						
  6. CSS样式----图文详解：css样式表和选择器
		
    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
    
		
    7. 
						
  7. css基本知识
		
    WANGJUN59451   css基本知识 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HT ...
    
		
    8. 
						
  8. CSS 基本知识
		
    1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的 ...
    
		
    9. 
						
  9. 【CSS】 CSS基础知识 属性和选择
		
    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. UVA340 猜数字游戏
			
    一个经典的找数字位置正确并且找到正确数列中存在的数字而错误的序列存在但是不是正确位置的算法. 看似很难的算法,但是lrj却很简单解决. #include<cstdio> #define M ...
    
			
    2. 
						
  2. 合并excel-MergeExcel
			
    MergeExcel 将需要合并的excel放入该目录下,包含xls和xlsx 点击运行按钮: 输入包含多少列: 等待运行,完毕! 基于python编写,源码和exe于 TTyb
    
			
    3. 
						
  3. Durid(一): 原理架构
			
    Durid是在2013年底开源出来的,当前最新版本0.9.2, 主要解决的是对实时数据以及较近时间的历史数据的多维查询提供高并发(多用户),低延时,高可靠性的问题.对比Druid与其他解决方案,Kyl ...
    
			
    4. 
						
  4. MyEclipse Spring 学习总结二  Bean的生命周期
			
    文件结构可以参考上一节 Bean的生命周期有方法有:init-method,destroy-method ApplicationContext.xml 文件配置如下: <?xml version ...
    
			
    5. 
						
  5. 10 Common Problems Causing Group Policy To Not Apply
			
    10 Common Problems Causing Group Policy To Not Apply Group Policy is a solid tool and is very stable ...
    
			
    6. 
						
  6. 学习SQL的点点滴滴（一）-常用函数
			
    该文章转载自http://www.cnblogs.com/jiajiayuan/archive/2011/06/16/2082488.html 别人的总结,很详细. 以下所有例子均Studnet表为例 ...
    
			
    7. 
						
  7. PHP导出数据到excel的方法
			
    很简单,看内容,不多说了: <?php //设置标题 $header[] = "ID"; $header[] = "订单"; $header[] = &q ...
    
			
    8. 
						
  8. 【AT91SAM3S】建立基于SAM3S库的工程并点亮LED
			
    习惯了ST的库,猛然间看到ATMEL的库,有点无从下手.这几天参考这示例工程,终于建立了一个使用ATMEl库的工程. 软件库版本: 软件平台:MDK470A 硬件平台:英蓓特 EB-SAM3S MCU ...
    
			
    9. 
						
  9. MapReduce、Hbase接口API实践
			
    读取hdfs中文件并做处理,取出卡号,通过卡号连接hbase查询出对应客户号,写入redis,因为不用输出,所以不调用context.write方法,整个操作在一个map中便可完成 protected ...
    
			
    10. 
						
  10. redmine 配置邮件发送为async后，不能发送邮件（转载）
			
    通过参考:http://www.oschina.net/question/2005703_16688 之前configuration.yaml文件中email的相关配置如下: production:  ...
    
			
    11.