一、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. Android——使用SQLiteDatabase操作SQLite数据库
			
    除了可以使用文件或SharedPreferences存储数据,还可以选择使用SQLite数据库存储数据. 在Android平台上,集成了一个嵌入式关系型数据库-SQLite,SQLite3支持 NUL ...
    
			
    2. 
						
  2. Spring源码学习之：@async  方法上添加该注解实现异步调用的原理
			
    在我们使用spring框架的过程中,在很多时候我们会使用@async注解来异步执行某一些方法,提高系统的执行效率.今天我们来探讨下 spring 是如何完成这个功能的.    spring 在扫描be ...
    
			
    3. 
						
  3. 桥接模式（Bridge）
			
    桥接模式(Bridge),将抽象部分与它的实现部分分离,使它们都可以独立地变化.Bridge 模式把角色之间的继承关系改为了耦合的关系,从而使这两者可以从容自若的各自独立的变化: 在以下的情况下应当使 ...
    
			
    4. 
						
  4. CentOS中Device eth0 does not seem to be present错误解决办法
			
    今天克隆的虚拟机,当需要多台虚拟机的时候,试用克隆真是方便,不过遇到了 Device eth0 does not seem to be present 的问题,在网上找到遇到同样问题的解决方法, 很顺 ...
    
			
    5. 
						
  5. 如何创建 CSS
			
    如何插入样式表 当读到一个样式表时,浏览器会根据它来格式化 HTML 文档.插入样式表的方法有三种: 外部样式表 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以 ...
    
			
    6. 
						
  6. web页面打开本地app（判断是否安装）
			
    在应用宝中有APP申请链接: //是否可以打开App不可以跳则到下载页 $(".downNow button").on("click",function(){  ...
    
			
    7. 
						
  7. Blackfin DSP(八)：BF533的DMA
			
    #include <cdefBF533.h> #include <sys\exception.h> #define POLC 0x00004000 #define PORT_C ...
    
			
    8. 
						
  8. Archlinux添加MP3播放器
			
    方法1: # pacman -S mplayer From: http://www.linuxdiyf.com/viewarticle.php?id=89207 用mplayer循环播放音乐:mpla ...
    
			
    9. 
						
  9. Tomcat8.0.21登录时忘记用户名和密码
			
    大概是这学期开学没多久吧,4月份的时候,为了学习javaEE,装了Tomcat.过了这么久早就忘记用户名和密码了,所以无法进入Tomcat的管理界面.百度(其实我也很想用google)了一堆,几乎都是 ...
    
			
    10. 
						
  10. android Tab 类型切换界面
			
    实现方案:viewpager + fragment + FragmentPagerAdapter 效果图: 可以左右滑动切换选项卡,或者点击: 如果想使用fragment的时候又想可以左右滑动,就可以 ...
    
			
    11.