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 | |
| 400 | 400等同于normal |
| 500 | |
| 600 | |
| 700 | 700等同于bold |
| 800 | |
| 900 | |
| inherit | 规定应该从父元素继承字体粗细 |
- 作用：设置文字的风格
| 属性值 | 说明 |
|---|---|
| normal | 正规字体 |
| italic | 设置斜体文字，主要用于英文 |
| oblique | 设置倾斜文字，只是将文字倾斜，和字体无关 |
- 作用：line-height设置行高，font-size设置字体大小之后，有默认的行高，如果改变默认行高，需要line-height来修改
| 属性值 | 说明 |
|---|---|
| px像素值 | 设置行高具体的像素值 |
| 百分比数值 | 设置本身字体的百分比值，100%就是原本大小，200%就是2倍字体大小 |
- 回忆5个字体单一属性： font-family 、font-size 、font-weight、 font-style 、line-height
- 为了减省代码量，提高书写效率，如果某字体被定义多个属性，可以采用综合属性写法
- 同时设置字号、字体 （字号必须在前面，字体在后面，不能颠倒）
- 同时设置字号、字体、行高（书写顺序必须是行高、字号、字体，且行高和字体之间用/隔开）
- 同时设置字号、字体、行高、加粗、斜体（书写顺序必须是行高、字号、字体在后面，且行高和字体之间用/隔开，加粗、斜体写在前面，加粗、斜体可以换顺序
- text-align 文本对齐
| 属性值 | 说明 |
|---|---|
| left | 整个文本向左对齐 |
| right | 整个文本向右对齐 |
| center | 整个文本居中 |
- text-decoration 文本装饰（加或不加线条）
| 属性值 | 说明 |
|---|---|
| onoe | 没有修饰 |
| overline | 上划线 |
| line-through | 中划线，删除线，del标签的默认值 |
| underline | 下划线 |
- 文本缩进text-indent
| 属性值 | 说明 |
|---|---|
| px单位 | 表示首行缩进多少px单位像素（按像素值缩进平时不太常用） |
| em单位 | 倍数，自动参考一个文字的大小宽度，以文字大小宽度为字符来缩进，好处：根据文字变大而变大，文字变小而变小，2em实现首行缩进2个字符 |
| 百分比单位 | 不太常用，参考的盒子width宽度，按盒子宽度的百分度来缩进 |
- 盒模型
- 概述：盒模型也称为框模型，包含5个属性： width 宽 height 高 border 边框 padding 内边距 margin 外边距 （盒子跟外部盒子之间的边距）
- 常见盒模型区域 ：
- 书写元素内容区域：width+height
- 盒子实体化区域：width+height+padding+border
- 盒子实际占的位置：width+height+padding+border+margin
| 属性值 | 说明 |
|---|---|
| auto | 默认值，浏览器根据实际情况计算宽度 |
| px | 像素值定义的宽度（固定值） |
| % | 参考父元素宽度width的百分比来定义的宽度 |
等需要独占一行的元素，不设置width时，它的宽度值会自动撑满父元素的width区域等不需要独占一行的元素，不设置width时，它的宽度根据元素内部的内容来决定，内容撑开有多宽，就是多宽元素比较特殊。不需要设置width属性，宽度会自动适应浏览器的宽度
| 属性值 | 说明 |
|---|---|
| auto | 默认值，浏览器根据实际情况计算高度 |
| px | 像素值定义的高度（固定值） |
| % | 参考父元素宽度height的百分比来定义的高度 |
- 作用：设置元素的内边框，就是边框内部到宽高区域之间的距离
- 特点：能渲染背景
| 属性值 | 说明 |
|---|---|
| px | 像素值定义的距离 |
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
;
- border盒模的边框
| 属性值 | 说明 |
|---|---|
| width | 线的宽度 |
| style | 线的形状 |
| color | 线的颜色 |
- border-width 定义 边框四边的宽度，四值写法类似padding
- border-style （属性值：实线solid 虚线dashed 无边框none 凹陷槽3D效果groove3D效果 ridge 等等）3D效果容易出现兼容问题，四值写法类似padding，每条边可以设置不同属性值，中间用空格
- border-color 四值写法类似padding，四边可以设置不同颜色
- 作用：设置盒子与盒子之间的距离
- 特点：不能渲染背景
- 属性值：px 应用书写方式和padding一样
- 举例：删除默认的内外边距
- 标签选择器并集方式
p
,
p
,
h1
,
p
,
h3
{
margin
:
0
px
;
padding
:
0
px
;
}
*
{
margin
:
0
px
;
padding
:
0
px
;
}
- 盒子高度的应用 根据不同的需求，盒子的高度可以设置也可以不设置（实际工作中，根据项目设计来定） 如果不设置，会根据标签内部内容高度自动撑开 如果设置，盒子高度就固定死了，后面同级元素会紧挨着加载 在设置了盒子固定高度的情况下，里面的文字太多的时候，盒子是装不下的，就会出现文字溢出现象
| 属性值 | 说明 |
|---|---|
| visible | 默认值，溢出部分可见的（全部溢出在页面） |
| hidden | 把溢出的文字部分进行隐藏，超过盒子边框的全部被隐藏 |
| scroll | 水平+垂直方向加滚动条，隐藏溢出部分，可以拖动滚动条查看 |
| auto | 自动的，如果没有溢出就正常显示，如果溢出，溢出的方向就自动出现滚动条 |
- 文本居中：text-align：center; （无论单行或多行都可以设置）
- 单行文本垂直居中：让文字行高line-height等于盒子的高度
- 多行文本垂直居中：设置元素高度自适应或者高度正好等于多行文字撑起来的行高，然后设置盒子上下内边距padding为相同值，实现多行文本垂直居中
- 让父元素内嵌套的元素垂直居中，和多行文本垂直居中的方式类似，设置父元素高度自适应，子元素高度自动撑开父元素高度，给父元素设置上下内边距padding为相同值
- 针对类似于
样式上必须独占一行的盒子，如果子盒子低于父盒子的宽度，可以设置子盒子的margin值，水平方向的值都设置成auto，自动撑满整个父元素除了子元素宽度外的剩余区域
- 父子盒模型：父子盒子里面可以装一个或者多个儿子盒子
- 条件：父元素的width≥所有子元素的width+padding+margin+border 注意： 如果不满足条件，父盒子里面多余的子元素要么溢出父盒子，要么跟其他的儿子不在一行，会掉到下一行
- 垂直方向的margin，两个元素的margin边相遇时，数值小的塌陷到数值大的那一边，不是两个margin值相加 水平方向的margin，不会有塌陷 父子元素也会出现塌陷现象，同理，小的值塌陷到大的值那边
- 同级元素：2个元素遇到塌陷问题，只需要设置其中一边的margin值就可以了，不用两边都设置
- 父子元素：让父子的两边不要相遇，用其中一个padding或者border将间距隔开
- HTML（是一种标准的文档流文件）
- 标准的文档流特点有2种方式体现：微观现象+元素等级 微观现象：空白折叠现象、自动换行现象、文字类元素若排在一行，会出现高低不齐，底边对齐现象 元素等级： 标准流中，大部分元素是区分等级的，几种常见的加载级别： 块级元素、行内元素、行内块元素
- 块级元素：大部分容器级标签包括p标签都是块级元素，比如
、 - 行内元素：大部分文本级标签，比如
- 行内块元素：比如
- 标准文档流：指元素在排版布局过程中，元素默认自动从左至右，从上至下的流式排列方式。
前面内容发生变化，后面内容的位置也发现变化 标准文档流中，大部分元素是区分等级的，几种常见的加载级别： 块级元素、行内元素、行内块元素 块级元素: 可以设置长宽高，并且独占一行，不能与其他标签并列一行，如果块级元素不设置宽度，会自动撑满夫级的width区域，不设置高度，会被内容自动撑开 行内元素: 行内元素不能正常加载高度和宽度，行内元素可以跟其他行内或者行内块元素拍成一行显示 行内块元素: 可以设置宽度和高度，可以与行内的块元素拍成一排显示
| 属性 | 作用 |
|---|---|
| block | 把元素设置成块级元素加载 |
| inline | 把元素设置成行内元素加载 |
| inline-block | 把元素设置成行内块模式加载 |
| none | 表示隐藏标签内的内容以及标签，让出原有标准流的位置 |
- 浮动（一种非常重要的布局属性）
| 属性名 | 属性值 |
|---|---|
| float | left |
| float | right |
- 浮动的性质（浮动元素没有margin塌陷，margin塌陷现象出现在标准流中，因为浮动元素已经脱离了标准流，所以不会有margin塌陷现象） 浮动的元素会让出标准流的位置，留给下一个同级元素占位
- 字围现象：同级元素中，前面元素浮动，后面元素不浮动且元素内有很多文字，这种情况会出现字围现象。
（后面元素内的位置围绕前面元素显示）
- 解决浮动存在的问题的方法：
- 设置父元素高度和子元素一样高（方法有局限性，治标不治本）
- 清除浮动影响，clear属性，作用（清除标签元素自身受到的前面浮动元素的影响）
| 属性名 | 属性值 | 作用 |
|---|---|---|
| clear | left | 清除前面元素左边浮动带来的影响 |
| clear | right | 清除前面元素右边浮动带来的影响 |
| clear | both | 清除前面所以浮动带来的影响 |
- 外墙法：在两个父级元素之间加个
例如：
.
clear
{
clear
:
both
;
>
}
- 内墙法：在父元素内部，所以浮动子元素后加个空的
,标签高度设置为0，添加clear属性 能解决父元素高度自适应
- 伪类清除浮动影响法 伪类法清除浮动的本质和内墙法一致，只是把HTML标签的书写改成了CSS代码书写内墙 书写方法： 伪类选择器：通过选中的标签添加伪类，去选择标签的某个状态或者位置 :after 此伪类表示选中的标签内部的最后的位置 注意（:after的前面要紧跟着7类选择器）
.
clearfix
:
after
{
content
:
"1"
;
添加一个文字内容
display
:
block
;
将文字转化为块元素
height
:
0
;
将盒子高度固定为0，避免影响父盒子的高度
clear
:
both
;
清除前面浮动的影响
visibility
:
hidden
;
将创建的元素隐藏并继续占有位置
}
- 溢出隐藏，overflow属性 这是一个小偏方，和清除浮动没啥关系，但是很好用，不添加任何清除浮动属性的情况下，就在父盒子里面加一条overflow：hidden，就解决了浮动影响问题 例如：
.
box
{
width
:
800
px
;
margin-bottom
:
10
px
;
border
:
10
px
solid
rgb
;
overflow
:
hidden
;
}
- 伪类的概念： 伪类和类的权重是一样的 伪类和类有一定的相似处，也存在明显的区别 写法不同 只有用户触发了对应的行为，伪类的样式才会立即记载 例如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
;
}
- 背景样式属性为综合属性，和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
;
}
- 如果属性值没有设置完全，没有设置的单一属性会按照默认值加载
- 如果想层叠综合属性的一部分，其他属性保持不变，最好使用单一属性进行层叠
- 背景图替换标签的插入图，用css的background-image 替换html中的
- padding区域背景图（根据实际情况灵活应用)
- 精灵图（又称CSS雪碧、css SpritesS），网上自行制作 将网页中所有需要到的小图片放在一张图里面.png 再根据背景定位选择需要记载的一部分进行定位
| 属性名 | 属性值 |
|---|---|
| background-color | rgba，在rgb基础上增加了alpha |
| background-size | px值、百分比、cover、contain |
| 属性名 | 属性值 |
|---|---|
| position | ralative 相对定位 |
| position | obsolute 绝对定位 |
| position | fixed 固定定位 |
- 不会脱离标准流，不会让出自己原来的坑位给其他元素 参考元素是自己，通常按left top 来书写定位
- 场景应用： 导航条应用
- 会脱离标准流，设置了绝对定位的元素，会让出自己原来占的坑给其他元素使用 参考元素是距离最近的有定位的祖先元素，如果祖先元素没有定位，参考
- 参考
时 如果top参与定位，参考点是body页面的左上角left和右上角right 如果buttom参与定位，参考点是body页面首屏的左下角left顶点或右下角顶点right
- 会脱离标准流，让出自己的坑位 参考元素为浏览器窗口（浏览器窗口的四个顶点）
- 所有的定位类型都可以实现压盖效果，常用绝对定位制作压盖效果
- 定位的实际应用---居中效果 用百分比写法 例：
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属性只能设置给定位的元素才能生效，如果给没有定位的元素设置，不会生效
- 代码练习
- 狭义概念：HTML的修改升级版，增加了很多新的语义特性
- 广义概念：CSS+javascript+html总称 优势很多 缺点：IE9以下的浏览器不兼容
- 把网页划分成几块有更对语义化的模块
导航标签article>主体标签尾部标签
- 这种语义化标签主要针对搜索引擎的
- 这些新的标签在页面中可以使用多次
- 在IE9中，需要把这些元素转换为块级元素
| 属性名 | 属性值 | 说明 |
|---|---|---|
| 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
>
| 属性名 | 属性值 | 说明 |
|---|---|---|
| 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+ |
输入标签例：<
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
>
城市:<
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中新增表单属性属性名 属性值 描述 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 可以上传多个文件- 跟后代选择器区别：子集选择器只能选儿子，不能隔代选 书写方式： .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+元素2 同级元素中，元素1紧跟着后面的那一个元素2 选择结果：只会作用于紧跟元素1后面的元素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
>
段落1p
>
<
p
>
段落2p
>
<
p
>
段落3p
>
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-property none 、all 、属性名（使用具体的属性，多个属性名中间用逗号分隔 规定应用过渡的CSS属性的名称 transition-duration 以秒s为单位 定义过渡效果花费的时间，默认值是0 transition-timing-function linear、ease、ease-in、ease-out、ease-in-out,函数自己取值) 规定过渡效果的时间曲线，默认值是ease transition-deay 以秒s为单位 规定过渡效果延时时间，什么时候开始，默认是0
12D转换-位移- 属性名：transform
- 作用：对元素进行移动、缩放、转动、拉长或拉伸 位移效果和（绝对-相对路径）可以一样
位移属性值 说明 translate x.y分别为水平和垂直方向位移的距离,px像素值或者百分比（区分正负） translane 只设置一个值的时候，表示水平方向位移
12D转换-缩放- 属性名：transform
- 作用：对元素进行移动、缩放、转动、拉长或拉伸
缩放属性值 说明 scale x.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 创建的动画作用于
用关键词 "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 规定动画完成一个周期需要的时间。免责声明：本平台仅供信息发布交流之途，请谨慎判断信息真伪。如遇虚假诈骗信息，请立即举报
举报
反对 0
打赏 0
更多相关文章
评论
0
收藏
点赞
