Part 1 · HTML5-02-CSS 核心样式、H5 + C3 新特性

核心提示Part 1 · HTML5 网页开发-02第二章 CSS 核心样式、H5 + C3 新特性第一节 CSS核心样式1、CSS核心样式 font-weightCSS常用样式属性： font-weight作用：font-weight 设置字体的

Part 1 · HTML5 网页开发-02第二章 CSS 核心样式、H5 + C3 新特性第一节 CSS核心样式CSS核心样式 font-weight

  • CSS常用样式属性： font-weight
  • 作用：font-weight 设置字体的粗细
属性值说明
normal默认字体大小，标准版
bold粗体字，b、strong的默认值
bolder定义更粗的字体
lighter定义更细的字体
100定义由细到粗的字符
200
300
400400等同于normal
500
600
700700等同于bold
800
900
inherit规定应该从父元素继承字体粗细
CSS常用样式 font-style
  • 作用：设置文字的风格
属性值说明
normal正规字体
italic设置斜体文字，主要用于英文
oblique设置倾斜文字，只是将文字倾斜，和字体无关
CSS常用样式 line-height
  • 作用：line-height设置行高，font-size设置字体大小之后，有默认的行高，如果改变默认行高，需要line-height来修改
属性值说明
px像素值设置行高具体的像素值
百分比数值设置本身字体的百分比值，100%就是原本大小，200%就是2倍字体大小
行高是文字的真正占有的高度 内部文字是垂直居中在行高中显示的font综合属性
  • 回忆5个字体单一属性： font-family 、font-size 、font-weight、 font-style 、line-height
  • 为了减省代码量，提高书写效率，如果某字体被定义多个属性，可以采用综合属性写法
硬性记忆3种写法:
  1. 同时设置字号、字体 （字号必须在前面，字体在后面，不能颠倒）
例：p{font： 14px "宋体"; }
  1. 同时设置字号、字体、行高（书写顺序必须是行高、字号、字体，且行高和字体之间用/隔开）
例：p{font： 14px/28px "宋体"; } 字体14px,行高28px，字体为宋体
  1. 同时设置字号、字体、行高、加粗、斜体（书写顺序必须是行高、字号、字体在后面，且行高和字体之间用/隔开，加粗、斜体写在前面，加粗、斜体可以换顺序
例：p{font：hold italic 14px/28px "宋体"; } 或 p{font： italic hold 14px/28px "宋体"; }css文本样式 text-align
  • text-align 文本对齐
属性值说明
left整个文本向左对齐
right整个文本向右对齐
center整个文本居中
css文本样式 text-decoration
  • text-decoration 文本装饰（加或不加线条）
属性值说明
onoe没有修饰
overline上划线
line-through中划线，删除线，del标签的默认值
underline下划线
css文本样式 text-indent
  • 文本缩进text-indent
属性值说明
px单位表示首行缩进多少px单位像素（按像素值缩进平时不太常用）
em单位倍数，自动参考一个文字的大小宽度，以文字大小宽度为字符来缩进，好处：根据文字变大而变大，文字变小而变小，2em实现首行缩进2个字符
百分比单位不太常用，参考的盒子width宽度，按盒子宽度的百分度来缩进
属性值分正负值，正值向右缩进，负值向左缩进盒模型
  • 盒模型
  1. 概述：盒模型也称为框模型，包含5个属性： width 宽 height 高 border 边框 padding 内边距 margin 外边距 （盒子跟外部盒子之间的边距）
  2. 常见盒模型区域 ：
  • 书写元素内容区域：width+height
  • 盒子实体化区域：width+height+padding+border
  • 盒子实际占的位置：width+height+padding+border+margin
注：margin是盒子跟盒子之间的距离，就像是人与人之间的距离，不属于盒子实体化区域9、CSS常用样式-盒模型属性 width
属性值说明
auto默认值，浏览器根据实际情况计算宽度
px像素值定义的宽度（固定值）
%参考父元素宽度width的百分比来定义的宽度
注：如果元素不加width属性，默认就是auto，浏览器会根据不同元素的特点来自动计算实际的宽度，自动适应不同的浏览器 例如：
  1. 等需要独占一行的元素，不设置width时，它的宽度值会自动撑满父元素的width区域

  2. 等不需要独占一行的元素，不设置width时，它的宽度根据元素内部的内容来决定，内容撑开有多宽，就是多宽

  3. 元素比较特殊。不需要设置width属性，宽度会自动适应浏览器的宽度
CSS常用样式-盒模型属性 height
属性值说明
auto默认值，浏览器根据实际情况计算高度
px像素值定义的高度（固定值）
%参考父元素宽度height的百分比来定义的高度
注：如果元素不加height属性，默认就是auto，浏览器会自动计算出高度（元素内部内容实际撑开的高度，元素的高度自适应内部内容撑开的高度）1CSS常用样式-盒模型属性 padding
  • 作用：设置元素的内边框，就是边框内部到宽高区域之间的距离
  • 特点：能渲染背景
属性值说明
px像素值定义的距离
padding 是复合属性，可以把上、下、左、右四个方向混合着写，也可以根据内边距的方向不同分为四个方向的单一属性 如（单一属性的写法）：

padding-top

:

10px

;

padding-right

:

10px

;

padding-bottom

:

10px

;

padding-left

:

10px

;

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

padding

:

10px

20px

30px

40px

;

//

padding

:

10px

20px

30px

;

//

padding

:

10px

20px

;

//

padding

:

10px

;

//

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

padding

:

10px

;

padding-left

:

20px

;

意思为：左边距20px，其他所有边距10px. 注：单一属性必须写在复合属性后面，才能层叠掉复合属性中重复的部分1CSS常用样式-盒模型属性 border
  • border盒模的边框
属性值说明
width线的宽度
style线的形状
color线的颜色
写法：属性值之间用空格分开 例：border:10px solid red; border（按属性类型划分）可以分成三个单一属性
  1. border-width 定义 边框四边的宽度，四值写法类似padding
  2. border-style （属性值：实线solid 虚线dashed 无边框none 凹陷槽3D效果groove3D效果 ridge 等等）3D效果容易出现兼容问题，四值写法类似padding，每条边可以设置不同属性值，中间用空格
  3. border-color 四值写法类似padding，四边可以设置不同颜色
border（按方向划分）可以分成四个单一属性 border-top:10px; border-right:10px; border-bottom:10px; border-left:10px; border（按照方向+类型进一步细分） 书写方法： border-方向+类型（必须是方向写在前面） border-left-color:10px red;1CSS常用样式-盒模型属性 margin
  • 作用：设置盒子与盒子之间的距离
  • 特点：不能渲染背景
  • 属性值：px 应用书写方式和padding一样
1盒模型扩展属性-清除默认样式
  • 举例：删除默认的内外边距
  1. 标签选择器并集方式

p

,

p

,

h1

,

p

,

h3

{

margin

:

0

px

;

padding

:

0

px

;

}

2. 通配符方式

*

{

margin

:

0

px

;

padding

:

0

px

;

}

遇到不同的标签文字样式，清除的属性值会不同，根据实际情况来1盒模型扩展属性-height的应用
  • 盒子高度的应用 根据不同的需求，盒子的高度可以设置也可以不设置（实际工作中，根据项目设计来定） 如果不设置，会根据标签内部内容高度自动撑开 如果设置，盒子高度就固定死了，后面同级元素会紧挨着加载 在设置了盒子固定高度的情况下，里面的文字太多的时候，盒子是装不下的，就会出现文字溢出现象
可以通过overflow属性，对溢出的文字部分进行显示效果的设置
属性值说明
visible默认值，溢出部分可见的（全部溢出在页面）
hidden把溢出的文字部分进行隐藏，超过盒子边框的全部被隐藏
scroll水平+垂直方向加滚动条，隐藏溢出部分，可以拖动滚动条查看
auto自动的，如果没有溢出就正常显示，如果溢出，溢出的方向就自动出现滚动条
1盒模型扩展属性-居中
  • 文本居中：text-align：center; （无论单行或多行都可以设置）
盒子内的文本居中：
  1. 单行文本垂直居中：让文字行高line-height等于盒子的高度
  2. 多行文本垂直居中：设置元素高度自适应或者高度正好等于多行文字撑起来的行高，然后设置盒子上下内边距padding为相同值，实现多行文本垂直居中
元素垂直居中
  1. 让父元素内嵌套的元素垂直居中，和多行文本垂直居中的方式类似，设置父元素高度自适应，子元素高度自动撑开父元素高度，给父元素设置上下内边距padding为相同值
元素水平居中：
  1. 针对类似于样式上必须独占一行的盒子，如果子盒子低于父盒子的宽度，可以设置子盒子的margin值，水平方向的值都设置成auto，自动撑满整个父元素除了子元素宽度外的剩余区域
注：auto只有在水平方向有作用，靠左右两边撑满剩余区域，达到水平居中效果 实际工作中，可以有多种方法可以达到效果1盒模型扩展属性-父子盒模型
  • 父子盒模型：父子盒子里面可以装一个或者多个儿子盒子
  • 条件：父元素的width≥所有子元素的width+padding+margin+border 注意： 如果不满足条件，父盒子里面多余的子元素要么溢出父盒子，要么跟其他的儿子不在一行，会掉到下一行
1盒模型扩展属性-margin塌陷
  • 垂直方向的margin，两个元素的margin边相遇时，数值小的塌陷到数值大的那一边，不是两个margin值相加 水平方向的margin，不会有塌陷 父子元素也会出现塌陷现象，同理，小的值塌陷到大的值那边
解决margin塌陷的方法：
  1. 同级元素：2个元素遇到塌陷问题，只需要设置其中一边的margin值就可以了，不用两边都设置
  2. 父子元素：让父子的两边不要相遇，用其中一个padding或者border将间距隔开
19、标准文档流、显示模式display
  • HTML（是一种标准的文档流文件）
  • 标准的文档流特点有2种方式体现：微观现象+元素等级 微观现象：空白折叠现象、自动换行现象、文字类元素若排在一行，会出现高低不齐，底边对齐现象 元素等级： 标准流中，大部分元素是区分等级的，几种常见的加载级别： 块级元素、行内元素、行内块元素
  1. 块级元素：大部分容器级标签包括p标签都是块级元素，比如、
  2. 行内元素：大部分文本级标签，比如

    标签

  3. 行内块元素：比如
  • 标准文档流：指元素在排版布局过程中，元素默认自动从左至右，从上至下的流式排列方式。

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

20、显示模式属性display
属性作用
block把元素设置成块级元素加载
inline把元素设置成行内元素加载
inline-block把元素设置成行内块模式加载
none表示隐藏标签内的内容以及标签，让出原有标准流的位置
注意： display更改显示模式并没有改变标准流本质性质，页面还是从上往下加， 为了实现更多的界面布局效果，需要脱离标准流的限制 脱离标准流的方法：浮动、绝对定位、固定定位2浮动的定义
  • 浮动（一种非常重要的布局属性）
属性名属性值
floatleft
floatright
2浮动依次贴边（父元素足够宽，所有子元素会按照HTML书写顺序，依次向右或者向左贴边展示，当子元素总宽大于父元素时，多余的子元素会向下一排掉，然后贴上下一排最近的边）23-2浮动的性质-margin塌陷现象
  • 浮动的性质（浮动元素没有margin塌陷，margin塌陷现象出现在标准流中，因为浮动元素已经脱离了标准流，所以不会有margin塌陷现象） 浮动的元素会让出标准流的位置，留给下一个同级元素占位
  • 字围现象：同级元素中，前面元素浮动，后面元素不浮动且元素内有很多文字，这种情况会出现字围现象。

    （后面元素内的位置围绕前面元素显示）

浮动依次贴边的应用以及问题 实际应用中，浮动会存在一些显示问题26-2清除浮动的方法
  • 解决浮动存在的问题的方法：
  1. 设置父元素高度和子元素一样高（方法有局限性，治标不治本）
  2. 清除浮动影响，clear属性，作用（清除标签元素自身受到的前面浮动元素的影响）
属性名属性值作用
clearleft清除前面元素左边浮动带来的影响
clearright清除前面元素右边浮动带来的影响
clearboth清除前面所以浮动带来的影响
缺点： 解决不了父元素高度自适应 3. 隔墙法
  • 外墙法：在两个父级元素之间加个 例如：

.

clear

{

clear

:

both

;

>

}

缺点： 解决不了父元素高度自适应
  • 内墙法：在父元素内部，所以浮动子元素后加个空的,标签高度设置为0，添加clear属性 能解决父元素高度自适应
缺点： 浮动是CSS里面的样式属性，用HTML标签来辅助解决，会造成HTML结构冗余
  1. 伪类清除浮动影响法 伪类法清除浮动的本质和内墙法一致，只是把HTML标签的书写改成了CSS代码书写内墙 书写方法： 伪类选择器：通过选中的标签添加伪类，去选择标签的某个状态或者位置 :after 此伪类表示选中的标签内部的最后的位置 注意（:after的前面要紧跟着7类选择器）
通常情况： 将伪类添加给一个选中父盒子的选择器后面，一般给需要给清除浮动的父盒子设置一个clearfix的类名例:

.

clearfix

:

after

{

content

:

"1"

;

添加一个文字内容

display

:

block

;

将文字转化为块元素

height

:

0

;

将盒子高度固定为0，避免影响父盒子的高度

clear

:

both

;

清除前面浮动的影响

visibility

:

hidden

;

将创建的元素隐藏并继续占有位置

}

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

.

box

{

width

:

800

px

;

margin-bottom

:

10

px

;

border

:

10

px

solid

rgb

;

overflow

:

hidden

;

}

总结： 如果父元素的高度是固定的，建议用height属性解决 如果父元素高度需要自适应，建议使用overflow属性解决浮动问题2a标签伪类
  • 伪类的概念： 伪类和类的权重是一样的 伪类和类有一定的相似处，也存在明显的区别 写法不同 只有用户触发了对应的行为，伪类的样式才会立即记载 例如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

no-repeat

center

top

scroll

#333

;

}

注意：
  1. 如果属性值没有设置完全，没有设置的单一属性会按照默认值加载
  2. 如果想层叠综合属性的一部分，其他属性保持不变，最好使用单一属性进行层叠
背景样式的场景应用
  1. 背景图替换标签的插入图，用css的background-image 替换html中的
  2. padding区域背景图（根据实际情况灵活应用)
  3. 精灵图（又称CSS雪碧、css SpritesS），网上自行制作 将网页中所有需要到的小图片放在一张图里面.png 再根据背景定位选择需要记载的一部分进行定位
3CSS3新增背景样式属性-透明度
属性名属性值
background-colorrgba，在rgb基础上增加了alpha
background-sizepx值、百分比、cover、contain
多背景添加，background-image 写两个url中间用逗号隔开3定位属性position
属性名属性值
positionralative 相对定位
positionobsolute 绝对定位
positionfixed 固定定位
作用：设置定位元素，它需要根据某个参考元素发生位置的偏移3相对定位：
  • 不会脱离标准流，不会让出自己原来的坑位给其他元素 参考元素是自己，通常按left top 来书写定位
  • 场景应用： 导航条应用
39-4绝对定位：
  • 会脱离标准流，设置了绝对定位的元素，会让出自己原来占的坑给其他元素使用 参考元素是距离最近的有定位的祖先元素，如果祖先元素没有定位，参考
  • 参考时 如果top参与定位，参考点是body页面的左上角left和右上角right 如果buttom参与定位，参考点是body页面首屏的左下角left顶点或右下角顶点right
注意： 实际工作中，尽量不以为参考元素，因为不同浏览器中，绝对定位的元素位置是不同的 通常使用子绝父相4固定定位：
  • 会脱离标准流，让出自己的坑位 参考元素为浏览器窗口（浏览器窗口的四个顶点）
4定位的实际应用-压盖效果
  • 所有的定位类型都可以实现压盖效果，常用绝对定位制作压盖效果
  • 定位的实际应用---居中效果 用百分比写法 例：

a

{

display

:

block

;

width

:

50

px

;

height

:

20

px

;

background-color

:

pink

;

position

:

absolute

;

left

:

50

%

;

距离左边50%距离

top

:

50

%

;

距离上边50%距离

margin-left

:

-25

px

;

往回拽元素宽度的一半

margin-top

:

-10

px

;

往回拽元素宽度的一半

}

4定位压盖顺序
  • z-index属性 定位的元素不区分定位类型，都会去压盖标准流或浮动元素 如果都是定位元素，在HTML中后写的定位压盖先写的定位 自定义压盖顺序z-index属性，属性值：数字 属性值大的会压盖属性值小的，设置了属性值的会压盖没设属性值的 z-index属性只能设置给定位的元素才能生效，如果给没有定位的元素设置，不会生效
注意： 子级盒子，“从父效应”静态轮播图布局
  • 代码练习
第二节、HTML5HTML5概念
  • 狭义概念：HTML的修改升级版，增加了很多新的语义特性
  • 广义概念：CSS+javascript+html总称 优势很多 缺点：IE9以下的浏览器不兼容
HTML5新增语义化标签
  • 把网页划分成几块有更对语义化的模块
  1. 头部标签
  3. article> 主体标签
  5. 尾部标签
注意：
  • 这种语义化标签主要针对搜索引擎的
  • 这些新的标签在页面中可以使用多次
  • 在IE9中，需要把这些元素转换为块级元素
移动端更喜欢这些标签HTML5中的音频标签
属性名属性值说明
autoplayautoplay自动播放
controlscontrol向用户显示控件，比如播放按钮（需要设置才会显示）
looploop音频结束时，重新开始播放
preloadpreload随着页面加载同时加载音频（若用了autoplay，则忽略该属性
srcurl要播放的音频的url
注意（音频格式）存在浏览器兼容性问题
格式MIME-typeIEFirefox3.0Opera10.0Chrome3.0Safari3.0
Oggaudio/mpeg√√√
MP3audio/ogg√√√
Wavaudio/wav√√√
实际应用中，考虑到兼容问题，需要多些几个格式，提高用户体验 例如：

<

audio

controls

>

<

source

src

=

"media/song.mp3"

type

=

"audio/mpeg"

>

<

source

src

=

"media/song.ogg"

type

=

"audio/ogg"

>

您的浏览器版本过低，不支持音频播放，建议升级

audio

>

HTML5中的视频标签
属性名属性值说明
autoplayautoplay自动播放
controlscontrol向用户显示控件，比如播放按钮（需要设置才会显示）
looploop音频结束时，重新开始播放
preloadpreload随着页面加载同时加载音频（若用了autoplay，则忽略该属性
srcurl要播放的音频的url
width像素值设置播放器宽度
height像素值设置播放器高度
posterimgurl加载等待的画面图片
mutedmuted静音播放
注意（视频格式）存在浏览器兼容性问题
格式MIME-typeIEFirefoxOperaChromeSafari
Oggvideo/ogg3.5+10.5+5.0+
MP4video/mp49.0+5.0 +3.0+
webmvideo/webm4.0+10.6+6.0+
HTML中的输入标签例：

<

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

>

HTML5中新增可输入标签 城市:

<

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

>

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

<

input

type

=

"text"

autocomplate

=

"off"

name

=

"lishijilu"

>

autocomplete搜索历史记录

<

input

type

=

"file"

>

只能上传单个文件

<

input

type

=

"file"

multiple

=

"multiple"

>

multiple 可以上传多个文件第三节 CSS3子级选择器
  • 跟后代选择器区别：子集选择器只能选儿子，不能隔代选 书写方式： .fuqin > son 例：
.fuqin>p { background-color: pink; }

<

p

class

=

"fuqin"

>

<

p

>

这是fuqin里面的p标签

p

>

<

p

>

这是fuqin里面的p标签

p

>

<

p

class

=

"mama"

>

<

p

>

这是mama里面的p标签

p

>

p

>

p

>

兄弟选择器
  • 同级之间的选择 书写方式：
  1. 元素1+元素2 同级元素中，元素1紧跟着后面的那一个元素2 选择结果：只会作用于紧跟元素1后面的元素2
  2. 元素1~元素2 同级元素中，元素1后面的所有元素2 例如：
.fuqin p+h3 {background-color: pink; /三级标签被选中/ }.fuqin p~p {background-color: yellow;/所有p标签被选中/}

<

p

class

=

"fuqin"

>

<

p

>

二级标签

p

>

<

h3

>

三级标签

h3

>

<

h4

>

四级标题

h4

>

<

p

>

段落1

p

>

<

p

>

段落2

p

>

<

p

>

段落3

p

>

p

>

3-结构伪类选择器写法：

.

fuqin

:

first-child

{

/父亲元素里面的所有儿子的第一个/

background-color

:

red

;

}

.

fuqin

:

last-child

{

/父亲元素里面的所有儿子的最后一个/

background-color

:

gray

;

}

.

fuqin

:

nth-child

{

/父亲元素里面的所有儿子的第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

{

/父亲元素里面同类型儿子的第n个/

background-color

:

pink

;

}

<

p

class

=

"fuqin"

>

<

h1

>

标题一

颜色

：

红色

h1

>

<

p

>

段落1

颜色

：

蓝色

p

>

<

p

>

标题二

p

>

<

p

>

段落2

颜色

：

黄色

p

>

<

p

>

p

>

<

p

>

段落3

颜色

：

粉色

p

>

<

p

>

段落4

p

>

<

p

>

段落5

p

>

<

p

>

段落6

p

>

<

p

>

段落7

p

>

<

p

>

段落8

颜色

：

绿色

p

>

<

h3

>

标题三

颜色

：

灰色

h3

>

p

>

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

.

fuqin

{

width

:

400

px

;

border

:

2

px

solid

pink

;

}

.

fuqin

p

:

nth-of-type

{

display

:

block

;

width

:

100

px

;

height

:

100

px

;

background-color

:

yellow

;

margin

:

10

px

;

}

.

fuqin

::

before

{

/在父亲盒子内的第一个元素前面加伪元素/

content

:

"这是一段话"

;

display

:

block

;

background-color

:

red

;

}

.

fuqin

::

after

{

/在父亲盒子内的最后个元素后面加伪元素/

content

:

"1"

;

display

:

block

;

background-color

:

red

;

}

.

d

::

first-letter

{

/选择了这个容器里面的第一个字/

color

:

red

;

}

.

d

::

first-line

{

/选择了这个容器里面的第一行/

color

:

red

;

}

<

p

class

=

"fuqin"

>

<

p

class

=

"d"

>

这是一个段落

，

还是一句话

，

还是一段文字

p

>

<

p

>

p

>

<

p

>

p

>

<

p

>

p

>

p

>

新增属性选择器写法：选择一个元素，然后加[]符号 例如：

input

[

class

]

{

/选择元素中class这个类//

height

:

20

px

;

}

input

[

type

=

week

]

{

/选择元素中type这个类里面属性值为week这个标签/

height

:

100

px

;

}

input

[

type

^=

e

]

{

/选择元素中type这个类里面属性值有e开头的这个标签/

height

:

150

px

;

}

input

[

type

$=

h

]

{

/选择元素type这个类里面属性值有h结尾的这个标签/

width

:

400

px

;

}

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

>

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

p

{

width

:

300

px

;

height

:

300

px

;

background-color

:

pink

;

padding

:

10

px

;

border

:

2

px

solid

yellow

;

box-sizing

:

content-box

;

/按照标准模式加载，除了内容区300*300以外的区域都外扩，这个模式下，修改border、padding值时，占据的数字都往外扩/

box-sizing

:

border-box

;

/按照怪异模式加载，包含border及以内的区域总共宽高为300*300,这个模式下，修改border、padding值时，占据的数字都往内减/

}

CSS3中边框圆角属性
  • border-radius
  • 两种写法：单一属性写法、综合写法（类似padding的写法）
属性名属性值
border-radius像素值, 横纵轴写法，x轴和y轴之间用/符号划分开
border-radius百分比, 横纵轴写法，x轴和y轴之间用/符号划分开
例如：

p

{

width

:

300

px

;

height

:

300

px

;

background-color

:

pink

;

border

:

10

px

solid

red

;

border-radius

:

100

px

/

100

px

;

/x轴为100px,y轴为100，如果只写一个数字，那么x轴=y轴/

border-bottom-left-radius

:

50

px

;

border-bottom-right-radius

:

50

px

;

border-top-right-radius

:

50

px

;

border-top-left-radius

:

50

px

;

border-radius

:

10

px

20

px

30

px

40

px

;

/综合写法：4值法/

border-radius

:

20

px

50

px

80

px

;

/综合写法：3值法/

border-radius

:

20

px

80

px

;

/综合写法：2值法/

border-radius

:

20

px

80

px

/

30

px

60

px

;

/综合写法：x轴/y轴法/

}

9、CSS3中的文字阴影
  • 属性名：text-shadow
属性值描述
x轴像素值水平阴影的位置，可以为负值
y轴像素值垂直阴影的位置，可以为负值
blur模糊的距离（用像素值表示）
color阴影的颜色
文字阴影综合写法： text-shadow: 20px 20px 10px red; 模糊的距离为10px 如果要写多层阴影

p

{

font

:

100

px

"微软雅黑"

;

text-shadow

:

20

px

20

px

10

px

red

,

40

px

40

px

10

px

yellow

,

60

px

60

px

10

px

pink

;

/20px

20px

10px

red

一轮四个属性值写完后，用逗号隔开，继续写下一轮/

}

CSS3中的盒子阴影
  • 属性名box-shadow
属性值描述
x轴像素值水平阴影的位置，可以为负值
y轴像素值垂直阴影的位置，可以为负值
blur模糊的距离（用像素值表示）
spread阴影的尺寸
color阴影的颜色
inset将外部阴影改为内部阴影
盒子阴影综合写法： /边框阴影：水平位置、垂直位置、模糊程度、扩展大小、颜色、是否内边框阴影 box-shadow: 20px 20px 10px 40px red inset; 如果要写多层阴影，跟文字阴影的写法一样1CSS3的过渡属性
  • 动画效果 属性名：transition 作用：用transition属性可以实现补间动画（过渡效果，只要当前元素有“属性”发生变化即存在两种状态时（A状态、B状态），那么A和B之间可以实现平滑过渡的动画效果，为了方便看效果，使用:hover切换状态
  • 综合属性写法，语法格式： transition:过渡的属性 过渡的时间 运动曲线 延时时间; 例：

p

{

width

:

300

px

;

height

:

300

px

;

background-color

:

pink

;

transition

:

all

2

s

cubic-bezier

0

s

;

}

p

:

hover

{

width

:

800

px

;

}

  • 单一属性写法
属性属性值描述
transition简写属性，用于在一个属性中设置4个过渡属性
transitoin-propertynone 、all 、属性名（使用具体的属性，多个属性名中间用逗号分隔规定应用过渡的CSS属性的名称
transition-duration以秒s为单位定义过渡效果花费的时间，默认值是0
transition-timing-functionlinear、ease、ease-in、ease-out、ease-in-out,函数自己取值)规定过渡效果的时间曲线，默认值是ease
transition-deay以秒s为单位规定过渡效果延时时间，什么时候开始，默认是0
12D转换-位移
  • 属性名：transform
  • 作用：对元素进行移动、缩放、转动、拉长或拉伸 位移效果和（绝对-相对路径）可以一样
位移属性值说明
translatex.y分别为水平和垂直方向位移的距离,px像素值或者百分比（区分正负）
translane只设置一个值的时候，表示水平方向位移
12D转换-缩放
  • 属性名：transform
  • 作用：对元素进行移动、缩放、转动、拉长或拉伸
缩放属性值说明
scalex.y分别为改变元素高度和宽度的倍数
scale只设置一个值的时候，表示宽度和高度同时缩放n倍
scaleX改变元素的宽度
scaleY改变元素的高度
12D转换-旋转
  • 属性名：transform
  • 作用：对元素进行移动、缩放、转动、拉长或拉伸
旋转属性值说明
rotate括号里面写 数字+deg 正数表示顺时针旋转，负数表示逆时针旋转
书写语法：transform: rotate;例： 综合写法（先旋转后位移) transform: rotate translate; 综合写法（先位移后旋转) transform: translate rotate ; 注意： 两个先后顺序不同，加载结果会不同12D转换-倾斜
  • 属性名：transform
  • 作用：对元素进行移动、缩放、转动、拉长或拉伸
倾斜属性值说明
skew括号里面写 数字+deg,数字+deg,表示水平和垂直方向倾斜的角度
16-12D转换-基准点
  • 属性：transform-origin
  • 作用：设置调整元素的水平和垂直方向原点的位置 属性值有2个，中间用空格分隔
基准点属性值说明
x定义x抽的原点在何处，leftcenterright，像素值、百分比
y定义Y轴的原点在何处，topcnterbottom、像素值、百分比
13D转换-透视属性perspective
  • 可以理解为x,y,z轴的z轴方向，设置视觉远近
  • 透视特点：近大远小
属性名属性值说明
perspective像素值像素值越大，透视距离越远
注意：透视属性需要设置给3D变化元素的父级19、3D转换-旋转属性和2D一样，transform，不同于2D旋转的是，3D增加了一条Z轴，空间轴
属性值说明
rotateX沿着X抽的3D旋转
rotateY沿着Y抽的3D旋转
rotateZ沿着Z抽的3D旋转
注意：属性值角度区分正负，正数（顺时针）负数（逆时针）20、3D转换-位移
  • 属性和2D一样，transform，不同于2D旋转的是，3D增加了一条Z轴，空间轴
属性值说明
translataX沿着X轴的3D位移值
translataY沿着Y轴的3D位移值
translataZ沿着Z轴的3D位移值
2CSS3制作动画
  • 用 @keyframes 创建动画，用animation属性绑定动画 语法： 如果 @keyframes 创建的动画作用于 p{ animation:动画名称 过渡时间 速度曲线 延时时间 动画次数 ; } 注意 必须设置动画名称和过渡时间，其他属性值根据实际情况而定
用关键词 "from" "to" 或者百分比来规定变化发生的时间，0%为动画开始，100%为动画完成一个周期例如：

.

box

p

:

nth-child

{

animation

:

move

4

s

linear

3.5

s

infinite

;

}

@

keyframes

move

{

0

%

{

transform

:

rotate

;

}

100

%

{

transform

:

rotate

;

}

}

  • animation单一属性列表
属性说明
animation-name规定@keyframes 创建的动画名称
animation-duration规定动画完成一个周期需要的时间。
 
版权声明 本文仅代表作者观点，不代表本站立场。
如遇本文系为网络转载到本站发表，图片或文章有版权问题的请联系客服确认后会立即删除文章。
如遇本文系作者授权本站发表，未经许可，不得转载。

--结束END--

有问题投稿请发送至: 邮箱/kf@guangfuqiang.com    QQ/162020580

本文标题: Part 1 · HTML5-02-CSS 核心样式、H5 + C3 新特性

本文链接: https://www.guangfuqiang.com/zobk/a697607.html (转载时请保留)

网站首页

返回栏目
今日推荐
新闻举报 返回首页
更多
友情链接