菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 冯文直-前端预科-20221111 [打印本页]

作者: 。5962 时间: 2022-11-11 22:39
标题: 冯文直-前端预科-20221111

一、今日学习内容：

CSS的复合选择器

1、是建立在基础选择器之上，对基础选择器进行组合形成的

2、可以更加准确、高效的选择目标元素

3、常用的复合选择器

①后代选择器：选择父元素里面的子元素

语法：1、元素1元素2{样式声明}；2、元素1是父级，元素2是子级 3、元素2是元素1的后代 4、元素1和元素2可以是任意的基础选择器

②子选择器：只能选择某元素最近的一级子元素

语法：1、元素1>元素2{样式声明}；2、元素1和元素2之间要用大于号>隔开 3、元素2只能是元素1的亲儿子

③并集选择器：可以选择多组标签，同时为他们制定相同的样式，通常用于集体声明

④伪类选择器

1）链接伪类选择器

:link选择未被访问过的链接

:visited选择所有已经被访问的链接

:hover选择所有链接鼠标悬停时候

:active选择所有鼠标点击时的状态

2）焦点伪类选择器

:focus

语法：input:focus{样式声明}

一般焦点伪类选择器都是和input标签来联合使用

二、CSS元素显示模式

1、是元素在网页的显示状态

2、分类

①块元素

独占一行

宽度默认的是父级宽度的100%

本身可以是容器或者是盒子，里面可以放其他的行内或者块级元素

高度和宽度都可以设置，内外边距也可以控制

常见的块元素： h1-h6 div p ul ol li等

文字类的元素内不能使用块级元素

②行内元素

相邻的行内元素会在一行上显示

宽高设置都是无效

默认的宽高是本身内容的宽高

行内元素只能容纳文本或者其他行内元素

相邻的行内元素之间会有一点空隙

常见的行内元素： a strong em span ins等

链接里面不可以再放链接；如果a标签内要放一个块级元素，要将a标签的显示模式转化为块级更安全

③行内块元素

相邻的行内块元素在一行上显示，并且有空白缝隙

默认宽度是它本身内容的宽度

高度和宽度都可以设置

常见的行内块元素：input img td

3、元素显示模式的转换

转换为块级元素：display:block;

转换为行内元素：display:line;

转换为行内块元素：display:inline-block;

三、CSS的背景属性

1、背景颜色：background-color

属性值：颜色单词/十六进制/rgb，默认值是transparent（透明色）

2、背景图片：background-image

属性值：url(图片路径)

3、背景平铺：background-repeat

repeat默认值，代表背景图片在横向和纵向都平铺

no-repeat不平铺

repeat-x在横向上平铺

repeat-y在纵向上平铺

4、背景图片定位：background-position

精确的像素单位

方位名词：没有先后顺序top center bottom left right

5、背景图片滚动：background-attachment

scroll默认值，图片随着屏幕滚动

fixed图片不跟随屏幕滚动

6、背景的复合写法

background:background-color background-image background-repeat background-attachment background-position

7、背景半透明

语法：background:rgba(0,0,0,0.3)

a是alph的缩写，代表透明度，取值范围0-1；习惯将0.3写为.3,0可以省略；

四CSS的三大特性

1、层叠性

相同的选择器设置相同的样式，此时新的样式会覆盖掉旧样式

原则：样式冲突的时候遵循就近原则；样式不冲突的时候不会层叠

2、继承性

在css中，子标签会继承父标签的某些样式

可以被继承的属性：text fout- line 以及color

3、优先级（权重）

①如果选择器相同，执行层叠性；如果选择器不同，执行优先级（根据选择器的权重来执行）

②选择器及权重

继承或者*（0,0,0,0）

元素（标签）选择器（0,0,0,1）

类选择器、伪类选择器（0,0,1,0）

ID选择器（0,1,0,0）

行内样式（1,0,0,0）

!important（∞）

二、今日问题：无

三、解决方案：无

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)