CSS3单词表

CSS3单词表

CSS引入样式:

 

行内样式

<h1 style="color:red">

 

内部样式:

<herd>

<style>

h1{color:green;}

</style>

</herd>

 

外部样式:

链接式1.

<link href="文件路径" rel="stylesheet" type="text/css"/>

导入式2.

@import url("文件路径");

 

 

 

 

属性:

font-size:30px 字体大小

color:red 颜色设置

 

属性值:

 

 

(1)选择器:选择器遵循就近原则

 

标签选择器: HTML 标签作为选择器的名称

 

类选择器: .class{font-size:16px;} <标签名 class="类名称">标签内容</标签名>

 

ID选择器: #id{font-size:16px} <标签吗 id="id名称">标签内容</标签名>

 

 

 

(2)层次选择器:

E F 后代选择器 boody p{bcakgound:red;} 选择所有后代

 

E>F 子选择器 boody>p{bockgound:red;} 选择的是boody的子元素

 

E+F 相邻兄弟选择器 .active+p{background:green;} 选择兄弟元素,最近的一个p元素

 

E~F 通用兄弟选择器 .active~p{background:red;} 当前不选中,并列兄弟元素全部被选择

 

 

 

(3)结构伪类选择器

 

E:first-child

作为父元素的第一个子元素E

E:last-chlid

作为父元素最后一个子元素的E

E F:nth-child(n)

选择父元素E的第n给子元素F(n可以是1,2,3),关键字为even,odd,奇数,偶数

E:first-of-type

选择父元素内具有指定类型的第一个E元素

E:last-of-type

选择父元素内具有指定类型的最后一个E元素

E F:nth-of-type(n)

选择父元素内具有指定类型的第n个F元素

 

 

backgrou-color 背景颜色 transparent透明色

background-image:url("图片路径") 背景图片

 

背景图片重复方式:background-repeat

repeat:沿水平和垂直两个方向平铺

no-repeat:不平铺:即显示异常

repeat-x:只沿水平方向平铺

repeat-y:只沿垂直方向平铺

 

背景定位background-position

Xpos Ypos

单位:px x表示水平位置 y表示垂直位置

X,Y方向关键词:

X%,Y%:可以使用百分百表示背景的位置

水平方向关键词:left,center,right

垂直方向关键词:top,center,bottom

 

 

CSS3渐变兼容

IE是Teident内核,加前缀:-ms-

Chrome浏览器是Webkit内核.加前缀-webkit-

Safari浏览器是Webkit内核.加前缀-webkit-

Opera浏览器是Blink内核,加前缀-o-

Firefox浏览器是Mozilla内核,加前缀-moz-

 

 

线性渐变:

linear-gradient(position,color1,color2...)

linear-gradient(渐变方向,第一种颜色,第二种颜色)

兼容webkit内核浏览器:

--webkit-linear-gradient(position,color1,color2...)

 

 

a标签伪类

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

 

 

下划线样式

text-decoration下划线CSS单词值参数:

none :  无装饰

blink :  闪烁

underline :  下划线

line-through :  贯穿线

overline :  上划线

text-decoration:none 无装饰,通常对html下划线标签去掉下划线样式

text-decoration:underline 下划线样式

text-decoration:line-through 删除线样式-贯穿线样式

text-decoration:overline 上划线样式

 

content-box

border-box

box-sizing 盒子模型的尺寸

盒子模型 =边框+内边距+外边距

 

圆角边框:

语法:

border-radius:20px 10px 50px 30px;

四个属性值按顺时针排列

没有值的角,参照对边

设置圆形:

border-radius :50px 或者设置百分之50% border-radius:50%

设置半圆:

上半圆:border-radius: 50px 50px 0 0;

下半园:border-radius: 0 0 50px 50px;

左半圆:border-radius: 0 50px 50px 0;

右半圆border-radius: 50px 0 0 50px;

 

设置扇形:

遵循"三同一不同"原则

"一不同"是圆角取值位置不同

盒子阴影:

box-shadow:inset x-offset y-offset blur-radius color

inset 阴影类型内阴影

x-offset x粥位移,指定阴影水平移量

y-offset y粥位移,指定阴影垂直移量

 

网页布局及display属性:

标准文档流:指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列.这也是元素默认的排列方式

 

块级元素(block)

<h1>....<h6>,<p>,<div>,列表

内联元素(inline)

<span>,<a>,<img/>,<strong>....

 

内联标签可以包含域块元素中,成为它的子元素,而内联元素不可以包含块元素

 

display属性取值:

block 块元素,前后带有换行符

inline 内联元素,前后没有换行符

inline-block 行内块元素,既有内联元素特征,也具有块元素特征

none 设置元素不会被显示

 

 

float属性:

float属性取值:

left 左浮动

 

float:可以让元素在一行并且支持宽度和高度,可以决定排列方向

float:浮动以后元素脱离文档流,会对周围元素产生音响,必须在它的父级上添加清除浮动的样式

 

 

解决4种父级边框塌陷

总结:

1.浮动元素后面加空div

简单空div会造成HTML代码冗余

2.设置父窗体的高度

简单,元素固定高会降低扩展性

3.父级添加overflow属性

简单,下拉列表框的场景不能用

4.父级添加伪类after

写法比上面稍微复杂一点,但是没有副作用,推荐使用

 

清除浮动:

clear属性取值

left 在左侧不允许浮动元素

right 在右侧不允许浮动元素

both 在左,右两侧不允许浮动元素

none 默认值.允许浮动元素出现在两侧

 

 

溢出处理

overflow属性

overflow属性取值:

visible 默认值.内容不会被修剪,会呈现在盒子之外

hidden 内容会被修剪,并且其余内容是不可见的

scroll 内容会被修剪,但是浏览器会显示滚动条便于查看其余内容

auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容

 

父级添加伪类after

语法

HTML中 < class="clear">

CSS中 .clear:after{

content:'';

display:block

clear:both

}

 

Position属性

static:默认值,没有定位

relative:相对定位

absolute:绝对定位

fixed:固定定位

相对定位

relative属性值

偏移取值: top left right bottom

 

设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置

设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响

设置相对定位的盒子原来的位置会被保留下来 层级提高

 

绝对定位

absolute属性值 top left right bottom

 

使用了绝对定位的元素以它最近的一个"已经定位"的"祖先元素"为基准进行偏移

如果没有已经定位的祖先元素,会以浏览器窗口为基准进行定位

绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响

元素位置发生偏移后,它原来的位置不会被保留

固定定位

fixed属性值 top left right bottom

 

类似域绝对定位,不过区别在于定位的基准不是祖先元素而是浏览器窗口

 

 

z-index属性

默认值为0,设置了positon属性时,z-index可以设置各元素之间的重叠高低关系

 

CSS透明元素

opacity:x取值opacity:0.4, x值为0~1值越小越透明

filter:alpha(opacity=x) x值为0~100值越小越透明

 

 

CSS3变形

CSS3编写是一些效果的集合

如平移,旋转,缩放,倾斜效果

每个效果都可以称为变形(transform),透明可以分别操控元素发生平移,旋转,缩放,倾斜等变化

teansform:[transform-function]*;

设置变形函数,可以是一个,也可以是多个,中间以空格分开

变形函数

translate(tx,ty): 平移函数,基于X,Y坐标重新定位元素的位置

scale(sx,sy); 缩放函数,可以使任意元素对象尺寸发生变化

rotate(deg); 旋转函数,取值是一个度数值

skew(ax,ay); 倾斜函数,取值是一个度数值

 

 

CSS3过度

transition

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq2363894951

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值