使用级联样式表的好处在于_第三章 样式表基础

内容回顾

• 表格的基本标签
• 表格的常用属性
• 表单的常用标签

本章内容

• CSS的基本语法
• 选择器的使用
• 常用的CSS样式
• 定义CSS样式表的三种方式

第一节 使用CSS

1.什么是CSS

CSS(Cascading Style Sheet),称为层叠样式表，也叫级联样式表。用于针对HTML标签元素进行样式修饰，并且能实现HTML内容和样式分离的标签化语言。

2.为什么要使用CSS

CSS有如下好处:

• 普通的HTML内容样式单一，不太美观，通过CSS可以进行样式修饰，让内容变得美观
• CSS可以实现内容和样式的分离，保证整个站点具有统一的样式，而且便于样式的切换
• CSS因为实现了内容和样式的分离，所以在项目开发的时候，方便团队合作。（程序员写内容，美工做样式）

3.如何使用CSS

• 使用CSS样式，需要在页面中嵌套 ... ...

4.基本选择器

选择器: 用于选择页面中对应的HTML元素,使这些元素应用选择器定义的样式规则，实现不同的样式效果

4.1标签选择器

使用HTML标签作为选择器来定义CSS样式，那么页面中和选择器匹配的HTML元素，会自动应用选择器中定义的样式进行内容的修饰。

语法:

HTML标签名
{
    样式属性1:属性值;
    ...
}


 
  
  
 
​
 
  这是我的XXX
  
这是H1标题
  
这是H2标题
  
这是H3标题
  
这是一个段落
  这是超链接
  
这是一个DIV1
  
这是一个DIV2
 
  这是一个SPAN1
  这是一个SPAN2
  

  红蓝绿紫色黄
 

​

4.2 类选择器

如果页面中的多个HTML元素，需要使用一类样式，此时我们可以使用类选择器来定义CSS样式。

类样式的定义:

.类名
{
    样式属性:属性值;
    ...
}

类样式的引用:

语法说明:类样式需要先定义再使用，类名可以使用字母，数字，下划线或中划线构成，类名前要加.

在引用类样式的时候，需要在标签中通过class属性来引用，应用类样式时，前面不能加.

 
  
  
 
​
 
    
晚桃花
    
作者：白居易
    
一树红桃亚拂池，竹遮松荫晚开时。
    
非因斜日无由见，不是闲人岂得知。
    
寒地生材遗校易，贫家养女嫁常迟。
    
春深欲落谁怜惜，白侍郎来折一枝。
​
 

​

4.3 id选择器

id选择器和类选择器的定义方式和使用方式类似。id选择器的定义要在id名前加#，在引用id选择器定义的样式时，HTML标签需要使用id属性来引用id名，以此使用id样式。

语法:

使用id选择器定义id样式

#id名
{
    样式属性:属性值;
    ...
}

在页面中引用id样式

语法说明:定义id样式时，要使用#开始, 使用id样式时，标签中要使用id属性来引用id样式。

id样式和类样式的区别，在标签中的id属性，在整个页面中必须是唯一值。一般用id定义页面的框架结构。

 
  
  
 
​
 
  
  

  
  

  
  

 

​

5. 通用选择器

如果想要页面中的所有元素使用同一种样式，可以选择通用选择器。

语法:

*
{
    样式属性:属性值;
    ...
}



 
  
  
 
​
 
  
这是H1标题
  
这是H2标题
  
这是H3标题
  
这是一个段落
  这是超链接
  
这是一个DIV1
  
这是一个DIV2
 
  这是一个SPAN1
  这是一个SPAN2
  

  红蓝绿紫色黄
 

​

6 选择器的组合使用

• 后代选择器
  使用空格表示后代选择器
  选择器1 选择器2
  {
  样式属性:属性值;
  ...
  }
• 子级选择器
  使用>表示子级选择器
  选择器1>选择器2
  {
  样式属性:属性值;
  ...
  }
  
  
  
  
  
  
  ​
  
  这是Body下的B
  
  
  这是DIV中的B元素
  
  这是DIV中的SPAN元素
  这是SPAN中的B元素
  
  
  
  

  ---

  
  
  
  这是DIV中的B元素
  
  这是DIV中的SPAN元素
  这是SPAN中的B元素
  
  
  
  
  
  ​

• 交集选择器
  语法:
  标签选择器.类选择器
  {
  属性:属性值;
  ...
  }
• 并集选择器(组合选择器)
  语法:
  标签选择器,.类选择器,id选择器,标签选择器
  {
  属性:属性值;
  ...
  }
  
  
  
  
  
  
  ​
  
  

  交集选择器，并集选择器测试

  
  
  这是DIV1
  
  
  这是DIV2
  
  
  这是DIV3
  
  

  这是P1

  
  

  这是P2

  
  

  这是P3

  
  
  
  ​

7.选择器权重

选择器权重: 1.同类选择器遵循就近原则 2.标签选择器权重 1 类选择器权重 10 id选择器权重 100

3.当使用了多个选择器时，选择器的权重可以进行累加

 
  
  
 
​
 
  
这是一个段落
 

​

第二节常用样式

1.文本样式

样式属性说明font-size字体大小,px(1/96英寸),pt(1/72英寸)font-family字体类型:宋体，隶书，黑体，幼圆font-weight字体粗细:bold,400,800,1200font-style字体样式:italiccolor文本颜色text-align字体水平对齐方式:left（左边）,right(右边),center(居中)text-indent文本缩进:2em （2个字的宽度）

 
  
  
 
​
 
  
通知
  

    下午3点有会,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下,会议具体内容如下。
  
  
QY106宣布
  
2019-07-22
 

​

2.超链接样式

样式属性说明a:link伪类样式，针对超链接默认情况的样式a:visited伪类样式，指超链接点击过之后的样式a:hover伪类样式，鼠标悬浮在元素上方时触发。不局限与a标签使用，其他标签也可以使用a:active伪类样式, 点击超链接时触发的样式text-decoration设置文本下划线样式:underline(下划线),overline(上划线),line-through(删除线),none(没有线)

 
  
  
 
​
 
  菜单1
  菜单2
  菜单3
  菜单4
  菜单5
  

  

    这是div的内容
    
这是P的内容
    
这是H3的内容
  
 

​

3.背景样式

属性:

1. background-color背景颜色
2. background-image背景图片
3. background-repeat背景图片的平铺方式:repeat(铺满容器),no-repeat(不平铺),repeat-x(水平方向平铺),repeat-y(垂直方向平铺)
4. background-position在图片不平铺的情况下，设置背景图片的位置:水平位置 垂直位置。长度，百分比，位置关键字background复合属性，一次性设置四个背景样式: 颜色 图片 平铺方式 位置

 
  
  
 
 
​
 

 
  
  
 
​
 
  

    
精美台历
  
 

 
  
  
 
​
 
  

    清华大学（Tsinghua University），简称“清华”，由中华人民共和国教育部直属，中央直管副部级建制，位列“211工程”、“985工程”、“世界一流大学和一流学科”，入选“基础学科拔尖学生培养试验计划”、“高等学校创新能力提升计划”、“高等学校学科创新引智计划”，为九校联盟、中国大学校长联谊会、亚洲大学联盟、环太平洋大学联盟、清华—剑桥—MIT低碳大学联盟成员，被誉为“红色工程师的摇篮”。简称“清华”，由中华人民共和国教育部直属，中央直管副部级建制，位列“211工程”、“985工程”、“世界一流大学和一流学科”，入选“基础学科拔尖学生培养试验计划”、“高等学校创新能力提升计划”、“高等学校学科创新引智计划”，为九校联盟、中国大学校长联谊会、亚洲大学联盟、环太平洋大学联盟、清华—剑桥—MIT低碳大学联盟成员，被誉为“红色工程师的摇篮”简称“清华”，由中华人民共和国教育部直属，中央直管副部级建制，位列“211工程”、“985工程”、“世界一流大学和一流学科”，入选“基础学科拔尖学生培养试验计划”、“高等学校创新能力提升计划”、“高等学校学科创新引智计划”，为九校联盟、中国大学校长联谊会、亚洲大学联盟、环太平洋大学联盟、清华—剑桥—MIT低碳大学联盟成员，被誉为“红色工程师的摇篮”简称“清华”，由中华人民共和国教育部直属，中央直管副部级建制，位列“211工程”、“985工程”、“世界一流大学和一流学科”，入选“基础学科拔尖学生培养试验计划”、“高等学校创新能力提升计划”、“高等学校学科创新引智计划”，为九校联盟、中国大学校长联谊会、亚洲大学联盟、环太平洋大学联盟、清华—剑桥—MIT低碳大学联盟成员，被誉为“红色工程师的摇篮”
  
  
为九校联盟、中国大学校长联谊会、亚洲大学联盟、环太平洋大学联盟
  
为九校联盟、中国大学校长联谊会、亚洲大学联盟、环太平洋大学联盟
  
为九校联盟、中国大学校长联谊会、亚洲大学联盟、环太平洋大学联盟
  
为九校联盟、中国大学校长联谊会、亚洲大学联盟、环太平洋大学联盟
  
为九校联盟、中国大学校长联谊会、亚洲大学联盟、环太平洋大学联盟
  
为九校联盟、中国大学校长联谊会、亚洲大学联盟、环太平洋大学联盟
  
为九校联盟、中国大学校长联谊会、亚洲大学联盟、环太平洋大学联盟
  
为九校联盟、中国大学校长联谊会、亚洲大学联盟、环太平洋大学联盟
  
为九校联盟、中国大学校长联谊会、亚洲大学联盟、环太平洋大学联盟
  
为九校联盟、中国大学校长联谊会、亚洲大学联盟、环太平洋大学联盟
 

​

第三节 样式表的定义方式

1. 内部样式表

在head标签中定义样式

    
        
        
    
    
        ....
    

2.外部样式表

定义外部的样式文件:

/*test.css*/
#d1
{
    font-size:50px;
    color:red;
    background-color:blue;
}

在html中引用外部样式表

 
  
  
  
 
​
 
  
这是一个div
 

​

3.行内样式表

通过标签的style属性设置样式

  
这是一个div

作业

作业1

作业2

作业3