CSS
01_css简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
第二种方式
-将样式写到head中style标签
然后通过css选择器来选中元素设置各种样式
可以同时为多个标签设置样式,并且修改时只需要修改一处即可全部应用
内部样式表更加方便对样式进行复用
- 问题:
我们的内部样式表只能对一个网页起作用,
它里边的央视不能跨页面进行复用
-->
<!-- <style>
p{
color: salmon;
font-size: 50px;
}
</style>
-->
<!--
第三种方式(外部样式表)
可以将css样式编写到一个外部的css文件中,
然后通过link标签来引入外部的css文件
- 外部样式需要通过link标签进行引入,
意味着只要想使用这些样式的网页都可以对其进行引用
使样式可以在不同页面之间进行复用
- 将样式编写到外部的css中,可以使用到浏览器的缓存机制
从而加快网页的加载速度
-->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!--
网页分成三部分:
结构(HTML)
表现(css)
行为(javaScript)
css
- 层叠样式表
- 网页实际上是一个多层的结构,通过css可以分别为网页的每一层来设置样式而我们能看到最上边一层
-css用来设置网页中元素的样式
-->
<!--
使用css来修改元素的样式
第一种方式:
- 在标签内部通过style属性来设置元素样式
-问题:
使用内联样式,央视只能对一个标签生效
如果希望影响到多个元素必须在每一个元素中复制一遍
而且当样式发生改变时,必须要一个一个的修改,非常的不便
开发时不要用
-->
<p style="color:red; font-size: 60px;">天下无敌</p>
<p> 天生我材必有用</p>
</body>
</html>
02_语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
css里面的注释,ctrl+/注释快捷键
css基本语法:
选择器 声明块
选择器,通过选择器可以选中页面中的指定元素
比如p的作用就是选中页面中所有的p元素
声明块:通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构
一个样式名对应一个样式值,名和值之间以:连接,以;结尾
*/
p{
color: red;
font-size: 50px;
}
h1{
color: royalblue;
font: 100;
height: 50;
}
</style>
</head>
<body>
<h1>俺叫h1</h1>
<p>今天天气不错</p>
</body>
</html>
03_常用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
将所有的段落设置为红色
元素选择器
作用:根据标签名来选中指定的元素
语法,标签名{}
例子:p{} h1{}
*/
/* p{
color: red;
} */
/*
将 落下。。。设置红色
id选择器
作用:根据元素的id属性值选中一个元素
语法:#id属性值{}
例子:#box{} #red{}
*/
/*
#lan{
color:blue;
}
*/
/*
将 儿童。。。和笑问。。。设置为绿色
类选择器
作用:根据元素的class属性值选中一组元素
语法:.class属性值
*/
/*
通配选择器
作用:选中页面中所有元素
语法:*
例子:*{
}
*/
</style>
</head>
<body>
<h1>标题</h1>
<p id="lan">少小离家老大贵</p>
<p>乡音遂改比秒速</p>
<p>儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>落下而已</p>
</body>
</html>
04_复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
将所有的段落设置为红色
元素选择器
作用:根据标签名来选中指定的元素
语法,标签名{}
例子:p{} h1{}
*/
/* p{
color: red;
} */
/*
将 落下。。。设置红色
id选择器
作用:根据元素的id属性值选中一个元素
语法:#id属性值{}
例子:#box{} #red{}
*/
/*
#lan{
color:blue;
}
*/
/*
将 儿童。。。和笑问。。。设置为绿色
类选择器
作用:根据元素的class属性值选中一组元素
语法:.class属性值
*/
/*
通配选择器
作用:选中页面中所有元素
语法:*
例子:*{
}
*/
</style>
</head>
<body>
<h1>标题</h1>
<p id="lan">少小离家老大贵</p>
<p>乡音遂改比秒速</p>
<p>儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>落下而已</p>
</body>
</html>
05_关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
子元素选择器:
作用:选中指定父元素的指定元素
语法:父元素>子元素
*/
/* div>span{
color: red;
font-size: 50px;
} */
/*
后代元素选择器:
作用:选中指定元素内的制定后代元素
语法:祖先,后代
*/
/* div span{
color: skyblue;
} */
/*
选择下一个兄弟
语法:前一个+下一个
选择下边所有的兄弟:
语法:兄~弟
*/
/* p+span{
color: red;
} */
p~span{
color: yellow;
}
</style>
</head>
<body>
<!--
父元素:
- 直接包含子元素的元素叫做父元素
子元素:
- 直接被父元素包含的元素是子元素
祖先元素:
- 直接或间接包含后代元素的元素叫做祖先元素
- 一个元素的父元素也是它的祖先元素
后代元素:
- 直接或间接被祖先元素包含的元素叫做后代元素
- 子元素也是后代元素
兄弟元素:
- 拥有相同的父元素的元素是兄弟元素
-->
<div>
我是一个div
<p>
我是p
<span>
我是p中span
</span>
</p>
<span>我是div中span</span>
<span>我是div中span</span> <span>我是div中span</span>
</div>
</body>
</html>
06_属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值含有某值元素的元素
*/
/* p[title]{
color: green;
} */
p[title*=abc]{
color: indianred;
}
</style>
</head>
<body>
<p title="abc">少小离家老大回</p>
<p title="abcde">乡音无改鬓毛衰</p>
<p title="helloabc">儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>落霞与孤鹜齐飞</p>
<p>秋水共长天一色</p>
</body>
</html>
07_伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
将ul里面的第一个li设置为红色
*/
/*
伪类(不存在的类,特殊的类)
- 伪类用来描述一个元素的特殊状态
比如:第一个子元素,被点击的元素,鼠标移入的元素。。。
- 伪类一般情况下都是使用:开头
:first-child 第一个子元素
: last-child 最后一个子元素
: nth-child() 选中第n个子元素
特殊值:
n 第n个n范围 0到无穷大
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
-以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
-这几个伪类的功能和上述类似,不同点在于他们是在同类型元素进行排序
:not() 否定伪类
- 将符合条件的元素从选择器中去除
*/
/* ul>li:first-child{
color: red;
} */
/* ul>li:last-child{
color: red; */
/* ul>li :nth-child(1){
color: red;
} */
ul>li:not(:nth-child(4)){
color: orange;
}
</style>
</head>
<body>
<ul>
<li class="first">第一个</li>
<li class="first">第一个</li>
<li class="second">第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>
08_伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 20px;
}
/*
伪元素,表示页面中一些特殊的并不真实存在的元素(特殊的位置)
伪元素使用:;开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
:: after 元素的最后
- before 和 after 必须结合content属性来使用
*/
p::first-line{
background-color: greenyellow;
}
p::first-letter{
font-size: 50px;
}
p::selection{
background-color: yellow;
}
div::before{
content: 'abc';
color: yellow;
}
div::after{
content: 'haha';
color: blue;
}
</style>
</head>
<body>
<div>Hello hello How are you</div>
<p>
saofhoipshafoisah af aofhsofewh9ohg 08ew0gh0ewsihgy0p sehghewshiahfo afhoiahfo
</p>
</body>
</html>
09_样式的继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size: 40px;
}
/*
样式的继承,我们为一个元素设置的样式同时也会应用到它的后代元素上
继承是发生在祖先后后代之间的
继承的设计是为了方便我们的开发
利用继承我们可以将一些通用的样式同意设置到共同的祖先元素上
这样只需设置一次即可让所有的元素都具有该样式
*/
p{
color: red;
}
</style>
</head>
<body>
<p>
我是p元素
<span>我是p中的span</span>
</p>
</body>
</html>
10_选择器的权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* #box1{
color: blue;
} */
div{
color: yellow;
}
.red{
color: red;
}
.d1{
color: purple;
}
/*
央视的冲突
- 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突。
发生样式的冲突时,应用哪个样式由选择器的权重(优先级)决定
选择器的权重
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承选择器 没有优先级
比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器是单独计算的)
选择器的累加不会超过其最大的数量级,类选择器在搞也不会超过id选择器
如果优先级计算后相同,此时则优先使用靠下的样式
可以在某一个样式的后边添加!important,则此时该样式会获取到最高的优先级,甚至超过内联样式
但是需要慎用!
*/
</style>
</head>
<body>
<div id="box1" class="red d1">my name is div
<span>i am span in div</span>
</div>
</body>
</html>
11_单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
长度单位:
像素
- 屏幕(显示器)实际上由一个一个的小点点构成的
- 不同屏幕的像素大小不同,像素小的屏幕显示的效果越清晰
- 所以同样的200px在不同的设备下显示效果不一样
百分比
- 也可以将属性值设置为相对于其父元素属性的百分比
- 设置百分比可以使子元素跟随父元素的改变而改变
em
- em是相对于元素的字体大小来计算的
- 1em = 1font-size
- em会根据字体大小的改变而改变
rem
- rem是根据根元素的字体大小来计算的
*/
.box1{
width: 200px;
height: 200px;
background-color: orange;
}
.box2{
width: 100px;
height: 100px;
background-color: aqua;
}
.box3{
width: 20em;
height: 20em;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box1"><div class="box2"></div></div>
<div class="box3"></div>
</body>
</html>
12_颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
/*
颜色单位
在css中可以直接使用颜色来设置各种颜色
比如,red、orange、blue。。。
但是css中直接使用颜色是非常不便的
rgb值
-rgb通过三种颜色的不同浓度来配出不同的颜色
- R red ,G green,B blue
- 每一种颜色的范围在0 - 255之间(0% - 100%)
- 语法:rgb(红色,绿色,蓝色)
rgba:
- 就是在rgb基础上增加一个a表示不透明度
- 需要四个值,前三个和rgb一样,第四个表示不透明度
1表示完全不透明 0表示完全透明 .5表示半透明
十六进制的rgb值:
- 语法:#红色绿色蓝色
- 颜色浓度 00-ff
- 如果颜色两位重复可以进行简写
#aabbcc -->#abc
HSL值 HSLA值
H 色相(0-360)
S 饱和度,颜色的浓度 0% - 100%
L 亮度 颜色的亮度 0% - 100%
*/
background-color: rgb(255, 0, 0);
background-color: #ffff00;
background-color: rgba(0, 217, 255, 0.637);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>