怎样修改网页滚动条颜色_Part 1 · HTML5 网页开发-02

最新推荐文章于 2024-05-08 10:11:08 发布

weixin_40001025

最新推荐文章于 2024-05-08 10:11:08 发布

阅读量700

点赞数

文章标签：怎样修改网页滚动条颜色网页元素和元素之间有空白边框

Part 1 · HTML5 网页开发-02

第二章 CSS 核心样式、H5 + C3 新特性

第一节 CSS核心样式

1、CSS核心样式 font-weight

CSS常用样式属性： font-weight
作用：font-weight 设置字体的粗细

属性值	说明
normal	默认字体大小，标准版
bold	粗体字，b、strong的默认值
bolder	定义更粗的字体
lighter	定义更细的字体
100	定义由细到粗的字符
200
300
400	400等同于normal
500
600
700	700等同于bold
800
900
inherit	规定应该从父元素继承字体粗细

2、CSS常用样式 font-style

作用：设置文字的风格

属性值	说明
normal	正规字体
italic	设置斜体文字，主要用于英文
oblique	设置倾斜文字，只是将文字倾斜，和字体无关

3、CSS常用样式 line-height

作用：line-height设置行高，font-size设置字体大小之后，有默认的行高，如果改变默认行高，需要line-height来修改

属性值	说明
px像素值	设置行高具体的像素值
百分比数值	设置本身字体的百分比值，100%就是原本大小，200%就是2倍字体大小

行高是文字的真正占有的高度 内部文字是垂直居中在行高中显示的

4、font综合属性

回忆5个字体单一属性： font-family 、font-size 、font-weight、 font-style 、line-height
为了减省代码量，提高书写效率，如果某字体被定义多个属性，可以采用综合属性写法

硬性记忆3种写法:

同时设置字号、字体（字号必须在前面，字体在后面，不能颠倒）

例：p{font： 14px "宋体"; }

同时设置字号、字体、行高（书写顺序必须是行高、字号、字体，且行高和字体之间用/隔开）

例：p{font： 14px/28px "宋体"; } 字体14px,行高28px，字体为宋体

同时设置字号、字体、行高、加粗、斜体（书写顺序必须是行高、字号、字体在后面，且行高和字体之间用/隔开，加粗、斜体写在前面，加粗、斜体可以换顺序

例：p{font：hold italic 14px/28px "宋体"; } 或 p{font： italic hold 14px/28px "宋体"; }

5、css文本样式 text-align

text-align 文本对齐

属性值	说明
left	整个文本向左对齐
right	整个文本向右对齐
center	整个文本居中

6、css文本样式 text-decoration

text-decoration 文本装饰（加或不加线条）

属性值	说明
onoe	没有修饰
overline	上划线
line-through	中划线，删除线，del标签的默认值
underline	下划线

7、css文本样式 text-indent

文本缩进text-indent

属性值	说明
px单位	表示首行缩进多少px单位像素（按像素值缩进平时不太常用）
em单位	倍数，自动参考一个文字的大小宽度，以文字大小宽度为字符来缩进，好处：根据文字变大而变大，文字变小而变小，2em实现首行缩进2个字符
百分比单位	不太常用，参考的盒子width宽度，按盒子宽度的百分度来缩进

属性值分正负值，正值向右缩进，负值向左缩进

8、盒模型

盒模型

概述：盒模型也称为框模型，包含5个属性： width 宽 height 高 border 边框 padding 内边距 margin 外边距（盒子跟外部盒子之间的边距）
常见盒模型区域：

书写元素内容区域：width+height
盒子实体化区域：width+height+padding+border
盒子实际占的位置：width+height+padding+border+margin

注：margin是盒子跟盒子之间的距离，就像是人与人之间的距离，不属于盒子实体化区域

9、CSS常用样式-盒模型属性 width

属性值	说明
auto	默认值，浏览器根据实际情况计算宽度
px	像素值定义的宽度（固定值）
%	参考父元素宽度width的百分比来定义的宽度

注：如果元素不加width属性，默认就是auto，浏览器会根据不同元素的特点来自动计算实际的宽度，自动适应不同的浏览器 例如：

<div>等需要独占一行的元素，不设置width时，它的宽度值会自动撑满父元素的width区域
<span>等不需要独占一行的元素，不设置width时，它的宽度根据元素内部的内容来决定，内容撑开有多宽，就是多宽
<body>元素比较特殊。不需要设置width属性，宽度会自动适应浏览器的宽度

10、CSS常用样式-盒模型属性 height

属性值	说明
auto	默认值，浏览器根据实际情况计算高度
px	像素值定义的高度（固定值）
%	参考父元素宽度height的百分比来定义的高度

注：如果元素不加height属性，默认就是auto，浏览器会自动计算出高度（元素内部内容实际撑开的高度，元素的高度自适应内部内容撑开的高度）

11、CSS常用样式-盒模型属性 padding

作用：设置元素的内边框，就是边框内部到宽高区域之间的距离
特点：能渲染背景

属性值	说明
px	像素值定义的距离

padding 是复合属性，可以把上、下、左、右四个方向混合着写，也可以根据内边距的方向不同分为四个方向的单一属性如（单一属性的写法）：

padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;

复合型写法（定义顺序：逆时针）：

padding:10px 20px 30px 40px;  //(上边距10px，右边距20px, 下边距30px, 左边距40px)
padding:10px 20px 30px;       //(上边距10px，右边距20px, 下边距30px, 左边距20px)
padding:10px 20px;            //(上边距10px，右边距20px, 下边距10px, 左边距20px)
padding:10px;                 //(上边距10px，右边距10px, 下边距10px, 左边距10px)

复合属性和单一属性可以叠加书写如：

padding:10px;
padding-left:20px;

意思为：左边距20px，其他所有边距10px. 注：单一属性必须写在复合属性后面，才能层叠掉复合属性中重复的部分

12、CSS常用样式-盒模型属性 border

border盒模的边框

属性值	说明
width	线的宽度
style	线的形状
color	线的颜色

写法：属性值之间用空格分开例：border:10px solid red;

一、border（按属性类型划分）可以分成三个单一属性

border-width 定义边框四边的宽度，四值写法类似padding
border-style （属性值：实线solid 虚线dashed 无边框none 凹陷槽3D效果groove3D效果 ridge 等等）3D效果容易出现兼容问题，四值写法类似padding，每条边可以设置不同属性值，中间用空格
border-color 四值写法类似padding，四边可以设置不同颜色

二、border（按方向划分）可以分成四个单一属性

border-top:10px; border-right:10px; border-bottom:10px; border-left:10px;

三、border（按照方向+类型进一步细分）

书写方法： border-方向+类型（必须是方向写在前面） border-left-color:10px red;

13、CSS常用样式-盒模型属性 margin

作用：设置盒子与盒子之间的距离
特点：不能渲染背景
属性值：px 应用书写方式和padding一样

14、盒模型扩展属性-清除默认样式

举例：删除默认的内外边距

标签选择器并集方式

div,p,h1,h2,h3{
           margin:0px;
           padding:0px;
}

2. 通配符方式

*{
       margin:0px;
       padding:0px;
}

遇到不同的标签文字样式，清除的属性值会不同，根据实际情况来

15、盒模型扩展属性-height的应用

盒子高度的应用根据不同的需求，盒子的高度可以设置也可以不设置（实际工作中，根据项目设计来定）如果不设置，会根据标签内部内容高度自动撑开如果设置，盒子高度就固定死了，后面同级元素会紧挨着加载在设置了盒子固定高度的情况下，里面的文字太多的时候，盒子是装不下的，就会出现文字溢出现象

可以通过overflow属性，对溢出的文字部分进行显示效果的设置

属性值	说明
visible	默认值，溢出部分可见的（全部溢出在页面）
hidden	把溢出的文字部分进行隐藏，超过盒子边框的全部被隐藏
scroll	水平+垂直方向加滚动条，隐藏溢出部分，可以拖动滚动条查看
auto	自动的，如果没有溢出就正常显示，如果溢出，溢出的方向就自动出现滚动条

16、盒模型扩展属性-居中

文本居中：text-align：center; （无论单行或多行都可以设置）

一、盒子内的文本居中：

单行文本垂直居中：让文字行高line-height等于盒子的高度
多行文本垂直居中：设置元素高度自适应或者高度正好等于多行文字撑起来的行高，然后设置盒子上下内边距padding为相同值，实现多行文本垂直居中

二、元素垂直居中

让父元素内嵌套的元素垂直居中，和多行文本垂直居中的方式类似，设置父元素高度自适应，子元素高度自动撑开父元素高度，给父元素设置上下内边距padding为相同值

三、元素水平居中：

针对类似于<div>样式上必须独占一行的盒子，如果子盒子低于父盒子的宽度，可以设置子盒子的margin值，水平方向的值都设置成auto，自动撑满整个父元素除了子元素宽度外的剩余区域

注：auto只有在水平方向有作用，靠左右两边撑满剩余区域，达到水平居中效果

实际工作中，可以有多种方法可以达到效果

17、盒模型扩展属性-父子盒模型

父子盒模型：父子盒子里面可以装一个或者多个儿子盒子
条件：父元素的width≥所有子元素的width+padding+margin+border 注意： 如果不满足条件，父盒子里面多余的子元素要么溢出父盒子，要么跟其他的儿子不在一行，会掉到下一行

18、盒模型扩展属性-margin塌陷

垂直方向的margin，两个元素的margin边相遇时，数值小的塌陷到数值大的那一边，不是两个margin值相加水平方向的margin，不会有塌陷父子元素也会出现塌陷现象，同理，小的值塌陷到大的值那边

解决margin塌陷的方法：

同级元素：2个元素遇到塌陷问题，只需要设置其中一边的margin值就可以了，不用两边都设置
父子元素：让父子的两边不要相遇，用其中一个padding或者border将间距隔开

19、标准文档流、显示模式display

HTML（是一种标准的文档流文件）
标准的文档流特点有2种方式体现：微观现象+元素等级微观现象：空白折叠现象、自动换行现象、文字类元素若排在一行，会出现高低不齐，底边对齐现象 元素等级： 标准流中，大部分元素是区分等级的，几种常见的加载级别：块级元素、行内元素、行内块元素

块级元素：大部分容器级标签包括p标签都是块级元素，比如<div>、<h1>
行内元素：大部分文本级标签，比如<span> <a> <b>标签
行内块元素：比如<img><input>

标准文档流：指元素在排版布局过程中，元素默认自动从左至右，从上至下的流式排列方式。前面内容发生变化，后面内容的位置也发现变化标准文档流中，大部分元素是区分等级的，几种常见的加载级别：块级元素、行内元素、行内块元素 块级元素: 可以设置长宽高，并且独占一行，不能与其他标签并列一行，如果块级元素不设置宽度，会自动撑满夫级的width区域，不设置高度，会被内容自动撑开 行内元素: 行内元素不能正常加载高度和宽度，行内元素可以跟其他行内或者行内块元素拍成一行显示 行内块元素: 可以设置宽度和高度，可以与行内的块元素拍成一排显示

20、显示模式属性display

属性	作用
block	把元素设置成块级元素加载
inline	把元素设置成行内元素加载
inline-block	把元素设置成行内块模式加载
none	表示隐藏标签内的内容以及标签，让出原有标准流的位置

注意： display更改显示模式并没有改变标准流本质性质，页面还是从上往下加，为了实现更多的界面布局效果，需要脱离标准流的限制

脱离标准流的方法：浮动、绝对定位、固定定位

21、浮动的定义

浮动（一种非常重要的布局属性）

属性名	属性值
float	left
float	right

22、浮动依次贴边

（父元素足够宽，所有子元素会按照HTML书写顺序，依次向右或者向左贴边展示，当子元素总宽大于父元素时，多余的子元素会向下一排掉，然后贴上下一排最近的边）

23-25、浮动的性质-margin塌陷现象

浮动的性质（浮动元素没有margin塌陷，margin塌陷现象出现在标准流中，因为浮动元素已经脱离了标准流，所以不会有margin塌陷现象）浮动的元素会让出标准流的位置，留给下一个同级元素占位
字围现象：同级元素中，前面元素浮动，后面元素不浮动且元素内有很多文字，这种情况会出现字围现象。（后面元素内的位置围绕前面元素显示）

浮动依次贴边的应用以及问题 实际应用中，浮动会存在一些显示问题

26-27、清除浮动的方法

解决浮动存在的问题的方法：

设置父元素高度和子元素一样高（方法有局限性，治标不治本）
清除浮动影响，clear属性，作用（清除标签元素自身受到的前面浮动元素的影响）

属性名	属性值	作用
clear	left	清除前面元素左边浮动带来的影响
clear	right	清除前面元素右边浮动带来的影响
clear	both	清除前面所以浮动带来的影响

缺点： 解决不了父元素高度自适应

3. 隔墙法

外墙法：在两个父级元素之间加个<div> 例如：

.clear{
    clear:both;
<div class="clear"></div> 
}

缺点： 解决不了父元素高度自适应

内墙法：在父元素内部，所以浮动子元素后加个空的<div>,标签高度设置为0，添加clear属性能解决父元素高度自适应

缺点： 浮动是CSS里面的样式属性，用HTML标签来辅助解决，会造成HTML结构冗余

伪类清除浮动影响法伪类法清除浮动的本质和内墙法一致，只是把HTML标签的书写改成了CSS代码书写内墙书写方法：伪类选择器：通过选中的标签添加伪类，去选择标签的某个状态或者位置 :after 此伪类表示选中的标签内部的最后的位置注意（:after的前面要紧跟着7类选择器）

通常情况： 将伪类添加给一个选中父盒子的选择器后面，一般给需要给清除浮动的父盒子设置一个clearfix的类名

例:(可以强行记忆)

.clearfix:after {
               content: "1";       添加一个文字内容
               display: block;     将文字转化为块元素
               height: 0;          将盒子高度固定为0，避免影响父盒子的高度
               clear: both;        清除前面浮动的影响
               visibility: hidden; 将创建的元素隐藏并继续占有位置
}

溢出隐藏，overflow属性这是一个小偏方，和清除浮动没啥关系，但是很好用，不添加任何清除浮动属性的情况下，就在父盒子里面加一条overflow：hidden，就解决了浮动影响问题例如：

.box {
         width: 800px;
         margin-bottom: 10px;
         border: 10px solid rgb(220, 243, 15);
         overflow: hidden;
   }

总结： 如果父元素的高度是固定的，建议用height属性解决如果父元素高度需要自适应，建议使用overflow属性解决浮动问题

28、a标签伪类

伪类的概念：伪类和类的权重是一样的伪类和类有一定的相似处，也存在明显的区别写法不同只有用户触发了对应的行为，伪类的样式才会立即记载例如a标签的伪类状态，书写顺序如下（改顺序会影响加载效果）

a:link{
   color:gray;            访问前的状态，a标签内容显示为灰色
}
a:visited{                 
   color:pink;             访问后的状态，a标签内容显示为粉色
}
a:hover{
   color:red               鼠标悬浮状态，a标签内容显示为红色
}
a:active{
   color:yellow;          鼠标点击的状态，a标签内容显示为黄色
}

实际应用中，一般把访问前和访问后的状态设置成一样的效果(保证页面的统一性) 例如：

a:link,a:visited{
   color:#666;
}
a:hover{
   color:#333;
}

29、CSS常用属性-背景样式属性

背景样式属性为综合属性，和font类似的，也可拆分成单一属性

属性名	作用	属性值
background-color	背景颜色,border及border以内加载
background-image	背景图片,border及border以内加载	url()
background-repeat	背景重复	设置成no-repeat时，border以内加载图片
background-position	背景定位	单次表示法、像素表示法、百分比表示法，属性值中间用空格分隔
background-attachment	背景附着,设置背景图片是否随着页面或者盒子滚动而滚动	scroll(滚动的)、fixed(固定的，固定在浏览器窗口的某个位置)

综合写法: 例：（五个属性可以颠倒顺序）

body{
background:url(image/图片.jpg) no-repeat center top scroll #333;
}

注意：

如果属性值没有设置完全，没有设置的单一属性会按照默认值加载
如果想层叠综合属性的一部分，其他属性保持不变，最好使用单一属性进行层叠

背景样式的场景应用

背景图替换标签的插入图，用css的background-image 替换html中的<img>
padding区域背景图（根据实际情况灵活应用)
精灵图（又称CSS雪碧、css SpritesS），网上自行制作将网页中所有需要到的小图片放在一张图里面.png 再根据背景定位选择需要记载的一部分进行定位

36、CSS3新增背景样式属性-透明度

属性名	属性值
background-color	rgba，在rgb基础上增加了alpha(透明属性，取值范围在0-1之间)
background-size	px值、百分比、cover、contain

多背景添加，background-image 写两个url中间用逗号隔开

37、定位属性position

属性名	属性值
position	ralative 相对定位
position	obsolute 绝对定位
position	fixed 固定定位

作用：设置定位元素，它需要根据某个参考元素发生位置的偏移

38、相对定位：

不会脱离标准流，不会让出自己原来的坑位给其他元素参考元素是自己，通常按left top 来书写定位
场景应用：导航条应用

39-41、绝对定位：

会脱离标准流，设置了绝对定位的元素，会让出自己原来占的坑给其他元素使用参考元素是距离最近的有定位的祖先元素，如果祖先元素没有定位，参考<body>
参考<body>时如果top参与定位，参考点是body页面的左上角left和右上角right 如果buttom参与定位，参考点是body页面首屏的左下角left顶点或右下角顶点right

注意： 实际工作中，尽量不以<body>为参考元素，因为不同浏览器中，绝对定位的元素位置是不同的通常使用子绝父相

42、固定定位：

会脱离标准流，让出自己的坑位参考元素为浏览器窗口（浏览器窗口的四个顶点）

43、定位的实际应用-压盖效果

所有的定位类型都可以实现压盖效果，常用绝对定位制作压盖效果
定位的实际应用---居中效果用百分比写法例：

        a {
            display: block;         
            width: 50px;
            height: 20px;
            background-color: pink;
            position: absolute;
            left: 50%;  距离左边50%距离
            top: 50%;  距离上边50%距离
            margin-left: -25px; 往回拽元素宽度的一半
            margin-top: -10px;往回拽元素宽度的一半
        }

44、定位压盖顺序

z-index属性定位的元素不区分定位类型，都会去压盖标准流或浮动元素如果都是定位元素，在HTML中后写的定位压盖先写的定位自定义压盖顺序z-index属性，属性值：数字属性值大的会压盖属性值小的，设置了属性值的会压盖没设属性值的 z-index属性只能设置给定位的元素才能生效，如果给没有定位的元素设置，不会生效

注意： 子级盒子，“从父效应”

静态轮播图布局

代码练习

第二节、HTML5

1、HTML5概念

狭义概念：HTML的修改升级版，增加了很多新的语义特性
广义概念：CSS+javascript+html总称优势很多缺点：IE9以下的浏览器不兼容

2、HTML5新增语义化标签

把网页划分成几块有更对语义化的模块

<header> 头部标签
<nav> 导航标签
article> <aside> 主体标签
<section>
<footer> 尾部标签

注意：

这种语义化标签主要针对搜索引擎的
这些新的标签在页面中可以使用多次
在IE9中，需要把这些元素转换为块级元素

移动端更喜欢这些标签

3、HTML5中的`<audio>`音频标签

属性名	属性值	说明
autoplay	autoplay	自动播放
controls	control	向用户显示控件，比如播放按钮（需要设置才会显示）
loop	loop	音频结束时，重新开始播放
preload	preload	随着页面加载同时加载音频（若用了autoplay，则忽略该属性
src	url	要播放的音频的url

注意（音频格式）存在浏览器兼容性问题

格式	MIME-type	IE	Firefox3.0	Opera10.0	Chrome3.0	Safari3.0
Ogg	audio/mpeg		√	√	√
MP3	audio/ogg	√			√	√
Wav	audio/wav		√	√		√

实际应用中，考虑到兼容问题，需要多些几个格式，提高用户体验例如：

<audio controls>
     <source src="media/song.mp3" type="audio/mpeg">
     <source src="media/song.ogg" type="audio/ogg">
     您的浏览器版本过低，不支持音频播放，建议升级
</audio>

4、HTML5中的`<video>`视频标签

属性名	属性值	说明
autoplay	autoplay	自动播放
controls	control	向用户显示控件，比如播放按钮（需要设置才会显示）
loop	loop	音频结束时，重新开始播放
preload	preload	随着页面加载同时加载音频（若用了autoplay，则忽略该属性
src	url	要播放的音频的url
width	像素值	设置播放器宽度
height	像素值	设置播放器高度
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

注意（视频格式）存在浏览器兼容性问题

格式	MIME-type	IE	Firefox	Opera	Chrome	Safari
Ogg	video/ogg		3.5+	10.5+	5.0+
MP4	video/mp4	9.0+			5.0 +	3.0+
webm	video/webm		4.0+	10.6+	6.0+

5、HTML中的`<input`输入标签

例：

<form>
        请输入邮箱：<input type="emal"><br/>
        请输入url地址：<input type="url"><br/>
        请输入日期： <input type="date"><br/>
        请输入时间：<input type="time"><br/>
        请输入月份：<input type="month"><br/>
        请输入周数：<input type="week"><br/>
        请输入数字：<input type="number"><br/>
        滑动条<input type="range"><br/>
        请输入手机：<input type="tel"><br/>
        搜索框：<input type="search"><br/>
        颜色：<input type="color"><br/>

        <input type="submit">
    </form>

6、HTML5中新增可输入标签 `<datalist>`

城市:<input type="text" list="guanlian">
        <datalist id="guanlian">
            <option value="重庆">重庆.渝中区</option>
            <option value="重庆">重庆.永川区</option>
            <option value="成都">成都.武侯区</option>
            <option value="成都">成都.锦江区</option>
            <option value="上海">上海.黄浦区</option>
            <option value="上海">上海.浦东区</option>
            <option value="北京">北京.海定区</option>
        </datalist>

7、HTML5中新增表单属性

属性名	属性值	描述
required	required	定义了某属性的表单控件内的内容必须填写
placeholder	提示文本	设置表单的提示信息（如果之前有设置默认值，就不显示，不存在默认值，就显示该属性设置的提示信息
autofocus	autofocus	自动聚焦属性，常用在搜索框里面（自动闪烁的光标），通常一个页面放一个
autocomplete	off/on	根据历史搜索记录，在输入框输入首字母，会自动显示历史相关联的记录，提高用户体验，打开成功的条件：需要在表单内同时加上name属性，同时提交成功
multiple	multiple	可以选择多文件提交

例:

<input type="text" autocomplate="off" name="lishijilu"> autocomplete搜索历史记录

<input type="file"> 只能上传单个文件

<input type="file" multiple="multiple"> multiple 可以上传多个文件

第三节 CSS3

1、子级选择器

跟后代选择器区别：子集选择器只能选儿子，不能隔代选书写方式： .fuqin > son 例：

    .fuqin>p {
            background-color: pink;
        }

     <div class="fuqin">
        <p>这是fuqin里面的p标签</p>
        <p>这是fuqin里面的p标签</p>
        <div class="mama">
            <p>这是mama里面的p标签</p>
        </div>
    </div>

2、兄弟选择器

同级之间的选择书写方式：

元素1+元素2 同级元素中，元素1紧跟着后面的那一个元素2 选择结果：只会作用于紧跟元素1后面的元素2
元素1~元素2 同级元素中，元素1后面的所有元素2 例如：

.fuqin h2+h3 {
    background-color: pink;     /三级标签被选中/
 }

.fuqin h2~p {
    background-color: yellow;    /所有p标签被选中/
}
<div class="fuqin">
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标题</h4>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
</div>

3-4、结构伪类选择器

写法：

.fuqin :first-child {              /父亲元素里面的所有儿子的第一个/
            background-color: red;
        }

        .fuqin :last-child {              /父亲元素里面的所有儿子的最后一个/
            background-color:gray;
        }

        .fuqin :nth-child(4) {            /父亲元素里面的所有儿子的第n个/
            background-color: yellow;
        }
        .fuqin p:first-of-type{           /父亲元素里面同类型儿子的第一个/
            background-color: blue;
        }
        .fuqin p:last-of-type{           /父亲元素里面同类型儿子的最后一个/
            background-color: green;
        }
        .fuqin p:nth-of-type(3){         /父亲元素里面同类型儿子的第n个/
            background-color:pink;
        }
    <div class="fuqin">
        <h1>标题一 颜色：红色</h1>
        <p>段落1 颜色：蓝色</p>
        <h2>标题二</h2>
        <p>段落2 颜色：黄色</p>
        <h2></h2>
        <p>段落3 颜色：粉色</p>
        <p>段落4</p>
        <p>段落5</p>
        <p>段落6</p>
        <p>段落7</p>
        <p>段落8 颜色：绿色</p>
        <h3>标题三 颜色：灰色</h3>
    </div>

5、新增伪元素选择器

写法：在选择器后面用双冒号::（这是HTML5中的规范，传统写法是单冒号:）
注意：伪元素只能给双标签添加，不能给单标签添加伪元素内部必须加conten:"";
为什么叫伪元素？因为确实创建了元素，在HTML结构中能看到这个元素，但是后面JS的DOM里面看不见创建的这个元素

例：盒子里面装几个元素，给盒子内部不同位置添加伪元素

  .fuqin {
            width: 400px;
            border: 2px solid pink;
        }

        .fuqin p:nth-of-type(n+1) {
            display: block;
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 10px;
        }

        .fuqin::before {               /在父亲盒子内的第一个元素前面加伪元素/
            content: "这是一段话";
            display: block;
            background-color: red;
        }

        .fuqin::after {                /在父亲盒子内的最后个元素后面加伪元素/
            content: "1";
            display: block;
            background-color: red;
        }

        .d::first-letter {           /选择了class="d"这个容器里面的第一个字/     
            color: red;
        }

        .d::first-line {               /选择了class="d"这个容器里面的第一行/
            color: red;
        }
 <div class="fuqin">
        <p class="d">这是一个段落，还是一句话，还是一段文字</p>
        <p></p>
        <p></p>
        <p></p>
    </div>

6、新增属性选择器

写法：选择一个元素，然后加[]符号例如：

        input[class]{              /选择元素中class这个类//
            height: 20px;
        }
        input[type=week]{         /选择元素中type这个类里面属性值为week这个标签/
            height: 100px;
        }
        input[type^=e]{            /选择元素中type这个类里面属性值有e开头的这个标签/
            height: 150px;
        }
        input[type$=h]{            /选择元素type这个类里面属性值有h结尾的这个标签/
            width: 400px;
        }
        input[class*=o]{          /选择元素class这个类里面属性值中只有包含着有o这个字母的标签
            background-color: pink;
        }
   <form>
        <input type="email"   class="you">
        <input type="search"  class="sou">
        <input type="number"  class="shu">
        <input type="week"    class="zhou">
    </form>

7、盒模型

新增属性：box-sizing
属性值：content-box（标准模式） boder-box（怪异模式）例：

     div{
         width: 300px;
         height: 300px;
         background-color: pink;
         padding: 10px;
         border: 2px solid yellow;
         box-sizing: content-box;   /按照标准模式加载，除了内容区300*300以外的区域都外扩，这个模式下，修改border、padding值时，占据的数字都往外扩/
         box-sizing: border-box;   /按照怪异模式加载，包含border及以内的区域总共宽高为300*300,这个模式下，修改border、padding值时，占据的数字都往内减/
     }

8、CSS3中边框圆角属性

border-radius
两种写法：单一属性写法、综合写法（类似padding的写法）

属性名	属性值
border-radius	像素值, 横纵轴写法，x轴和y轴之间用/符号划分开
border-radius	百分比, 横纵轴写法，x轴和y轴之间用/符号划分开

例如：

  div{
            width: 300px;
            height: 300px;
            background-color: pink;
            border: 10px solid red;
            border-radius: 100px/100px;            /x轴为100px,y轴为100，如果只写一个数字，那么x轴=y轴/
            border-bottom-left-radius: 50px;
            border-bottom-right-radius: 50px;
            border-top-right-radius: 50px;
            border-top-left-radius: 50px;
            border-radius: 10px 20px 30px 40px ;    /综合写法：4值法/
            border-radius: 20px 50px 80px ;         /综合写法：3值法/
            border-radius: 20px 80px ;              /综合写法：2值法/
            border-radius: 20px 80px /30px 60px;    /综合写法：x轴/y轴法/
        }

9、CSS3中的文字阴影

属性名：text-shadow

属性值	描述
x轴像素值	水平阴影的位置，可以为负值
y轴像素值	垂直阴影的位置，可以为负值
blur	模糊的距离（用像素值表示）
color	阴影的颜色

文字阴影综合写法： text-shadow: 20px 20px 10px red; 模糊的距离为10px

如果要写多层阴影

   p{
            font: 100px "微软雅黑";
            text-shadow: 20px 20px 10px red ,40px 40px 10px yellow,60px 60px 10px pink;                 
           /20px 20px 10px red 一轮四个属性值写完后，用逗号隔开，继续写下一轮/
        }

10、CSS3中的盒子阴影

属性名box-shadow

属性值	描述
x轴像素值	水平阴影的位置，可以为负值
y轴像素值	垂直阴影的位置，可以为负值
blur	模糊的距离（用像素值表示）
spread	阴影的尺寸
color	阴影的颜色
inset	将外部阴影改为内部阴影

盒子阴影综合写法： /边框阴影：水平位置、垂直位置、模糊程度、扩展大小、颜色、是否内边框阴影 box-shadow: 20px 20px 10px 40px red inset; 如果要写多层阴影，跟文字阴影的写法一样

11、CSS3的过渡属性

动画效果属性名：transition 作用：用transition属性可以实现补间动画（过渡效果，只要当前元素有“属性”发生变化即存在两种状态时（A状态、B状态），那么A和B之间可以实现平滑过渡的动画效果，为了方便看效果，使用:hover切换状态
综合属性写法，语法格式： transition:过渡的属性过渡的时间运动曲线延时时间; 例：

     div {
            width: 300px;
            height: 300px;
            background-color: pink;
            transition: all 2s cubic-bezier(0.66, 0.27, 0.22, 1) 0s;
        }
        div:hover{
            width: 800px;
        }

单一属性写法

属性	属性值	描述
transition		简写属性，用于在一个属性中设置4个过渡属性
transitoin-property	none 、all 、属性名（使用具体的属性，多个属性名中间用逗号分隔	规定应用过渡的CSS属性的名称
transition-duration	以秒s为单位	定义过渡效果花费的时间，默认值是0
transition-timing-function	linear(匀速过渡)、ease(慢-快-慢)、ease-in(慢速开始过渡)、ease-out(以慢速结束过渡效果)、ease-in-out(慢速开始，慢速结束、cubic-bezier(x1,y1,x2,y2),函数自己取值)	规定过渡效果的时间曲线，默认值是ease(慢速开始，然后变快，慢速结束的过渡效果)
transition-deay	以秒s为单位	规定过渡效果延时时间，什么时候开始，默认是0

12、2D转换-位移

属性名：transform
作用：对元素进行移动、缩放、转动、拉长或拉伸位移效果和（绝对-相对路径）可以一样

位移属性值	说明
translate(x,y)	x.y分别为水平和垂直方向位移的距离,px像素值或者百分比（区分正负）
translane(x)	只设置一个值的时候，表示水平方向位移

13、2D转换-缩放

属性名：transform
作用：对元素进行移动、缩放、转动、拉长或拉伸

缩放属性值	说明
scale(x,y)	x.y分别为改变元素高度和宽度的倍数
scale(n)	只设置一个值的时候，表示宽度和高度同时缩放n倍
scaleX(n)	改变元素的宽度
scaleY(n)	改变元素的高度

14、2D转换-旋转

属性名：transform
作用：对元素进行移动、缩放、转动、拉长或拉伸

旋转属性值	说明
rotate()	括号里面写数字+deg 正数表示顺时针旋转，负数表示逆时针旋转

书写语法：transform: rotate(30deg);

例：

综合写法（先旋转后位移) transform: rotate(30deg) translate(100px);

综合写法（先位移后旋转) transform: translate(100px) rotate(30deg) ;

注意：两个先后顺序不同，加载结果会不同

15、2D转换-倾斜

属性名：transform
作用：对元素进行移动、缩放、转动、拉长或拉伸

倾斜属性值	说明
skew()	括号里面写数字+deg,数字+deg,表示水平和垂直方向倾斜的角度

16-17、2D转换-基准点

属性：transform-origin
作用：设置调整元素的水平和垂直方向原点的位置属性值有2个，中间用空格分隔

基准点属性值	说明
x	定义x抽的原点在何处，leftcenterright，像素值、百分比
y	定义Y轴的原点在何处，topcnterbottom、像素值、百分比

18、3D转换-透视属性perspective

可以理解为x,y,z轴的z轴方向，设置视觉远近
透视特点：近大远小

属性名	属性值	说明
perspective	像素值	像素值越大，透视距离越远

注意：透视属性需要设置给3D变化元素的父级

19、3D转换-旋转

属性和2D一样，transform，不同于2D旋转的是，3D增加了一条Z轴，空间轴

属性值	说明
rotateX(angle)	沿着X抽的3D旋转
rotateY(angle)	沿着Y抽的3D旋转
rotateZ(angle)	沿着Z抽的3D旋转

注意：属性值角度区分正负，正数（顺时针）负数（逆时针）

20、3D转换-位移

属性和2D一样，transform，不同于2D旋转的是，3D增加了一条Z轴，空间轴

属性值	说明
translataX(x)	沿着X轴的3D位移值
translataY(y)	沿着Y轴的3D位移值
translataZ(z)	沿着Z轴的3D位移值

21、CSS3制作动画

用 @keyframes 创建动画，用animation属性绑定动画语法：如果 @keyframes 创建的动画作用于<div> div{ animation:动画名称过渡时间速度曲线延时时间动画次数 ; } 注意必须设置动画名称和过渡时间，其他属性值根据实际情况而定

用关键词 "from" "to" 或者百分比来规定变化发生的时间，0%为动画开始，100%为动画完成一个周期

例如：

.box div:nth-child(8) {
            animation: move 4s linear 3.5s infinite;
        }

        @keyframes move {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

animation单一属性列表

属性	说明
animation-name	规定@keyframes 创建的动画名称
animation-duration	规定动画完成一个周期需要的时间。默认是0
animation-timing-function	规定动画的速度曲线，和过渡属性transition，设置方式一样，默认是ease(慢-快-慢)
animation-delay	规定动画什么时候开始（设置延时时间）
animation-iteration-count	规定动画播放的次数，默认是1，无限循环是infinite

注意 @keyframes 规则存在浏览器兼容性问题 IE10.0、 firefox、 Oprea支持 @keyframes 规则和animation属性 Chrome和Safari需要加前缀-webkit- IE9.0以及更早的版本不支持 @keyframes 规则和animation属性

weixin_40001025

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
怎样修改网页滚动条颜色_Part 1 · HTML5 网页开发-02

Part 1 · HTML5 网页开发-02第二章 CSS 核心样式、H5 + C3 新特性第一节 CSS核心样式1、CSS核心样式 font-weightCSS常用样式属性： font-weight作用：font-weight 设置字体的粗细属性值说明normal默认字体大小，标准版bold粗体字，b、strong的默认值bolder定义更粗的字体lighter定义更细的字体100定义由细到粗的...
复制链接

扫一扫