一 、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. mysql13---索引使用注意

    .4唯一索引 ①当表的某列被指定为unique约束时,这列就是一个唯一索引 ) unique); 这时, name 列就是一个唯一索引. unique字段可以为NULL,并可以有多NULL(,null ...

  2. Lightoj 1017 - Brush (III)

    1017 - Brush (III)    PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB Sam ...

  3. java web框架收集

    一.前端框架: 1.vue.js 2.angular.js 二.后端框架: 1.struts2 2.springmwc 三.数据库映射框架: 1.hibernate 2.mybatis 四.数据库: ...

  4. I.MX6 查看baudrate确定是否被其他程序占用

    /*********************************************************************** * I.MX6 查看baudrate确定是否被其他程序 ...

  5. P4844 LJJ爱数数 数论

    思路: 化简后得到(a+b)c=ab,设g=(a,b),A=a/g,B=b/g,则g(A+B)c=ABg^2,即(A+B)c=ABg 由题目已知条件:(a,b,c)=1,即(g,c)=1,g|(A+B ...

  6. [OS][FS]查看ext3文件系统分区的superblock

    本文将介绍怎样读取一个分区的superblock: 1. 首先我们查看一下在磁盘上有哪些分区,通过fdisk -l 这里有三个分区,我们下面查看/dev/sda3(这是一个device file) 2 ...

  7. IJ：IntelliJ IDEA安装

    ylbtech-IJ:IntelliJ IDEA安装 响应速度快 1.返回顶部 1. 2. 3. 4. 5. 6. 7. 2. 接受协议,激活IJ返回顶部 1. 2. 3. 4. 5. 6.0. 6. ...

  8. pom.xml内容没有错，但一直报错红叉 解决办法

    转自:http://www.cnblogs.com/sxdcgaq8080/p/5590254.html [maven] pom.xml内容没有错,但一直报错红叉 解决办法 1.首先看一下下面的这两个 ...

  9. UNIX 环境模拟工具Cygwin安装及使用图文教程

    对于 UNIX 本身,也有各种称呼.IBM® 大型机用户说各种带字母 "z" 的行话,比如 IBM z/OS® 和 System z9 Virtual Machine (z/VM) ...

  10. 视图模板中 使用boottstrap 将各表单字段排成一行

    如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline. <form class="for ...