一 、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. Linux 杀死所有进程

    方法一: sudo killall -9 netease-cloud-music 这种方法,必须要写全称. sudo netease-cloud-music QStandardPaths: XDG_R ...

  2. BZOJ_2844_albus就是要第一个出场_线性基

    BZOJ_2844_albus就是要第一个出场_线性基 Description 已知一个长度为n的正整数序列A(下标从1开始), 令 S = { x | 1 <= x <= n }, S ...

  3. bzoj1513

    二维线段树 听说二维线段树不能下传标记? 就是裸的二维线段树,由于每次高度只能增加,所以我们就可以标记永久化 每个线段树里有两个数组,mx和mark,每次修改路径上所有mx都要修改,mark是区间的精 ...

  4. CodeForces 722C Destroying Array (并查集)

    题意:给定 n 个数,然后每次破坏一个位置的数,那么剩下的连通块的和最大是多少. 析:用并查集来做,从后往前推,一开始什么也没有,如果破坏一个,那么我们就加上一个,然后判断它左右两侧是不是存在,如果存 ...

  5. bzoj 1567: [JSOI2008]Blue Mary的战役地图【二分+hash】

    二维哈希+二分 说是二维,其实就是先把列hash了,然后再用列的hash值hash行,这样可以O(n)的计算一个正方形的hash值,然后二分边长,枚举左上角点的坐标然后hash判断即可 只要base选 ...

  6. [App Store Connect帮助]七、在 App Store 上发行（1）App 发行流程概述

    在 App Store 上发行 App 的一般流程如下. 第 1 步:选择您的构建版本 每个 App 都可以有多个版本,且每个版本也可以有多个构建版本.若要在 App Store 上发行您的 App, ...

  7. jrebel永久免费使用教程，这个标题怎么样？不能带“激活”俩字？

    文章转载自:https://www.jiweichengzhu.com/article/33c0330308f5429faf7a1e74127c9708 如果还有问题,加群交流:686430774(就 ...

  8. Visual Studio 2015 个版本下载

    Visual Studio 2015是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具.代码管控工具.集成开发环境(IDE)等等.所写的目标代码适用于微软支持的所有 ...

  9. 如何验证自己的网络是否支持ipv6

    http://test-ipv6.com/进入得到自己的ipv6地址 然后命令行 ping 一下

  10. 《windows核心编程系列》二十二谈谈修改导入段拦截API。

    一个模块的导入段包含一组DLL.为了让模块能够运行,这些DLL是必须的.导入段还包含一个符号表.它列出了该模块从各DLL中导入的符号.当模块调用这些导入符号的时候,系统实际上会调用转换函数,获得导入函 ...