1.CSS的简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS的简介</title>
</head>
<body>
<!--
网页分成三个部分:
结构(HTML)
表现(CSS)
行为(JavaScript)
CSS
-层叠样式表
-网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式
而最终我们能看到只是网页的最上边一层
-总之一句话，CSS用来设置网页中元素的样式
使用css来修改元素的样式
第一种方式(内联样式、行内样式)
-在标签内部通过style屈性来设置元素的样式
-间题:
使用内联样式，样式只能对一个标签生效，
如果希望影响到多个元素必须在每一个元素中都复制一遍，并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便
<p style="color:red;font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>
<p style="color:red;font-size: 60px;">今天天气真不错</p>
-注意：
-开发时绝对不能使用内联样式
-->
<!--
第二种方式(内部样式表)
-将样式编写到head中的style标签里
然后通过css的选择器来选中元素并为其设百各种样式
可以同时为多个标签设置样式，并且修改时只需要修改一处即可-内部样式表更加方便对样式进行复用
<style>
p{color:green;font-size:50px;}
</style>
-->
<!--
第三种方式(外部样式表)最佳实践
-可以将css样式编写到一个外部的CSs文件中，
然后通过link标签来引入外部的css文件-外部样式表需要通过link标签进行引入,
意味着只要想使用这些样式的网页都可以对其进行引用便样式可以在不同页面之间进行复用
-将样式编写到外部的CSS文件中，可以使用到浏览>的缓存机制，
从而加快网页的加载速度，提高用户的体验。|
-->
<link rel="stylesheet" href="./style.css">
<p>少小离家老大回，乡音无改鬓毛衰</p>
<p>今天天气真不错</p>
</body>
</html>
2.CSS的语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS的语法</title>
<style>
/*
-CSS中的注释，注释中的内容会自动被浏览器所忽略css的基本语法:
-选择器声明块
-选择器，通过选择器可以选中页面中的指定元素
比如p的作用就是选中页面中所有的p元素
-声明块，通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构
—个样式名对应一个样式值,名和值之间以:连接，以;结尾
*/
p{color:red;font-size:40px;}
h1{color: green;font-size:60px;}
</style>
</head>
<body>
<h1>今天天气真好</h1>
<p>今天天气真好</p>
<p>今天天气真好</p>
</body>
</html>
3.常用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用选择器</title>
<style>
/* 将所有的段落设置为红色〔字体)
元素选择器
作用:根据标签名来选中指定的元素
语法:标签名{}
例子:p{} hi{} div{}
p{
color: red;
}
h1{
color: green;
font-size: 100px;
}
*/
/* 将儿童相见不相识设置红色
id选择器
作用:根据元素的id属性值选中一个元素语法。#id属性值{}
例子:#box{} #red{}
#red{
color: red;
}
*/
/* 将秋水...和落霞..．设置为蓝色
类选择器(class)
作用:根据元素的class压性值选中一组元素语法: .class属性值
.blue{
color: blue;
}
.abc{
font-size:40px;
}
*/
*{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue abc">我是标题</h1>
<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</P>
<p id="red">儿童相见不相识</p>
<p>笑问客从何处来</p>
<!--
class 是一个标签的属性，它和id类似，不同的是class可以重豆使用
可以通过class属性来为元素分组
可以同时为一个元素指定多个class属性
-->
<p class="blue">秋水共长天一色</p>
<p class="blue">落霞与孤鹜齐飞<p>
<!--
通配选择器
作用：选中页面中的所有元素
语法:*
-->
</body>
</html>
4.复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器</title>
<style>
/*将class为red的元素设置为红色〔字体）*/
.red{
color: red;
}
/*将class为red的div字体大小设置为30px
交集选择器
作用：选中同时复合多个条件的元素语法:选择器1选择器2选择器3选择器n{}
注意点:交集选择器中如果有元素选择器,必须使用元素选择器开头
*/
div.red{
font-size: 30px;
}
/*
选择器分组(并集选择器)
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器3,选择器n{}
#b1,.pi,h1,span,div.red{}
*/
h1, span{
color: green
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red">我是p元素</p>
<div class="red2">我是div2</div>
</body>
</html>
5.关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关系选择器</title>
<style>
/*为div的子元素span设置一个字体颜色红色(为div直接包含的span设置一个字体颜色)
子元紊选择器
作用:选中指定父元素的指定子元素语法。父元素>子元素,可以无限取父元素
div.box > span{
color:orange;
}
*/
/*
后代元素选择器,
作用:选中指定元素内的指定后代元素语法。祖先后代
div span{
color: skyblue;
} */
/*
选择下一个兄弟
语法:前一个+下一个选择下边所有的兄弟
语法：兄~第
p + span{
color: red;
}
*/
p ~ span{
color:red;
}
</style>
</head>
<body>
<!--
父元素
-直接包含子元素的元素叫做父元素
子元素
-直接被父元素包含的元素是子元素
祖先元素
-直接或间接包含后代元素的元素叫做祖先元素-一个元素的父元素也是它的祖先元素
后代元素
-直接或间接被祖先元素包含的元素叫后代元素-子元素也是后代元素
兄弟元素
-拥有相同父元素的元素是兄弟元素
-->
<div class="box">
我是一个div
<p>我是div中的p元素
<span>
我是p元素中的span
</span>
</p>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
</div>
<div>
<span>
我是div外的span
</span>
</div>
I
</body>
</html>
6.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* [属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=属性值]选择压性值以指定值开头的元紊
[属性名分$=属性值]选择屈性值以指定值结尾的元素
[属性名*=属性值]选择属性值中含有某值的元素的元素
*/
/* p[title=abc]
p[title^=abc]
p[title$=abc]
*/
p[title*=abc]{
color: orange;
}
</style>
</head>
<body>
<p title="abc">少小离家老大回</p>
<p title="hello">乡音无改鬓毛衰</P>
<p title="abcde">儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>秋水共长天一色</p>
<p>落霞与孤鹜齐飞</p>
</body>
</html>
7.伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
</head>
<style>
/*
将ul里的第一个1i设置为红色
伪类（不存在的类，特殊的类）
-伪类用来描述一个元素的特殊状态
比如,第一个子元素、被点击的元素、鼠标移入的元素...
-伪类一般情况下都是使用:开头
:first-child 第一个子元素
:last-child最后一个子兀系: nth-child0选中第n个子元素
特殊值:n第n个n的范围0到正无穷
2n或者even表示选中偶数位的元素
2n+1或者odd表示选中偶数位的元素
-以上这些伪类都是根据所有的子元紊进行排序
ul > li:first-child{
color: red;
}
ul > li:last-child{
color: red;
}
ul > li:nth-child(even){
color: red;
}
:first-of-type
:last-of-type
:nth-of-type()
-这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序
-:not(否定伪类)将符合条件的元素从选择器中去除
ul > li:first-of-type{
color: red;
}*/
ul >li:not( :nth-of-type(3)){
color: yellowgreen;
}
</style>
<body>
<ul>
<span>我是晓燕</span>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>
8.a元素的伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>a元素的伪类</title>
<style>
/*
:link 用来表示没访问过的链接〔正常的链接)
a: link{
color: red;
}
/*
: visited用来表示访间过的链接
由于隐私的原因,I所以visited这个伪类只能修改链接的颜色*/
a:visited{
color: orange;
font-size: 50px;
}
/* :hover用来表示鼠标移入的状态 */
a:hover{
color: aqua;
font-size: 50px;
}
/* :active用来表示鼠标点击 */
a:active{
color: yellowgreen;
}
</style>
</head>
<body>
<!--
1.没有访间过的链接2.访间过的链接
-->
<a href="https://www.baidu.com">访问过的链接</a>
<br><br>
<a href="https://www.baidu123.com">没访问过的链接</a>
</body>
</html>
9.伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
div{
font-size: 50px;
}
p{
font-size: 50px;
color: orange;
}
/* 伪元素，表示页面中一些特殊的并不真实的存在的元素〔特殊的位置)
伪元素使用::开头
::first-letter表示第一个字母: :first-line表示第一行
::selection表示选中的内容: : before元素的开始
::after元素的最后
-before和after必须结合content属性来使用
*/
p::first-letter
{
font-size:100px;
}
p::first-line
{
background-color: pink;
}
p::selection{
background-color: greenyellows;
}
div::before{
content : 'abc';
color: red;
}
div::after{
content:'haha';
color: blue;
}
div::before{
content:'『';
}
div::after{
content:'』';
}
</style>
</head>
<body>
<div>Hello Hello how are you</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempora molestiae assumenda earum, quo nesciunt ex autem adipisci dolor eum optio a illum rem labore veritatis porro animi magnam voluptates?
</p>
</body>
</html>
10.样式的继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式的继承</title>
<style>
p{
color:red;
}
div{
color:yellow;
}
/*
样式的继承，转们为一个元素设置的样式同时也会应用到它的后代元紊上
继承是发生在祖先后后代之间的
继承的设计是为了方便我们的开发,
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
这样只需设置一次即可让所有的元素都具有该样式
*/
body{
font-size: 50px;
}
</style>
</head>
<body>
<p>我是p元素
<span>
我是p元素中的span
</span>
</p>
<span>
我是p元素外的span
</span>
<div>
我是div
<span>
我是div中的span
<em>
我是span中的em
</em>
</span>
</div>
</body>
</html>
11.选择器的权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器的权重</title>
<style>
div{
color:yellow;
}
.red{
color:red;
}
/* div#box1{
background-color: yellow;
}
两个选择器的话就优先级相加
.d1{
background-color: purple !important;
}
.red{
background-color: red;
}
相同优先级的就按下面的来
*/
/* div,p, span{
background-color: yellowgreen;
}
三个选择器的话就分别算
*/
/*
样式的冲突
-当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
发生样式冲突时，应用哪个样式由选择器的权重〔优先级〕决定+
选择器的权重
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承选择器 无
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越忧先显示（分组选择器是单独计算的),
选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
如果优先级计算后相同，此时则优先使用靠下的样式
可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式
注意:在开发中这个玩意一定要慎用!
*/
*{
font-size: 50px;
}
div{
font-size: 20px;
}
</style>
</head>
<body>
<div id="box1" class="red d1 d2 d3 d4" style="background-color:chololate">我是div
<span>
我是div中的span
</span>
</div>
</body>
</html>
12.单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单位</title>
<style>
/*
长度单位:
像素
-屏幕〔显示器)实际上是由一个一个的小点点构成的-
-不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越洁晰|
-所以同样的200px在不同的设备下显示效果不一样
-百分比
-也可以将居性值设置为相对于其父元素屈性的百分比
-设置百分比可以使子元素跟随父元素的改变而改变
em
- em是相对于元紊的字体大小来计算的
- 1em = 1font-size
- em会根据字体大小的改变而改变
rem
- rem是相对于根元素的字体大小来计算
*/
.box1{
width: 400px;
height: 400px;
background-color: orange;
}
.box2{
width: 50%;
height: 50%;
background-color: blue;
}
.box3{
font-size: 56PX;
/* width: 10em;height: 10em;*/
width: 18rem;
height: 10rem;
background-color:greenyellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
13.颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色</title>
<style>
/*
颜色单位:
在css中可以直接使用颜色名来设置各种颜色
比刘: red、orange、yellow、blue、green ...
但是在css中直接使用颜色名是非常的不方便
RGB值:
- RGB通过三种颜色的不同浓度来调配出不同的颜色- Rred. G green . B blue
-每一种颜色的范围在0- 255 (0% - 180%)之间-语法:RGB(红色,绿色,蓝色)
RGBA:
-就是在rgb的基础上增加了一个a表示不透明度
-需要四个值，前三个和rgb一样，第四个表示不透明度
1表示完全不透明,0表示完全透明,.5半透明
十六进制的RGB值:
-语法:#红色绿色蓝色-颜色浓度通过00-ff
相同的可以简写
HSL值 HSLA值(加上透明度)
H色相(0 - 360)
S饱和度：颜色的浓度0%-100%
L亮度：颜色的亮度日0%-100%
*/
.box1
{
width: 100px;
height: 100px; I
background-color:red;
background-color:rgb(255, 0, 255);
background-color:rgb(0, 255, 0);
background-color:rgb(0,0,255);
background-color:rgb(255,255,255);
background-color:rgb(106,153,85);
background-color:rgba(106,153,85,.5);
background-color:#ff0000;
background-color:#ff0;
background-color:#bbffaa;
background-color:#9CDCFE;
background-color:rgb(254,156,156);
background-color:hsl(50,100%,50%);
background-color:hsla(50,100%,50%,0.615);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
扫一扫
1041
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
