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%）

【尚硅谷前端html+css】02_css相关推荐

前端 | （九）尚品汇实操练习 | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
前端 | （十一）CSS3简介及基本语法（上） | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
前端 | （二）各种各样的常用标签 | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
尚硅谷前端视频总结（二）
尚硅谷前端视频总结(二) 原文链接动画animation CSS animation 属性是 animation-name,animation-duration, animation-timing- ...
尚硅谷前端项目开发笔记
尚硅谷前端项目开发笔记 B站视频直达,这个项目亮点在于所有 API 请求都并非在组件内编写,而是在组件内使用this.$store.dispatch() 派发任务,再由 Vuex(actions.mu ...
尚硅谷前端HTML-CSS /HTML
尚硅谷前端HTML-CSS/HTML 软件分类系统软件应用软件游戏软件软件:客户端服务器. 客户端 –文字客户端 –图形化界面 C/S – 网页. B/S 优点不需要安装.无需更新跨平台 ...
尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS
跟着尚硅谷老师的练习,记录一下自己做的内容,查漏补缺. 目录一.京东左侧导航栏 1.第一次自己做的代码(未看老师讲解视频前做的): 总结: 2.看完老师视频后跟着写的代码: 注意点及总结删除行内元 ...
尚硅谷前端框架vue语法(二)
一.class绑定(会动态改变的class需要用到class绑定) 写法:class="xxx" xxx可以是字符串.对象.数组. 字符串写法适用于:类名不确定,要动态获取. ...
Less学习笔记（尚硅谷前端less教程）
一.快速入门 Less是一门CSS预处理语言,它扩展了CSS语言,增加了变量.Mixin.函数等特性,使CSS更易维护和扩展. Less可以运行在Node或浏览器端. Less编译工具: Koala ...

【尚硅谷前端html+css】02_css