一 、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. 创建javaScript 对象

    创建新实例person 并向其添加四个属性: person=new Object(); person.firstname="Bill"; person.lastname=" ...

  2. UESTC 982质因子分解

    读入一个自然数,将nn分解为质因子连乘的形式输出. Input 有多组测试数据.输入的第一行是整数TT(0<T≤10000),表示测试数据的组数.每一组测试数据只有一行,包含待分解的自然数nn. ...

  3. YTU 1075: Time

    1075: Time 时间限制: 1 Sec  内存限制: 128 MB 提交: 7  解决: 7 [提交][状态][讨论版] 题目描述 Digital clock use 4 digits to e ...

  4. Error: Target id 'android-5' is not valid. Use 'android list targets' to get the target ids.

    输入命令: lianxumacdeMac-mini-2:hello-jni lianxumac$ android list targets Available Android targets: --- ...

  5. Linux IO多路复用之epoll网络编程(含源码)

    前言 本章节是用基本的Linux基本函数加上epoll调用编写一个完整的服务器和客户端例子,可在Linux上运行,客户端和服务端的功能如下: 客户端从标准输入读入一行,发送到服务端 服务端从网络读取一 ...

  6. Java-Runoob-高级教程-实例-字符串：14. Java 实例 - 连接字符串

    ylbtech-Java-Runoob-高级教程-实例-字符串:14. Java 实例 - 连接字符串 1.返回顶部 1. Java 实例 - 连接字符串  Java 实例 以下实例演示了通过 &qu ...

  7. asp.net mvc 多字段排序

    以下代码可实现多字段排序,通过点击列标题,实现排序. 控制器: public ActionResult Index(string sortOrder) { ViewBag.FirstNameSortP ...

  8. 让padding不影响容器总长度

    增加CSS属性: box-sizing:border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;

  9. HO引擎近况20160710

    这次没有忘记,其实也忘了,只不过刚好碰上我换浏览器,正好想起来这事! 我把用了很长一段时间的chrome浏览器换成搜狗浏览器了,好多网站原先记住的用户名和密码都没有了我还需要重新输入! 今天再放一段美 ...

  10. bzoj 3206: [Apio2013]道路费用【最小生成树+并查集】

    参考:http://hzwer.com/6888.html 把k条道路权值设为0,和其他边一起跑MST,然后把此时选中的其他边设为必选,在新图中加上必选变缩成k个点,把所有边重标号,枚举k跳边的选取情 ...