网页分成三部分：
结构（HTML）
表现（CSS）
行为（JavaScript）
CSS：
- css是层叠样式表
- 网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式。（是一种3D效果）CSS用来设置网页中元素的样式
使用CSS来修改元素的样式
第一种方式（内联样式，行内样式）：
在标签内部通过style属性来设置元素的样式
<p style="color: red; font-size: 30px;">易烊千玺 加油！！！</p>
问题：
使用内联样式，样式只能对一个标签。如果希望影响到每个元素必须在每一个元素中都复制一遍
注意：在开发时绝对不要使用内联样式（因为该种方法将HTML和CSS的混在一起使用，不好维护）
第二种方式（内部样式表）
- 将样式编写到head中的style标签里
- 然后通过css的选择器来选中元素并为其设置各种样式
- 可以同时为多个标签设置样式，并且修改时只需要修改一处即可
- 内部样式表更加方便对样式进行复用
- 问题：
- 我们的内部样式表只能对一个网页起作用
他里面的样式不能跨页面进行复用
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color: seagreen;
font-size: 50px;
</style>
</head>
第三种方式（外部样式表）
- 可以将css样式编写到一个外部的css文件中
- 然后将通过link标签来引入外部的css文件
- 外部样式表需要通过link标签进行引入
- 意味着只要想使用这些样式的网页都可以对其进行引用
- 使样式可以在不同的页面之间进行复用
- 将样式编写到外部的css文件中，可以使用到浏览器的缓存机制
- 从而加快网页的加载速度，提高用户的体验
style.css
p{
color: brown;
font-size: 50px;
}
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./img/style.css">
</head>
CSS的基础语法
-
style框里遵循css语法
-
CSS的注释/* css中的注释*/。在style中直接ctrl+/（注释快捷键）
-
CSS基本语法：选择器；声明块
- 选择器 ：通过选择器可以选中页面中的指定元素（比如p 的作用就是选中页面中所有的p元素）
- 声明块：通过声明块来指定要为元素设置的样式（声明块由一个一个的声明组成、声明是一个名值对结构—一个样式名对应一个样式值，名和值之间以 : 连接,以 ; 结尾
选择器
id选择器:
- 作用：根据元素的id属性值选中一个元素
- 语法：#id属性值（）
- 例子：#red（）、#box（）
类选择器：
- 作用：根据元素的class属性值选中一组元素
- 语法：.class属性值
- .blue{
color:blue;
} - class是一个标签属性，它和id类似，不同的是class可以重复使用（可以使用class属性来为元素分组）
通配选择器：
- 作用：选中页面中的所有元素
- 语法：*
交集选择器:
作用：选中同时符合多个条件的元素
语法；选择器1选择器2选择器3选择器n{ }
注意：交集选择器如果有元素选择器，必须使用元素选择器开头
<style>
.red{
color: cadetblue;
}
div.red{
font-size: 60px;
}
</style>
选择器分组（并集选择器）：
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器n{ }
<style>
div,h1{
color: chocolate;
}
</style>
子元素选择器：
作用：选中指定元素的指定子元素
语法：父元素>子元素
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div>p{
color: chocolate;
}
p>span{
color:darkcyan
}
</style>
<body>
<div>
我是一个div标签
<p>
我是div里的p标签
<span>
我是div——p标签里的span标签
</span>
</p>
<span>
我是div中的span标签
</span>
</div>
</body>
后代元素选择器：
作用：选中指定元素内的指定后代元素
语法：祖先 后代
<style>
div span{
color: deeppink;
}
</style>
div>p>span{
color: deeppink;
}
<style>
p + span{
color: red;
}
</style>
<style>
p ~ span{
color: red;
}
</style>
属性选择器:
[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=属性值]选择属性值以指定值开头的元素
[属性名$=属性值]选择属性值以指定值结尾的元素
[属性名*=属性值]选择属性值中含有某值的元素的元素
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p[title]{
color: cornflowerblue;
}
p[title=abc]{
font-size: 50px;
}
p[title*=]{
}
p[title$=d]{
color: darkkhaki;
}
</style>
<body>
<p title="abc">少小离家老大回</p>
<p title="abcd">乡音无改鬓毛衰</p>
<p title="abcde">儿童相见不相识</p>
<p>笑问客从何处来</p>
</body>
伪类选择器:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul>li{
color: green;
/* 所有都变色 */
}
/* 将ul里的第一个li设置成红色
伪类：（不存在的类，特殊的类）
伪类用来描述一个元素的特殊状态
比如：第一个元素，被点击的元素，鼠标移入的元素···
伪类一般情况下都是使用:开头
:first-child第一个子元素
:last-child最后一个元素
:nth-child() 选中第n个元素
特殊值：
2n（或even）:表示选中偶数的元素
2n+1（或add）：表示选中奇数的元素
以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似
不同点是他们是在同类型元素中进行排序
:not()否定伪类
将符合条件的元素从选择器中去除
*/
ul>li:first-child{
color: red;
}
ul>li:nth-child(2n){
color: yellowgreen;
}
ul>li:not(:nth-of-type(2)){
color: violet;
}
</style>
<body>
<!-- ul>li按Tab建 -->
<!-- ul>li*5按Tab建 -->
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
超链接的伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=a, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*
:link用来表示没访问过的链接
（正常的链接（无论是否访问过，只要链接正常都是正常的链接）
*/
a:link{
color: red
}
/*
:visited用来表示访问过的链接
由于隐私的原因，所以:visited只能修改颜色，改不了大小
*/
a:visited{
color: orange;
}
/*
:hover 用来表示鼠标移入的状态
*/
a:hover{
color: brown;
}
/*
:active 用来表示鼠标点击
*/
a:active{
color: darkgreen;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">访问过的链接</a>
<br>
<br>
<a href="https://www.jd.com">没有访问过的链接</a>
</body>
</html>
伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
font-size: 30px;
}
/* p>span{
font-size: 50px;
} */
/*
伪元素：表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素用 ::开头
::first-letter表示第一个字母
::first-line表示第一行
::selection表示选中的内容
::before元素的开始
::after元素的最后
before和after必须结合content属性来使用
*/
p::first-letter{
font-size: 50px;
}
p::first-line{
color: yellowgreen;
}
p::selection{
background-color: wheat;
}
div::before{
content: '妖魔鬼怪快离开';
color: red;
}
</style>
</head>
<body>
<div>这是一个div</div>
<p>
<!-- <span>I</span> s a journey, not the destination, but the scenery along the should be and the mood at the view. -->
It is a journey, not the destination, but the scenery along the should be and the mood at the view.
</p>
</body>
</html>
选择器的权重
样式的冲突：
- 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突
- 样式冲突时，应用哪个样式由选择器的权重（优先级）决定
选择器的权重：
内联样式 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
通配选择器 0,0,0,0
继承的样式 没有优先级 - 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器时单独计算）
- 选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
- 如果优先级计算后相同，此时则优先使用靠下的样式
- 可以在某一个样式的后边添加！important，则此时该样式会获取到最高的优先级，甚至超过内联样式
.red{
color: red;!important
}
important能不用就不用
像素和百分比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
/*
长度单位
像素
- 屏幕（显示器）实际上是由一个个小点点构成的
- 不同的屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
- 所以同样的200px在不同的设备下显示是不一样的
- 200px就是200个点
百分比
- 可以将属性值设置为相对于其父元素属性的百分比
em
- em是相对于元素的字体大小来计算的
- 1em=1font-size
- em会根据字体大小的改变而改变
rem
- rem是相对于根元素的字体大小而改变的
*/
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.box2{
width: 50%;
height: 50%;
background-color: wheat;
}
.box3{
width: 10em;
height: 10em;
background-color: violet;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
颜色单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
/*
颜色单位
在css中可以直接使用颜色名来设置各种颜色
例如：red，brown，yellow···
RGB值：光的三原色
- RGB通过三种颜色的不同来调配出不同的颜色
- R：red G：green B：blue
- 每一种颜色的范围在0-255（0-100%）之间
- 语法：rgb（红色，绿色，蓝色）
RGBA：
- 在RGB的基础上增加了一个a表示不透明度
- 需要四个值，前三个和RGB一样，第四个表示不透明度
1表示完全不透明 0表示完全透明 0.5半透明
十六进制的RGB值
- 语法：#红色绿色蓝色
- 颜色浓度通过 00-ff
- 如果颜色两位两位重复可以进行简写
#aabbcc-->#abc
HSL值 HSLA值
H:色相（0-360）
S:饱和度，颜色的浓度（0%-100%）
L:颜色的亮度（0%-100%）
*/
background-color: aqua;
background-color: rgb(100, 120, 130);
background-color: #ff0000;
background-color: #abc;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
文档流
- 网页是一个多层的结构，一层摞着一层
- 通过css可以分别为每一层来设置样式
- 作为用户我们只能看到最上面的一层
- 这些层中，最底下的一层我们称为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列
- 对于咱们来说元素主要有以下两种状态
在文档流中
不在文档流中（脱离文档流）
- 元素在文档流中有什么特点
- 块元素
-块元素会在页面中独占一行（自上向下垂直排列）
- 默认宽度是父元素的全部（会把父元素撑满）
- 默认高度是被内容撑开（子元素）
- 行内元素
- 行内元素不会独占页面的一行，只占自身的大小
- 行内元素在页面中由左向右水平排列，如果一行之中不能容纳所有的行内元素
则元素会换到第二行继续自左向右排列
- 行内元素的默认宽度和高度都是被内容撑开
-->
<div>我是div1</div>
<div>我是div2</div>
</body>
</html>
扫一扫
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
