一、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. C++宽窄字符串转换
			
    首先,贴出我给出的解决方案: http://files.cnblogs.com/xuejianhui/utils.rar   再则,贴出网上最常见的例子: #include <string> ...
    
			
    2. 
						
  2. 037. asp.netWeb用户控件之五使用用户控件实现文件上传功能
			
    fileUpload.ascx代码: <%@ Control Language="C#" AutoEventWireup="true" CodeFile= ...
    
			
    3. 
						
  3. 二、Spring——AoP
			
    AOP概述 AOP是OOP的有益补充,他为程序开发提供了一个崭新的思考角度,可以将重复性的横切逻辑抽取到统一的模块中,通过OOP的纵向抽象和AOP的横向抽取,程序才能真正解决复杂性代码问题. Spri ...
    
			
    4. 
						
  4. Eplan PPE Pro-panel Electric fluid P8 2.4图文安装教程
			
    Eplan ppe pro-panel electric fluid P8等多个最新2.4中文版本的安装,都是使用相同的虚拟驱动MultiKey,还是只有win32位的安装包,不过支持64位操作系统的 ...
    
			
    5. 
						
  5. 浏览器收藏夹插件-Xmarks
			
    Xmarks 一一 一款简约实用的浏览器书签同步插件 首先还是想吐槽一下firefox的收藏夹同步功能,感觉不实用,密钥的长度如果不是存到手机或者别的终端,压根没办法实现同步. 而且还区分了,如果两台 ...
    
			
    6. 
						
  6. 升级NC6.3
			
    2014-04-23 江苏建工&用友公司会谈提纲 1,合同规定江苏建工用友NC在实施成功之后三年免服务费(2010年增补了资金管理,如果以2010年作为软件最终实施完成,那么2010-2013 ...
    
			
    7. 
						
  7. Eclipse插件SVN配置
			
    Eclipse插件SVN配置 方法一 打开Eclipse点击[Help]-[Install New Software] 点击右边[Add]-在弹出窗口中输入 Name:svn Location:htt ...
    
			
    8. 
						
  8. Navicat(服务器对象) -2之MySQL 或 MariaDB 对象
			
    MySQL 或 MariaDB 对象 http://www.navicat.com.cn/manual/online_manual/cn/navicat/win_manual/index.html 要 ...
    
			
    9. 
						
  9. NserviceBus+rabbitmq
			
    Ok so I figured this out after looking a bit at the code and the requirements for amqp URI and it sh ...
    
			
    10. 
						
  10. html 定位问题
			
    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...
    
			
    11.