一 、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. Ubuntu 16.04安装JDK/JRE并配置环境变量【转】

    本文转载自:http://www.linuxdiyf.com/linux/30302.html 作为一个Linux新手,在写这篇文章之前,安装了几次jdk,好多次都是环境变量配置错误,导致无法登录系统 ...

  2. hihocoder 第二十五周 spfa 最短路

    其实hihocoder里的题目目前大都是模板题啊-.- 这周的是SPFA,暑假的时候有看过SPFA,不过一直用的都是Dijkstra,感觉spfa要更加简洁一点~~,今天找了一份之前一直都看不太懂所以 ...

  3. I.MX6 Battery issues

    /******************************************************************** * I.MX6 Battery issues * 说明: * ...

  4. 后缀数组 hash求LCP BZOJ 4310: 跳蚤

    后缀数组的题博客里没放进去过..所以挖了一题写写 充实下博客 顺便留作板子.. 一个字符串S中 内容不同的子串 有 sigma{n-sa[i]+1-h[i]}   (噢 这里的h[]就是大家熟知的he ...

  5. 网络抓包工具wireshark and tcpdump 及其实现基于的libpcap

    最近无意中看到博客园中一篇介绍wireshark的文章,写得不错,它简单清楚介绍了wireshark的使用 简介 wireshark以前叫做Ethereal, 在大学时候的网络课程中就常看到它,它是世 ...

  6. 返回一个集合对象，同时这个集合的对象的属性又是一个集合对象的处理方法（ViewModel）

    如果遇到需要返回一个集合对象,其中该集合中的属性又是一个集合.第一种:可在考虑用外键关联,比如在控制器中可以采用预先加载的方式加载关联的数据,比如 RoleManager.Roles.Include& ...

  7. vue中使用element写点击input内部标签(使用模态框传值)

    首先附上源码地址 https://files.cnblogs.com/files/maruihua/vue-tagsinput-master.zip 这个是我修改后的代码.取消了部分功能,添加的一些功 ...

  8. [Usaco2017 Open]Modern Art 2

    Description Having become bored with standard 2-dimensional artwork (and also frustrated at others c ...

  9. ORA-00020: maximum number of processes (300) exceeded

    SQL> select count(*) from v$session; COUNT(*)---------- 98 SQL> select count(*) from v$process ...

  10. UML 用例图（转载）

    UML是系统架构设计师考试的一个重要考点,需要考生掌握.但是有些考生,在学习的过程中会有这样的疑问,在敏捷开发时代,UML还有没有必要去学习? UML还是有用的,主要用在设计和分析阶段,但是UML不适 ...