公告

(2) CSS

CSS

css的引入

1.cess的内联式引入 ---- 通过style属性,在标签上直接写样式

设置字体颜色: color

设置字体大小:font-size (文本默认大小16px)

设置字体类型:font-family

设置文本文字行高:line-height (行高默认是20px)

2.cess的嵌入式引入 ---- 通过style标签,在网页上嵌入样式表

通过标签选择器,设置div标签的样式

3.css的外联式引入---- 通过link标签,链接到外部样式表的页面中

在css文件中创建main.css文件,在其中写入css样式

设置字体不倾斜:font-style (normal不倾斜,italic倾斜)

em标签中的字体默认是倾斜的

设置em标签中的字体不倾斜

设置文本字体是否加粗:font-weight (bold加粗,normal不加粗)

使用b标签可以对标签中的文本加粗

使用css对span标签文本加粗

使用css让h2标签(默认加粗)不加粗

综合设置字体属性:font (顺序:是否加粗/字号/行高/字体)

设置h2标签内容不加粗/字体大小30px/行高40px/字体”微软雅黑”

去掉文本的下划线:text-decoration (none取消下划线,underline添加下划线)

a标签文本默认具有下划线

使用css去掉a标签文本的下划线

>

设置文字首行缩进:text-indent

首行缩进2个汉字 (一个汉字的宽度是20px)

设置文字对齐方式:text-align (默认是left靠左, center居中,right靠右)

选择器

标签选择器

将所有标签的margin和padding设置为0 (*匹配所有标签)

使用div标签选择器将div标签的内容设置为红色

id选择器

使用id选择其将第二/三个div设置为红色

类选择器

用类选择器将三个div内容变为红色

(因为id选择器的权重大于类选择,所以显示id选择器的颜色)

让第一个div加粗/变红/微软雅黑 (一个元素应用多个类选择器,中间用空格隔开)

层级选择器

现有2个p标签下有em标签

不使用层级选择器时,两个em标签都会编程粉红色

使用层级选择器(.duanluo em),只让第一个em标签有样式

层级选择器应用

无序列表(默认每个条目前有小黑点)

用类选择器去掉无序列表的小黑点

用层级选择器,设置该列表下每个li标签的样式(设置li的行高为30px)

用层级选择器,设置每个li的a标签的样式 (设置a标签没有下划线/微软雅黑/字体14px)

css应用:个人简历修饰完善

应用类选择器设置人物姓名

应用类选择器设置电话和邮箱

应用类选择器设置人物基本情况的标题

应用层级选择器设置人物基本情况中的各项信息

应用层级选择器设置每个条目名称加粗

让简历与页面上沿顶格

一个类选择器可以用在多个元素上面,一个元素可以使用多个类选择器(类选择器之间使用空格隔开)

组选择器:如果多个选择器都使用同一种样式,就可以使用组选择器(选择器之间用”,”隔开)

伪类选择器

鼠标放到list标签中的a连接上时,文字变金色/出现下划线

伪元素选择器(before/after) (要使用到content属性)

在标签文本前/后面插入文字

伪类插入的文字是不可以点击的

表格样式操作

创建一个四行五列的表,并用于类选择器设置其表格边框

利用层级选择器/组选择器定义表头(th)和表格(td)的边框

由于表格有边框,表也有边框,所有出现上述边框重叠
合并表格边框:border-collapse:collapse属性

让td中的文字居中

利用层级选择器给表头(th)加蓝色背景/白色字体

盒子模型边框(border)设置

利用类选择器设置上盒子的上边框:宽10px/黑色/实线(solid)

将盒子边框的上述设置简写成一句话,且设置左边框虚线/有边框点线/下边框实线

四个边框格式统一的简写如下

盒子模型内衬(padding)设置

在上述div中写入文字

为该div盒子设置上下左右的padding,结果div盒子被撑大了

将上述设置四边的padding合写成一个

设置3个值的padding(1:上,2:左右,3:下)

设置2个值的padding(1:上下,2:左右)

设置1个值的padding(1:上下左右都相同)

盒子模型外边缘(margin)设置

设置上边缘宽度为50px (margin-top)

设置左边缘100px

在复制一个div盒子,可见margin-top为50px

margin-top塌陷: 现在设置margin-bottom为100px,最终两个div盒子间距为100px(并非150px,因为塌陷,以较大margin-bottom为间隔)

对于这种margin-top塌陷的情况,垂直的两个盒子,可以只设置margin-top或者margin-bottom,不要同时设置
设置四边margin值一样的简写:

通过设置margin来设置div盒子水平居中(上下自定义,左右auto)

盒子尺寸

利用组选择器和类选择器设置三个盒子(第1个只有margin;第2个只有margin/border;第3个margin/border/padding全有)
 盒子的真实尺寸:
		真实高度: height + 上下padding值 + 上下border值
		真实宽度:width + 左右padding值 + 左右border值

练习:利用盒子模型制作如下标题

方法1:利用div盒子+padding/border来做(使用line-height行高来做垂直居中)

方法2:利用div盒子+ border来做(使用line-height行高来做垂直居中)

margin-top塌陷(垂直margin合并)的应用 --- 让上下段落之间的间隔相等

创建一个div容器包含多个div盒子(盒子内有文字)

不设置容器的高度,根据容器中div盒子的内容自动撑开容器

只设置容器中div盒子的margin-top上间距为30px

只设置容器中div盒子的margin-bottom下间距为30px

同时设置上下间距(margin-top/margin-bottom)

解决margin-top塌陷的方法,在容器中的div盒子上加个边框(border)

创建一个容器,里面包含一个div盒子

让div盒子相对于容器垂直居中的方式一: line-height(失败)

让div盒子相对于容器垂直居中的方式二:设置容器的padding内衬(成功)

让div盒子相对于容器垂直居中的方式三:设置div盒子的margin外边距(失败--->margin-top塌陷)

针对方式三,这种margin-top塌陷的bug的解决方式1:给外部的容器设置一个边框(border) --- 以前的方法

针对方式三,这种margin-top塌陷的bug的解决方式2:给外部的容器设置一个(overflow:hidden)属性 --- 次方法

针对方式三,这种margin-top塌陷的bug的解决方式3:使用伪元素 --- 高大上的方法(现在通用)
(给容器另外设置一个伪类,在伪类中实现类似于给容器加边框的那种方法)

注意:解决margin-top塌陷问题---设置该clearfix类放在公共类中,以后谁要解决margin-top塌陷,就直接添加上该类就可以了

元素溢出 ---- 设置父元素显示溢出子元素的方式---父元素的overflow属性

创建一个容器,该容器包含一个子div块元素,其内容超出该容器

overflow:visible --- 让父元素显示子元素溢出的部分

overflow:hidden --- 让父元素隐藏子元素溢出的部分

overflow:scroll --- 让父元素设置滚动条(一直存在)让用户拉取显示子元素溢出的部分

overflow:auto ---让父元素自动设置滚动条(如子元素溢出才出现滚动条)让用户拉取显示子元素溢出的部分

overflow:inherit --- 继承父元素对子元素溢出部分的显示方式

块元素

块元素的特点之一:如果没有设置宽度,默认宽度为父级宽度的100%

既然div作为块元素占据了父级宽度的100%,那么就可以设置div中文字居中(text-align:center)

块元素的特点之二:即使块元素设置了宽度,它也会占据一行,但实际宽度为其设置的宽度
使用类选择器分别设置第二/三个div的宽度

块元素支持全部样式

内联元素

内联元素宽高由内容决定,盒子并在一行

内联元素不支持宽高设置(宽高有内容撑开决定)

内联元素支持margin-left(不支持margin-top/margin-bottom)

内联元素支持margin-right (不支持margin-top/margin-bottom)

内联元素不支持margin-top/margin-bottom

内联元素支持padding-left/padding-right(不支持padding-top/padding-bottom) (因为padding属于盒子里面的内容)

内联元素不支持padding-top/padding-bottom

出现了一个bug,并没有真正撑开padding,只是把背景色撑开了

把字体调大,即内容把盒子撑大

上述盒子之间的间距是由于html代码换行导致的,如果html代码不换行就可以解决上述盒子间产生间距的问题
解决内联元素由于HTML代码换行而产生盒子间距的方法1:HTML代码不换行

解决内联元素由于HTML代码换行而产生盒子间距的方法2:内联元素父级的字体设为0,再重新设置自身的字体大小

内联元素相对父级的对齐方式设置:用内联元素父元素的text-align设置水平对齐方式,line-height(行高)设置垂直对齐方式

通过父元素的text-align属性设置内联元素水平居中

通过父元素的line-height(行高)属性设置内联元素垂直居中

内联块元素

块元素虽然支持全部样式,但不能排列在一行; 内联元素虽然能排在一行,但是不支持margin-top/bottom padding-top/bottom; 于是我们希望有一种元素能够排在一行,还能支持全部样式 ---- 内联块元素
内联块元素虽然结合了两者的优点,但是它仍然有内联元素(代码换行,盒子产生间距)的问题,使用内联元素解决盒子间距的方式依旧可以解决这个问题
实际中没有内联块元素,但是我们可以通过display属性将其他元素转化为内联块元素
构造容器,容器中装有多个内联元素

内联元素添加display:inline-block属性,变成内联块元素,从而使其宽高设置生效,且元素可以排在一行(但是代码换行,盒子产生间距)

内联块元素支持宽高设置

内联块元素:如果没有设置宽高,其宽高有内容决定

内联块元素支持margin-top/margin-bottom

内联块元素支持padding-top/padding-bottom

为了后续操作,将内联块元素左右margin设置为0,呈现代码换行造成盒子间的间距

解决代码换行造成盒子间距的方式一:代码不换行

解决代码换行造成盒子间距的方式二:设置父级字体大小为0,重新在子级中设置字体大小

让内联块元素中的文字垂直居中 --- line-height(子级行高设置成本身height的高度)

添加text-decoration:none属性去掉a连接下划线

内联块元素案例实操:制作如下菜单

制作完成,为了炫酷,可以添加hover

文档流

创建三个div盒子,用组选择器设置其相同属性

上述是按照html代码的中div标签的顺序显示的,这种按照代码书写顺序显示就是文档流,使用浮动/定位等方式能够打破这种文档流

浮动

浮动分为左浮动和右浮动两种

相邻浮动的块元素可以并在一行,超出父级宽度就换行

浮动让行内元素或块元素自动转化为行内块元素

“文字绕图”----浮动元素后面没有浮动的元素会展局浮动元素的位置,没有浮动元素内的文字会避开浮动的元素,形成文字绕图的效果

浮动的bug:父元素没有设置height(高度)时,父元素内整体浮动的子元素无法撑开父元素,需要清除浮动

对比: 父元素没有设置height(高度)时,父元素内的行内块元素可以撑开父元素(对应那些内容不定,需要根据内容决定容器高度的情况,可以使用行内块元素来做)

父元素没有设置height(高度)时,父元素内整体浮动的子元素无法撑开父元素,需要清除浮动

从上面的例子可以看到:(1)父元素不设置高度时,子元素如果设置了浮动,那么子元素是无法撑开父元素的/(2)浮动的元素之间没有垂直margin合并

解决上述问题的方式: 清除浮动(3种方法)

方法1:父元素属性增加overflow:hidden (解决margin-top塌陷也可以使用这种方法)

方法2:在最后一个子元素后加一个空的div,给它设置样式属性clear:both(不推荐! clear:both即清除两边浮动的意思)

方法3:使用成熟的清楚浮动样式clearfix (推荐) (清楚margin-top塌陷的时候也推荐使用该方法)

把清除margin-top塌陷和清除浮动的clearfix类合并成一个clearfix类方便使用

清除margin-top的clearfix类

清除浮动的clearfix类

合并后兼具两种功能的clearfix类

内联元素转化成浮动之后,不会因为代码换行产生间距

对比:内联元素直接转化成行内块元素会因为代码换行产生间距

内联元素通过浮动转化成浮动之后,不会因为代码换行产生间距

小结:行内元素通过浮动方式转化成内联块元素与行内块元素直接转化成内联块元素的区别:
(1) 它有浮动特定
(2) 它不会因为代码换行产生间距

相对定位 (定位:打乱文档树排列的另一种方式)

相对定位 + 偏移量

小结:相对定位是相对于自身原来的位置进行偏移定位(飘起来,如上1飘在在2上面),自己原来的文档流位置还在,其他元素不能占据

绝对定位

小结:相对定位是相对于上一个设置了相对(relative)或绝对(absolute)定位的元素来进行定位,如果找不到就相对于body网页的位置进行偏移定位(飘起来),自己原来的文档流位置不在,被其他元素占据

现在,想让上述div相对于其父级容器定位(而不是body)

一般情况下,为了不改变父级在整个文档流中的定位,我们通常设置父级为相对定位,因为设置父级为绝对定位会改变父级在文档流中的位置

固定定位(fixed)

设置固定定位的元素会脱离文档流,不占据文档流的位置,相对于浏览器窗口进行定位(也是飘在上方)

即使父级有绝对/相对定位, 子级设置固定定位后也是相对于浏览器窗口进行定位

定位元素的特定:绝对(absolute)/相对(relative)定位的块元素或行内元素会自动转化为行内块元素

设置定位层级 ---- z-index

background背景设置

background-color设置背景色

Background-image设置背景图片

img标签插入图片与设置背景图片这两张显示图片方式的区别

background-repeat 设置背景图片如何重复平铺

**background-position 设置背景图的位置(要配合background-repeat:norepeat) **

表示方式一: 用二维方位词组合表示((left center right) (top center bottom))

表示方式二: 用数字偏移量表示

background-position使用案例:让背景定位显示一张大图的某个部分

background-attachment 设置背景图片是否随着页面滚动条滑动(不常用)