首页 > 代码库 > CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

2024-07-11 12:09:37   219人阅读

大家好，我是小强老师， 现在网上的CSS+DIV视频，要么讲的太深，要么太浅，很多初学的同学们总是遇到困难，今天小强老师专门给大家准备了css课程的视频。带你从零基础学习CSS+DIV一直到能独立完成前台网页制作。
小强老师是这样分类的，前几次课，我们将CSS+DIV入门基础，后几天课程我们讲案例制作。
咱们接下来讲的是css基础部分。

高清视频地址如下：

   01  css语法规范：                       http://www.tudou.com/programs/view/8s5hRjO__YA/

   02  css样式表：                           http://www.tudou.com/programs/view/E6Ju8U6hP6s/

   03  css显示模式：                       http://www.tudou.com/programs/view/Ovpu0dAED78/

   04  css类选择器：                        http://www.tudou.com/programs/view/KByJxZuNdn4/

   05  css id选择器和标签选择器：   http://www.tudou.com/programs/view/AEJrWX7_sVM/

   06  css 忆江南 小案例：               http://www.tudou.com/programs/view/cqZXij3n1mk/

   07  css 继承性和层叠性：              http://www.tudou.com/programs/view/5OOAsIsSWFo/

   08  CSS 百度案例：                       http://www.tudou.com/programs/view/B6VaJupOE2s/

下面是笔记部分：

下面是我们今天的目录：
1.2 CSS 初步认识（什么是CSS ，为什么要学）
1.3 CSS 语法规范 （怎么使用CSS）
1.4 CSS的位置分类（CSS到底写在哪里）
1.4.1 行内样式表
1.4.2 内嵌样式表
1.4.3 外部样式表
1.5 网页显示模式
1.5.1 块级显示模式
1.5.2 行内显示模式
1.5.3 行内块显示模式
1.5.4 显示模式之间的相互转换
1.6 Css 选择器（选择符）分类
1.6.1 类选择器
1.6.2 ID选择器
1.6.3 标签选择器
1.7 CSS  层叠性  继承性  优先级
1.7.1 层叠性
1.7.2 继承性
1.7.3 优先级 

1.1CSS 初步认识（什么是CSS ，为什么要学）

web 标准
 
w3c
 结构   xhtml    table  p  hr  br   td    img  a  
 表现   CSS 
CSS 最大的好处  就是让  结构和表现   实现了分离
CSS  就是层叠样式表   
所以我们为什么要学习CSS
注意： 以后的代码标签的属性值，就全部放到 CSS里面了。
<table width=500>
<table>

1.2CSS 语法规范 （怎么使用CSS）

格式： 选择器 {  属性： 值；}
例如： p{color：red；}
解析：
选择器：说到底目的是  选定某个标签用的。（给谁改样式）
几点要求：
1.首先还是采取键值对的格式，但是，属性和值之间用冒号隔开。
2.每个键值对 结束用分号表示。
 
3.键值对都是包含在一对大括号内的。
4.键值对可以有多组。（用分号隔开）
5.font-size:12px;  字体大小用font-size  一般情况下所有数字带单位（px）
0除外  0后面不要跟单位。
怎么使用CSS

1.3CSS的位置分类（CSS到底写在哪里）

1.3.1行内样式表

行内样式表写在标签内部。
格式如下：
<p style=” color:red ;”></p>
小强老师： 这种情况尽量少用。一般适合于很少情况下。或者为了提高权重，因为行内样式表的权重最高。

1.3.2内嵌样式表

内嵌样式表 写在html文件内，放在<head></head> 之间 ，几乎都是贴着</head>上方 
格式如下： 
  <style type=”text/css”>
     p{color:red;}
 </style>
 
例如：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7.      ul{font-size:12px; color:red;}
  8.  div{font-size:14px; color:#03C;}
  9. </style>
  10. </head>
  11.  
  12. <body>
  13. <p>传智播客</p>
  14. <p>传智播客</p>
  15. <p>传智播客</p>
  16. <div>传智播客</div>
  17. <div>传智播客</div>
  18. <ul>传智播客</ul>
  19. <dl>传智播客</dl>
  20. </body>
  21. </html>

 

1.3.3外部样式表

外部样式表写在站点内部。单独新建一个CSS 文件  （css文件的后缀名是.CSS）  
可以通过 链接  或者 导入的方式 进入到 html 页面中。
 
小强老师： 大力提倡的 
 
就是说，我的html文件需要用到外部那个css文件，怎么让它过来：
第一链接方式：
<title>无标题文档</title>
<link rel="stylesheet" href="http://www.mamicode.com/link.css" type="text/css" />
</head>
link这个语句也是放到 </head> 的上方
好处： 
  1. 页面的加载速度快
  2. 可以控制多个页面
  3. 统一修改方便。
第二 导入样式表 （相对较少，不提倡用）
   是把一个CSS 文件 导入的到另外一个CSS 文件中

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>规范</title>
  6. <style type="text/css">
  7.  @import url(link.css);
  8. </style>
  9. </head>
  10.  
  11. <body>
  12. <p>传智播客</p>
  13. <p>传智播客</p>
  14. <p>传智播客</p>
  15. <div>传智播客</div>
  16. <div>传智播客</div>
  17. <ul>传智播客</ul>
  18. <dl>传智播客</dl>
  19.  
  20. </body>
  21. </html>

小强老师： 
 
     1. 行内样式表
       权重最高 但是只能控制一个标签样式
 
     2. 内嵌样式表
 
      权重其次  但是可以控制整个页面 样式
 
     3.外部样式表 （链接式  导入式）
 
       权重最低   但是可控制 整个站点（网站）的文件样式
 

1.4网页显示模式

 不同元素有不同的显示方式

1.4.1 块级显示模式

代表： div  p  li   ul  ol  dl ...
特点: 
  1. 自己单独占一行 （比较霸道） 自上而下 显示  
      2. 可以设置高度和宽度 
 
     
ps： 给盒子指定了 宽 高  背景之后 就可以显示实体 ，我们称之为 实体化。

1.4.2行内显示模式

代表：span   font   b  i  em  a ....
特点：
1. 一行内显示。自左往右显示。
2. 不能设置宽和高。
 

1.4.3 行内块显示模式

没有标签是这种显示模式。
先空着
给标签使用 : display:inline-block; 转换成行内块显示模式。
特点：既有行内 一行内显示  又有 块级的宽和高。

1.4.4
显示模式之间的相互转换

块级显示模式可以转换成行内显示模式：  display 显示
  display: inline;
 
 
转换后：
 
行内显示模式转化为 块级显示元素：  dispaly:block;
 
 
 

1.5 Css 选择器（选择符）分类

 
css  基础选择器
 
css  复合选择器
 
先看基础选择器：

1.5.1 类选择器

以“点”   .  来定义   
用 class      来引用
 
 
 
注意：
1.必须以 点 开头  不能省略。
2.后面类的名字 不要用 标签名 不要以数字开头  更不能纯数字。
3.上面定义，下面使用， class=”类名”  class=”lan”
 
font-weight:bold  css 字体加粗   bold  =  700   等价
 

1.5.2
ID选择器

以 # 来定义 
用 id 来引用

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. #zuihou{color:#F00;}
  8. </style>
  9. </head>
  10.  
  11. <body>
  12. <div>传智播客</div>
  13. <h1>传智播客</h1>
  14. <div>传智播客</div>
  15. <p>传智播客</p>
  16. <div>传智播客</div>
  17. <div id="zuihou">传智播客</div>
  18. </body>
  19. </html>

 
重点： 类选择器和id选择器的区别
 1. class  选择器   =    小强老师 （姓名）
  多次使用  没有限制
 
2.id 选择器  =  小强老师  ( 身份证 )
用且仅用一次  唯一的
 
id 要比 class 执行速度快很多  

1.5.3标签选择器 

 
 
注意：CSS写法
text-align:center   文本居中对齐
text-indent:2em;  首行缩进2个字 
em 是一个相对单位  1em 就是一个字的距离
line-height: 25px;  行高 
letter-spacing:1px  字间距 

1.6
 CSS  层叠性  继承性  优先级

1.6.1 层叠性

CSS  层叠样式表    
 
层叠性： 就是后面的标签样式会覆盖原先标签样式。（后来居上）
远亲不如近邻  优先执行最近的标签样式
青出于蓝而胜于蓝 

1.6.2 继承性

龙生龙  凤生风  老鼠生的孩子会打洞
子级标签会大部分继承父级标签的样式。（一般文字元素的样式都会继承）

1.6.3优先级

外部样式表 <  内嵌样式表  <  行内样式表
 
标签选择器<  类选择器  <  id 选择器 <  行内样式表
2
    1          10           100          1000
 
class 里面可以放多个类名：
  格式是： class=”类名1   类名2”
版权之类的符号： 必须用font-family:Arial； 特殊声明 
 
倾斜 em  改成正常字体 ： font-style:normal
加粗 strong 改成正常字体    font-weight：normal；

 

小强老师最通俗易懂的CSS+DIV入门学习视频，学习完毕绝对

有收获。本课程针对的主要是网页特效哦。如果你喜欢，就请分

享给其他人，让更多的人加入网页设计天地哦。视频素材请到：

http://www.xiaoqiang001.com 小强零零壹 下载


联系
我们