02_css
1、css简介
-层叠样式表
-网页实际上是好多层的结构,css为每一层设置样式,而最终我们看到的是最上面一层
总之,css用来设置网页中元素的样式
使用css修改元素的样式:
第一种方式:(内联样式)(行内样式)
使用标签内部style属性设置样式
缺点:
使用内联样式,样式只能对一个标签生效, 不方便维护,第二种方式——(内部样式表)
开发的时候不要用内联样式
<p style="color:red; font-size: 60px;">少小离家老大回,乡音无改鬓毛衰</p>
<p style="color:red; font-size: 60px;">少小离家老大回,乡音无改鬓毛衰</p>
<p style="color:red; font-size: 60px;">少小离家老大回,乡音无改鬓毛衰</p>
第二种方式:(内部样式表)
在header里面编写,用style标签
通过css选择器来选中元素为其设置样式
可以同时为多个标签设置样式,并且修改时只需要修改一处即可全部应用
缺点:
不能跨页面进行使用,只能在当前页面使用,所以产生第三个方式——外部样式表
<style>
P{
color:green;
font-size: large;
}
h1{
color: red;
font-size: large;
}
</style>
第三种方式(外部样式表)(最佳)
-可以将css样式编写到一个外部css文件中,然后通过 link 标签引入外部的css文件
link属性:
rel:stylesheet:样式表
好处:
外部样式表通过link标签进行引用,意味着样式可以在不同页面间进行复用
-可以使用浏览器缓存机制,从而加快网页加载速度,提高用户体验
<link rel="stylesheet" href="./style.css">
<h1>回乡偶书</h1>
<p>少小离家老大回,乡音无改鬓毛衰</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
<p>少小离家老大回,乡音无改鬓毛衰</p>
<p>少小离家老大回,乡音无改鬓毛衰</p>
效果:
2、css语法
注释里面的内容自动被浏览器忽略
css基本语法: 选择器 声明块
-
选择器:通过选择器可以选定页面中的指定元素
- 比如P的作用就是选择页面中的所有p元素
-
声明块:通过声明块指定要为元素设置样式
-
P{color: aqua;}是一个声明块
-
由一个一个声明color: aqua;组成
-
声明块是一个名值对结构
- 一个样式名对应一个样式值——名:值;
-
P{
color: aqua;
}
h1{
color: blue;
}
<!--
style标签里面不遵守html的规范,遵守css里面的规范
css里面的注释
/**/
-->
3、选择器
css基本语法:
选择器 声明块
选择器
:通过选择器可以选定页面中的指定元素
- 比如P的作用就是选择页面中的所有p元素
3.1、常见选择器
1、元素选择器
-
作用,根据标签名来选中指定的元素
-
语法,标签名{}
-
例子,p{} h1{} div{}
<style> p{ color:red; } h1{ color:green; } </style> <h1>标题</h1> <p>少小离家老大回</p> <p>乡音无改鬓毛衰</p>
2、id选择器
-
作用,根据id属性值选中一个元素
-
语法:#id属性值
-
例子,#box{} #red{}
-
绝对不可以折磨写,id必须是唯一的
-
<p id="blue">儿童相见不相识</p> <p id="blue">笑问客从何处来</p>
-
3、类选择器
-
作用,根据元素的class属性值选中一组元素
-
语法,.class属性值{}
-
例子,.green{}
-
可以为同一个元素指定多个class属性,空格隔开,class=“green abc”
-
( class是一个标签的属性,他和id类似,但是class可以重复使用 可以通过class属性来为元素分组 )
-
<style> /*将秋水。。。和落霞。。。设置为绿色*/ .green{ color: green; } .abc{ font-size: larger; } </style> <p class="green abc">秋水共长天一色</p> <p class="green">落霞与孤鹜齐飞</p>
-
4、通配选择器
-
作用,选中页面所有元素
-
语法,*{}
-
权重为0,有优先级
-
*{ color:yellow; }
14.2、复合选择器
交集选择器:
- 作用,选择同时复合多个条件的元素
- 语法,选择器1选择器2选择器3选择器n{}
- 注意点,交集选择器中如果有元素选择器,必须使用元素选择器开头
- 例子,div.red{}(元素选择器.class属性值)
- 元素选择器#id属性值{}(一般不会这么写,id属性值是唯一的
<style>
div.red{
font-size: larger;
}
.a.b.c{
color: red;
}
/* p#p1{
color: royalblue;
} */
</style>
<p class="red" id="p1">我是p元素</p>
<div class="red a b c">我是div</div>
并集选择器:(选择器分组)
-
作用,同时选择多个选择器对应的元素
-
语法,选择器1,选择器2,选择器3{}
-
例子,h1,span{}
-
<style> h6,span{ color: tomato; } </style> <span>我是span元素</span> <h6>我是h1元素</h6>
两个都变绿色
关系选择器
子元素:
-被父元素直接包含的元素
父元素:
-直接包含子元素的元素
祖先元素:
-直接或间接包含后代元素的元素
- 一个元素的父元素也是他的祖先元素
后代元素:
-被祖先元素直接或间接包含的元素
-一个元素的子元素也是他的后代元素
兄弟元素:
-拥有相同父元素的元素是兄弟元素
子元素选择器:
-
作用,选中指定父元素的子元素(不包含孙子辈的)
-
语法,父元素 > 子元素
-
为div的子元素span设置蓝色
-
注意:
- (只有div的子元素变色,div里面的子元素p元素的span(相当于div的孙子辈)不会变)
- (所有div的子元素span都会变色)
- (如果指定某个div的子元素会变色,给div设置一个class=“box”,div.box > span{}
<style>
div > span{
color: hotpink;
}
</style>
<div>我是div元素
<p>我是div里面的p元素
<span>
我是p元素里面的span元素
</span>
</p>
<span>我是div里面的span元素</span>
</div>
<div class="box">我是第二个div元素
<span>
我是第二个div里面的span元素
</span>
</div>
div里的子元素span都变色,不包括孙子
div.box>span{
color: rgb(255, 115, 0);
}
后代元素选择器:
-
作用:选中指定祖先元素的后代元素
-
语法: 祖先元素 后代元素(中间空格)
-div span{}选中div里面的所有span元素,不管他是子元素还是孙子元素
-div > p > span{}选中孙子元素span
-
div span{ color: rgb(124, 0, 128); } div > p > span{ font-size: larger; }
-
选择下一个兄弟:
- 作用:选择某个元素下面紧挨的某个兄弟元素
- 语法:元素1 + 元素2
- 例子,div + p{}选择div元素下面紧挨的p元素
- -必须是紧挨和必须是在div后面
div+p{
color: greenyellow;
}
<div>div</div>
<p>少小离家老大回</p>
p变色
<div>div</div>
<span>我是隔开div和p的span</span>
<p>少小离家老大回</p>
p不变色
选择下面所有兄弟:
-
作用:选择某个元素下面的所有兄弟元素
-
语法:元素1 ~ 元素2
-
例子,div ~ p{}选择div元素下面的所有p元素
-
-中间有其他元素比如说span无影响
-
div ~ p{ color:rgb(35, 13, 233); } <div>div</div> <span>我是隔开div和p的span</span> <p>少小离家老大回</p> <p>乡音无改鬓毛衰</p> <span>儿童相见不相识</span> <p>错问客从谁家来</p>
-
所有p都变色
-
14.3、属性选择器
属性选择器:
[属性名]选择含有属性值的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=属性值]选择指定属性以指定属性值 开头 的元素
[属性名$=属性值]选择指定属性以指定属性值 结尾 的元素
[属性名*=属性值]选择指定属性 含有 某指定属性值的元素
<h1 title="abc">标题</h1>
<p title="abcdef">少小离家老大回</p>
<p title="helloabc">乡音无改鬓毛衰</p>
<p title="aaaabcddd">儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>秋水共长天一色</p>
<p>落霞与孤鹜齐飞</p>
14.4、伪类选择器
解决问题:把ul列表的第一个li设置成红色?如果第一行是span第二行是li变红吗?
伪类选择器:用来描述一个元素的特殊状态
比如:鼠标移入的元素、被点击的元素、第一个元素…
一般以:开头
- :first-child 选中第一个元素
- :last-child 选中最后一个元素
- :nth-child(n) 选中第n个元素
特殊值:
n 取值范围是0到正无穷
odd或者2n+1 奇数个元素
even或者2n 偶数个元素
上面的伪类选择器是在所有子元素里面排序不光有li还有span,所以当span是第一个元素时,li就不是第一个元素
如果想在同一个类型的子元素排序使用下面的伪类选择器
- :first-of-type
- :last-of-type
- :nth-of-type
这几个的功能和上面的类似,只不过他们是对同类型元素进行排序
一些其他的伪类选择器:
- :not 表示不被包含在选择器里面
:first-child使用方法和效果
<style>
ul>li:first-child{
color:red;
}
</style>
<ul><!-- ul>li*4直接生成这个列表结构 -->
<li>第零个</li>
<li class="red">第一个</li><!-- 之前是使用class但是没有办法一直使当前第一个li变红 -->
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
<ul>
<span>我是此ul第一个元素</span>
<li>第零个</li>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
:first-of-type使用方法和效果
<style>
ul>li:first-of-type{
color:red;
}
</style>
<ul><!-- ul>li*4直接生成这个列表结构 -->
<li>第零个</li>
<li class="red">第一个</li><!-- 之前是使用class但是没有办法一直使当前第一个li变红 -->
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
<ul>
<span>我是此ul第一个元素</span>
<li>第零个</li>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
:not使用方法和效果
<style>
ul>li:not(:first-of-type){
color:red;
}
</style>
除了第三个,其他都变成salmon色
14.5、超链接伪类选择器
1、访问过的链接
2、未访问的链接
四个重要的超链接伪类选择器
-
:link 表示没访问过的链接也就是正常的链接
-
:visited 表示已访问过的链接
由于隐私的原因,只可改变字体的颜色不可改变大小
-
:hover 用来表示鼠标移入的状态
-
:active 表示鼠标点击
前两个是a特有,后两个哪个元素都可以设置
:link的用法和效果
<style>
a:link{
color: red;
font-size: larger;
/* 由于他表示正常的链接所以未访问过的和访问过得都会变字号 */
}
</style>
:visited的用法和效果
<style>
:visited{
color: blue;
font-size: large;
/* 字体大小不会显示 */
}
</style>
:hover的用法和效果(鼠标移入)
<style>
:hover{
color: sandybrown;
}
</style>
:active的用法和效果(点的时候不松手)
<style>
a:active{
background-color:yellow;
}
</style>
14.6、伪元素选择器
解决 首字母下沉的问题
定义:伪元素表示一些特殊的并不真实存在的元素(特殊位置)
用法: 使用::开头
几个常见的伪元素选择器:
-
::first-letter
表示第一个字母 -
::first-line
表示第一行 -
::selection
表示选中的文字内容 -
::before
表示开始位置 -
::after
表示结束位置 这两个必须结合content属性使用
content属性里的内容不可被选中
q元素自带::before和::after
::first-letter
和::first-line
用法和效果
P::first-letter{
color: sandybrown;
font-size: larger;
}
P::first-line{
background-color: springgreen;
}
::selection用法和效果
P::selection{
background-color:red;
}
div::before{
color: aqua;
/* 单写一行这个color没有效果 */
content: 'abcde';
}
div::after{
content: 'abcde';
}
<div>hello hello how are you</div>
4、样式的继承
样式的继承:
1. 我们为一个元素设置的样式也会应用到其后代元素身上
2.发生在祖先和后代元素之间的
3.好处:
继承的设计是为了方便开发,
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上,
这样只需设置一次就可以让所有元素都获取此样式
4.注意:
并不是所有的样式都会被继承
比如 背景相关的 布局相关的等
在zeal里看inherit 是yes还是no
<style>
p{
color:aqua;
/* background-color: blue; */
}
</style>
<p>
我是一个p元素
<span>我是p元素里的span元素
<!-- 子元素 -->
<em>我是span里的em</em>
<!-- 后代元素 -->
</span>
</span>
</p>
5、选择器的权重
样式冲突
-使用不同选择器选中相同的元素,并且为相同的样式设置不同的值此时会发生样式冲突。
-发生样式冲突,应用哪个样式有选择器的权重(优先级)决定 (越具体,优先级越高)
权重:
内联样式 1000 1,0,0,0
id选择器 100 0,1,0,0
类和伪类选择器 10 0,0,1,0
元素选择器 1 0,0,0,1
通配选择器 0 0,0,0,0
继承的样式 无优先级
#box1{
background-color:coral
}
div{
background-color:yellow
}
.red{
background-color: red;
}
比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高则越优先显示
div#box1{
background-color:rgb(0, 255, 128)
}
分组选择器单独计算
选择器的累加不会超过其最大的数量级,类选择器在高也不会超过id选择器
如果优先级相同,则优先使用靠下的样式
.red{
background-color: red;
}
.d1{
background-color: purple;
}
继承样式无优先级
div{
font-size: 50px;
}
*{
font-size: 20px;
}
在某一个样式后面加一个!important ,则此时该样式会获取最大优先级,甚至超过内联样式(慎重使用)
.red{
background-color: red !important
}
.d1{
background-color: purple
}
6、像素和百分比、em和rem
长度单位:
像素
-屏幕(显示器)实际上是有一个一个小点点构成的
-不同屏幕的像素大小是不同的,像素越小的屏幕显示效果越清晰(类比毛孔和皮肤)
-所以同样的200px在不同的设备下显示效果不一样
.box1{
width:200px;
height: 200px;
background-color: coral;
}
百分比
-可以将属性值设置相对于父元素属性的百分比(父元素不严谨,后面会讲)
-好处:可以使子元素跟随父元素的改变而改变
/* .box2{
width:100px;
height:100px;
background-color:blue;
} */
.box2{
width:50%;
height:50%;
background-color:blue;
}
/* 上面这两个一样*/
em:
-em是相对于元素字体大小来计算的
-1em = 1font-size
-em会根据字体大小改变而改变
rem:
-rem是根据根元素html字体大小来计算
.box3{
font-size: 10px; /* 根据这里变化而变化 */
width:10em;
height:10em;
background-color:purple;
}
html{
font-size: 30px;/* 根据这里变化而变化 */
}
.box4{
/* font-size: 30px; */
width:10rem;
height:10rem;
background-color:rgb(0, 92, 128);
}
<body>
<div class="box1">
<div class="box2"> </div>
</div>
<div class="box3"> </div>
<div class="box4"> </div>
</body>
7、RGB值、HSL值
颜色单位:
在css中直接使用英文名来设置各种颜色
比如 red blue yellow green…
但是在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
#ffff00 --> #ff0
HSL值 HSLA值 (工业上多)
h 色相(0-360)(圆形调色板)
s 饱和度 颜色浓度(0%-100%)
l 亮度 颜色亮度 (0%-100%)