一、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. HEX格式数据转换成十六进制字符串
			
    /** * Hex格式数据转换成十六进制字符串 * @param src */ public void bytesToHexString(byte[] by){ StringBuilder strin ...
    
			
    2. 
						
  2. JavaWeb用Jdbc操作MySql数据库(一)
			
    一.添加开发包.在JavaWeb中用jdbc操作数据库,使用方法与java一样,但是在处理开发包的问题上有点差别.JavaWeb不能将mysql-connector-java-5.1.7-bin.ja ...
    
			
    3. 
						
  3. Activity之间数据交流（onActivityResult的用法）
			
    http://www.blogjava.net/mixer-a/archive/2012/03/23/375014.html http://www.cnblogs.com/linjiqin/archi ...
    
			
    4. 
						
  4. CoreException: Could not calculate build plan: Plugin org.apache.maven.plugins:maven-compiler-plugin:3.1 or one of its dependencies could not be resolved
			
    CoreException: Could not calculate build plan: Plugin org.apache.maven.plugins:maven-compiler-plugin ...
    
			
    5. 
						
  5. SQL Server 2012将数据库备份到网络中的共享文件夹
			
    把计算机computer1 中的数据库备份到计算机computer2(IP:192.168.0.130)中的一个共享文件夹下 在computer2中的F盘下建一个共享文件夹叫DBBackupShare ...
    
			
    6. 
						
  6. JSTL标签库中<c:choose></c:choose>不能放JSP页面<!-- -->注释
			
    笔者最近在使用JSTL标签库的<c:choose>标签时候,发现在该标签体中加了JSP的<!-- -->注释时,总是会显示报错信息.错误的信息如下: <span styl ...
    
			
    7. 
						
  7. c# 高效率导出多维表头excel
			
    [DllImport("User32.dll", CharSet = CharSet.Auto)] public static extern int GetWindowThread ...
    
			
    8. 
						
  8. LeetCode Implement pow(x, n).
			
    这个题目我也没有思路,同学们可以查看这个http://www.cnblogs.com/NickyYe/p/4442867.html 下面是我改进后的代码 第一种方法: class Solution { ...
    
			
    9. 
						
  9. （转）MyEclipse自动生成Hibernate实体类, oracle篇
			
    转自http://blog.csdn.net/hejinwei_1987/article/details/9465529 1.打开 windows -> Open Perspective -&g ...
    
			
    10. 
						
  10. C++使用VARIANT实现二维数组的操作
			
    C++使用VARIANT实现二维数组的操作 VARIANT变量是COM组件之间互相通信的重要的参数变量之一,它可以容纳多种不同的类型,如short.long.double等,包括各类指针和数组.组件之 ...
    
			
    11.