一、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. struts2&&Hibernate Demo1
			
    这篇文章和<struts1&&Hibernate Demo1>基本类似,我这里只是拷贝代码了. 最核心的代码:LoginAction.java package action ...
    
			
    2. 
						
  2. Install Slax on USB device  (Slax U 盘安装)
			
    Slax is a modern, portable, small and fast Linux operating system with a modular approach and outsta ...
    
			
    3. 
						
  3. Xamarin.Froms项目中包含的文件
			
    Clearly, the program created by the Xamarin.Forms template is very simple, so this is an excellent o ...
    
			
    4. 
						
  4. （转）原始图像数据和PDF中的图像数据
			
    比较原始图像数据和PDF中的图像数据,结果见表1.1.表1.1中各种“解码器”的解释见本文后续的“PDF支持的图像格式”部分,“PDF中的图像数据”各栏中的数据来自开源的PdfView.如果您有兴趣查 ...
    
			
    5. 
						
  5. C#加密解密(DES,AES,Base64,md5,SHA256,RSA,RC4)
			
    一:异或^简单加解密(数字类型) 1:原理: 异或用于比较两个二进制数的相应位,在执行按位"异或"运算时,如果两个二进制数的相应位都为1或者都为0,则返回0;如果两个二进制数的相应 ...
    
			
    6. 
						
  6. 33. Minimum Depth of Binary Tree  &&  Balanced Binary Tree  &&　Maximum Depth of Binary Tree
			
    Minimum Depth of Binary Tree OJ: https://oj.leetcode.com/problems/minimum-depth-of-binary-tree/ Give ...
    
			
    7. 
						
  7. Android将Activity 打 jar包 （解决资源文件不能打包的问题）
			
    转载地址:http://blog.csdn.net/xiaanming/article/details/9257853 最近有一个需要,我们公司做了一个apk客户端,然后其他的公司可以根据自己的需要来 ...
    
			
    8. 
						
  8. oracle10g配置小记
			
    因对接HIS系统,对方提供了视图.故此我拿起多年不用的ORACLE. 初始安装一切正常,然后打开Net Configuration Assistant配置监听程序. 接着配置 本地NET服务名配置 打 ...
    
			
    9. 
						
  9. javascript立即执行函数 (function(){})()
			
    看到一段代码: (function(){ var outer = $('#subject'); outer.find('li').on('mouseover', mouseover); })() (  ...
    
			
    10. 
						
  10. 【MySQL】InnoDB: Error: checksum mismatch in data file 报错
			
    参考:http://www.jb51.net/article/66951.htm 用5.7版本启动原5.5实例后,再用5.5启动出现以下报错 InnoDB: Error: checksum misma ...
    
			
    11.