CSS层叠样式表

1、什么是结构和表现分离?

在页面中,使用html搭建页面的结构(页面的内容),不使用标签的属性设置样式,标签的样式全部在CSS中设置。

2、什么是CSS?

CSS是层叠样式表(Cascading Style Sheet)的简称
目前CSS3是新版本的CSS,与老版本(CSS2.1)相比在性能和成本上有大的提升。

3、如何使用CSS?

3.1、页面嵌入式:

页面嵌入式就是使用标签嵌入CSS规则


代码展示




    
    
    
    Document



    

你好

效果展示
CSS层叠样式表_第1张图片

3.2、行内嵌入式

给标签添加style属性,此效果只对嵌入标签有效。如:

你好

3.3、链接式

先建立独立的CSS文件。然后在页面中使用标签链接外部的CSS文件,通常建议使用这种嵌入方式。

代码展示

p{
    color: blue;
    font-size: 30px;
}
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="./demo.css">
head>
<body>
    <p>你好p>
body>
html>

效果展示
CSS层叠样式表_第2张图片

4、CSS的选择器

4.1、标签名选择器

  标签名{
			   
			   属性名:值;
			 }

4.2、id选择器

给标签设置id属性,通过id属性值选择标签。标签的id属性值和之前提到的一样不能重复。

#id{
   属性名:值;
   }

4.3、类选择器

给标签设置class属性,通过class属性选择标签,class属性名可以重复。

.class属性值{
			    属性名:值;
				
			 }

4.4、通配符选择器

通配符(*),可以匹配页面中的任何元素

*{
  属性名:值;
}

5、文本样式属性

5.1、字体样式:

字体样式 作用
font-size 设置字号(文字的大小)
font-family 设置字体(前提是本地装有相应字体
font-style 字体的样式
font-weight 字体的粗细(数值从100-900,数值越大字体越粗)
@font-face 当本地并无相应字体时,可设置服务端字型(该属性是CSS3新增的样式属性)

5.2、文本样式

文本样式 作用
color 定义文本颜色(颜色表示方式和之前博客提到一样)
letter-spacing 设置字符之间的间距
word-spacing 该属性用于英文单词之间的间距,对中文无效
line-height 设置行高
text-algin 设置内容的对齐方式
text-transform 控制英文大小写
text-decoration 设置文本的下划线、上划线、删除线
text-indent 设置首行文本的缩进
text-shadow 设置文本的阴影效果
text-overflow 文本的溢出效果(结合overflow属性使用)
word-wrap 设置长单词和URL地址的自动换行

6、属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

属性选择器 作用
E[att] 选择具有att属性的元素
E[att=“val”] 选择具有att属性,并且att属性值等于val的元素
E[att~=“val”] 选择具有att属性,并且att属性值是用空格隔开的单词,其中一个单词等于val
E[att^=“val”] 选择具有att属性,并且att属性值是以val开头的字符串
E[att$=“val”] 选择具有att属性,并且att属性值是以val结尾的字符串
E[att*=“val”] 选择具有att属性,并且att属性值中包含val的字符串

代码演示

7、关系选择器

关系选择器 作用
包含选择器(E F) 选择所有被E包含的F元素
子元素选择器(E>F) 选择所有作为E元素的子元素F
相邻元素选择器(E+F) 选择紧贴在E元素之后F元素
兄弟选择器(E~F) 选择E元素后面的所有兄弟元素F

代码演示




    
    
    
    关系选择器



    
  • 西游记
  • 水浒传
  • 红楼梦
  • 三国演义

统计学

效果展示
CSS层叠样式表_第3张图片

8、结构化的伪类选择器(伪类选择器带冒号)

结构化的伪类选择器 作用
html:root 根元素选择器。html文档中的根只有一个。样式应用于页面的每个元素
E:not(选择器) 不包含给定选择器的元素
E:only-child 匹配父元素仅有的一个子元素E
E:first-child 匹配父元素的第一个子元素E
E:last-child 匹配父元素的最后一个子元素E
E:nth-child(n) 匹配父元素中第(n)个子元素E
E:nth-last-child(n) 匹配父元素中倒数第(n)个子元素E
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
E:empty 匹配没有任何子元素的元素E
E:checked 匹配用户界面上处于选中状态的元素E
E:enabled 匹配用户界面上处于可用状态的元素E
E:disabled 匹配用户界面上处于禁用状态的元素E

代码演示

9、伪对象选择器

伪对象选择器 作用
E::before(CSS3) 设置在对象前(依据对象树的逻辑结构)插入的内容。必须和content属性一起使用
E::after(CSS3) 设置在对象后(依据对象树的逻辑结构)插入的内容。必须和content属性一起使用

代码演示




    
    
    
    伪对象选择器



    

City

Manchester

效果展示
CSS层叠样式表_第4张图片

10、超链接的伪类选择器

超链接的伪类选择器 作用
E:link 设置超链接a在未被访问前的样式。
E:visited 设置超链接a在被访问后的样式
E:hover 设置元素在其鼠标悬停时的样式
E:active 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

代码演示




    
    
    
    超链接的伪类选择器



    "#">百度


效果展示

CSS层叠样式表_第5张图片

鼠标悬停时的样式

CSS层叠样式表_第6张图片

鼠标在点击的一瞬间的样式

CSS层叠样式表_第7张图片

链接访问后的样式

你可能感兴趣的:(html5,css3)