一 、CSS

层叠样式表，为了使网页元素的样式更加丰富，内容与样式拆分开来。
HTML负责结构与内容，表现形式交给CSS。

CSS注释
/**/ 来注释

二、CSS基本语法与引用

CSS的语法结构

选择器{属性:值; 属性:值;}
选择器：将样式与页面元素关联起来的名称。

<style>
div{
width:200px;
height:200px;
background-color:yellow;
}
</style>
1
2
3
4
5
6
7
CSS 引用

1 外链式

通过link标签，链接到相应的CSS文件，写在head标签中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<!--外链式，通过link标签引入css文件，head标签中引入-->
<link rel="stylesheet" href="Day3.css">
</head>
<body>
<div></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
Day3.css 内容如下：

div{
width:200px;
height:200px;
background-color:red;
}
1
2
3
4
5
2 嵌入式

嵌入式是通过 style标签来写CSS ，也要写在head标签中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<!--2 嵌入式是通过 style标签来写CSS ，也要写在head标签中-->
<style>
div{
width:200px;
height:200px;
background-color:yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
3 内链式

内链式，同样使用Style属性来设置CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
</head>
<body>
<!--3 内链式，同Style属性来设置CSS样式-->
<div style="width:200px; height:200px; background-color:black"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
在CSS的三种使用方式中存在优先级的问题,页面从上到下加载，离元素越近相应的优先级越高。

三、CSS选择器

1标签选择器

标签选择器，通过标签来设置元素样式 影响范围最大。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的三种基本选择器</title>
<style>
/*标签选择器，通过标签来设置元素样式 影响范围最大*/
div{
width:100px;
height:100px;
background-color:green;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2 类选择器

类选择器，通过class类名来设置元素的样式,class是可以重名的，影响范围可控制相对较小，
一个类可应用于多个选择器，一个元素可以使用多个类。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的三种基本选择器</title>
<style>
/*类选择器，通过class类名来设置元素的样式,class是可以重名的，影响范围可控制，相对较小*/
.item1{
width:200px;
height:200px;
background-color:red;
}
.item2{
width:300px;
height:300px;
background-color:black;
}
</style>
</head>
<body>
<div class="item1"></div>
<div class="item2"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
3 id选择器

通过id选择元素，元素的id的值不可以重复
#id选择器，通过id属性值来设定元素的样式,影响范围最小
id在html中具有唯一性，不能重名，JS中获取会有问题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的三种基本选择器</title>
<style>
/*标签选择器，通过标签来设置元素样式 影响范围最大*/
div{
width:100px;
height:100px;
background-color:green;
}

/* .类选择器，通过class类名来设置元素的样式,class是可以重名的，影响范围可控制，相对较小*/
.item1{
width:200px;
height:200px;
background-color:red;
}
.item2{
width:300px;
height:300px;
background-color:black;
}
/* #id选择器，通过id属性值来设定元素的样式,影响范围最小*/
/* id在html中具有唯一性，不能重名，JS中获取会有问题*/
#box1{
width:400px;
height:400px;
background-color:blue;
}
#box2{
width:500px;
height:500px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="item1"></div>
<div class="item2"></div>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
三种选择器的优先级

影响范围越大优先级越小，即：
id>class>元素选择器
推荐使用class选择器

4层级选择器

通过父级元素来设置子集元素，设置子元素的子集样式
还可以设置子元素的自己的样式，可以与多个选择器混合使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style>
/*通过父级元素来设置子集元素，设置子元素的子集样式*/
/*还可以设置子元素的自己的样式，可以与多个选择器混合使用*/
.wrap{
width:400px;
height:400px;
background-color:blue;
}
.wrap div{
width:200px;
height:200px;
background-color:red;
}
.wrap .in{
width:200px;
height:200px;
background-color:black;
}
</style>
</head>
<body>
<div class="wrap">
<div class="in"></div>
<div></div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
5组选择器，并列选择器

要求以下元素的宽度与高度均为200px，box1的背景色为红，box2为绿色，box3为蓝色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并列选择器</title>
<style>
.box1,.box2,.box3{
width:200px;
height:200px;
}
.box1{
background-color:red;
}
.box2{
background-color:green;
}
.box3{
background-color:blue;
}
</style>
</head>
<body>
<!--要求以下元素的宽度与高度均为200px，box1的背景色为红，box2为绿色，box3为蓝色-->
<div class="box1"></div>
<p class="box2"></p>
<div class="box3"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
6伪类，伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*hover设置鼠标悬停在元素上时候的状态*/
.box{
width:400px;
height:400px;
background-color:blue;
}
.box:hover{
/*鼠标悬停之后的样式*/
width:500px;
height:500px;
background-color:red;
}
/*after 元素的尾部插入内容*/
.box:after{
content:" me";
}
/*before 元素的头部插入内容*/
.box:before{
content:"Do U ";
}
</style>
</head>
<body>
<div class="box">love</div>
</body>
</html>

Day3 CSS 引入及基本选择器的更多相关文章

  1. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  2. CSS基础-引入方法，选择器，继承

    一.CSS引入方法:行内式.嵌入式.导入式.链接式. 1.行内式. 即:在标签的style属性中设定CSS样式. 例子:<div style="行内式</div> 2.嵌入 ...

  3. css-1,css的三种引入方式 基本选择器

    <!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...

  4. 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

    前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介    叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...

  5. HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  6. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  7. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  8. css格式比较及选择器类型总结

    在前端入门的前三天把网页制作过程中常用的一些标签和属性都认识和练习了一遍,能够做出简单模块的框架.就像老师说的网页制作就像建一栋大楼,html是砖和水泥,css是精装,js是完善各个功能.现在就开始进 ...

  9. link标签和css引入方式

    link常见用途 <link> 标签最常见的用途是链接样式表,在 HTML 中,<link> 标签没有结束标签,此元素只能存在于 head 部分,不过它可出现任何次数. < ...

随机推荐

  1. JDK安装以及配置环境变量的步骤

    ---恢复内容开始--- 一.JDK安装 JDK下载链接:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads ...

  2. bzoj4593: [Shoi2015]聚变反应炉

    这道题的难点其实是在设DP方程,见过就应该会了 令f0,i表示先激发i的父亲,再激发i,把i的整棵子树都激发的最小费用 f1,i表示先激发i,再激发i的父亲,把i的整棵子树都激发的最小费用 设x,y为 ...

  3. YTU 2801: 用数字造数字(II)

    2801: 用数字造数字(II) 时间限制: 1 Sec  内存限制: 128 MB 提交: 244  解决: 168 题目描述 输入一个3位以上的整数,求其中最大的两个数字之和与最小的数字之和之间的 ...

  4. DOM方式解析xml实例2

    老样子,javabean实体类: import java.io.*; public class Book implements Serializable { private int id; priva ...

  5. Pessimistic Offline Lock悲观离线锁

    每次只允许一个业务事务来访问数据,以防止并发业务事务中的冲突. 离线并发处理通常会出现多个业务事务操作同一数据. 最简单的办法是为整个业务事务保持一个系统事务.但是事务系统不适合于处理长事务. 首选乐 ...

  6. 使用VirtualBox虚拟机搭建局域网

    参考资料: http://www.awaimai.com/995.html https://my.oschina.net/cofecafe1/blog/206535 最近公司局域网网络改造,在改造前已 ...

  7. (转)Silverlight_5_Toolkit_December_2011 安装后点击Toolkit Samples没反应的解决方法

    Silverlight Toolkit官方下载地址: http://silverlight.codeplex.com/ http://blog.csdn.net/hcj116/article/deta ...

  8. ubuntu 怎么格式化U盘？（转载）

    转自:http://3168247.blog.51cto.com/3158247/605654 图形的话装一个gparted,找那个/dev/sdb,右击选择格式化,最后点“应用”.命令行:原则是先卸 ...

  9. FOJ2252:Yu-Gi-Oh!

    传送门 题意 略 分析 枚举合成ab的数量,在此基础上合成bc和ac,复杂度\(O(n)\) trick 代码 #include<cstdio> #include<algorithm ...

  10. bzoj 1632: [Usaco2007 Feb]Lilypad Pond【bfs】

    直接bfs,在过程中更新方案数即可 #include<iostream> #include<cstdio> #include<queue> using namesp ...