CSS知识点汇总 (全是干货O(∩_∩)O~ )

2018-06-24 01:02:11来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一、CSS选择器

【选择器的命名规则】
 1、只能有字母数字下划线组成,不能有其他任何特殊字符
 2、开头不能是数字

 

【通用选择器】
1、写法:*{}
2、作用:选中页面中的所有标签(大范围修改)
3、优先级:最低,,低于所有选择器
eg:
{
font-size: 20px;
}

【标签选择器】
1、写法:HTML标签名{样式属性:样式属性值;....}
2、作用:选中页面中所有的对应标签
eg:
li{
color: red;
}

【类选择器class选择器】
1、写法:.选择器名称{}
调用:在需要改变样式的标签上,使用class"选择器名称"挑用对应选择器
2、作用:修改所有调用选择器的标签
3、优先级高于标签选择器
.li{
color: blue;
}
【ID选择器】
1、写法:#选择器名称{}
调用:在需要改变样式的标签上,使用id='选择器名称'调用对应选择器
2、注意事项:id是唯一的,同一页面,只能有一个ID
3、优先级:大于class选择器
#li{
color: yellow;
}
【后代选择器】常用
1、写法:选择器1 选择器2 选择器3...{}
例如:div .li{}需满足,div里面的class="li"的元素,class="li"的元素可以是div的子代,
也可以是div的后代(孙代往后。。。)

div .li{
color: red;
}
【子代选择器】不常用
1、写法:选择器1> 选择器2 >选择器3...{}
 例如:div .ul{}则,ul必须是div的直接子代,孙代以后不选中
div .ul{
color: black;
}
【交集选择器】
1、写法:选择器1选择器2...{}
例如:.li#li{}元素必须同时具备class="li"并且id="li"才能生效
.li#li{
color: red;
}
【并集选择器】
1、写法:选择器1选择器2,...{}
例如:.li,#li{}元素只要具备class="li"或者id="li"就能生效
.li,#li{
color: red;
}

【选择器的优先级】
1、第一原则:近着优先,最内存选择器永远比外层优先
例:div ul li>div #ul ,li在ul内层,所以li标签选择器,能覆盖外层id选择器
2、当作用在同一层时,ID选择器>class选择器>标签选择器
例:div #li>div ul .li>div ul li只要最后一个选择器,都作用在li上,
那无论之前有多少层选择器嵌套均没有远近关系
3、当作用于同一层,且最后一层为同等选择器(均为class或id或标签)
 例:div ul .li>div .li作用范围选的越精准,则优先级越高
4、当优先级完全相同时,写在后面的选择器,会覆盖前面的选择器

 

【伪类选择器】

1、写法:选择器名称:伪类状态{}

常见的伪类状态:

link-未访问状态visited-已访问状态hover-鼠标指上状态

active-激活选定状态(鼠标点下去未松开)focus-获得焦点时(input常用)

2、超链接多种伪类共存的顺序:link(visited)-hover-active

<head>

 

 

</head?

<body>

<a href="QQ图片20170301140846.gif">这是一个超链接 </a>

<body>

/*当li有hover事件时,li的后代元素div样式发生变化*/

eg:

 

 

 二、CSS文本属性:

 

00%=16px(浏览器)

长度单位:px,像素

颜色单位:

1、十六进制:#ff红色ff绿色ff蓝色0-9 a-f #FFFFFF #FFF分别对应红绿蓝比例 最常用

2、直接写颜色英文名字:red

3、RGB颜色:RGB(0-255,0-255,0-255)三原色

RGBA(0-255,0-255,0-255,0-1)四位数表示透明度,0全透明1不透明

尺寸属性:

width,min-width,max-width height

 

 

【常用的文本属性】

1、字体、字号:

font(缩写形式)

font-weight(粗细)字体的粗细可选属性值:bold加粗lighter细体100-900数值(400正常,700bold 

font-size(大小) **px **%(浏览器默认字体大小的百分比,绝大部分默认16px)

font-family(字体系列)字体族,设置字体。

>>多个字体样式之间用逗号分隔,浏览器解析时,会从左往右依次解析,选择可用字体

>>一般前面使用具体字体名称,最后一个使用字体族类名称

(常用字体族名称:衬线体serif 非衬线体san-serif(常用)等宽体monospace)

例如:font-family:Arial,"Microsoft Yahei",sans-serif;

font-style(字体样式)正常normal斜体italic

(以下了解)

font-varient:small-caps;将字母转为小型大写字体

font缩写形式:font-style,font-variant,font-weight,font-size,line-height,font-family

>>>注意事项

①顺序必须按照上述顺序

②多个样式之间用空格分隔,而且font-size/line-height必须作为一对用/分割

③font-size和font-family必须指定,其他样式不指定将采用默认样式显示

>>>例如:font:italic bold 75%/1.8 "Microsoft Yahei",sans-serif;

斜体 加粗 字号/行高 字体族(微软雅黑,非衬线)

2、字体颜色:

color

opacity  需要配合color(透明度 css3)0-1之间的数字调整时,控件以及子控件均会透明,

而使用rgba调整时,只会使本控件透明,子控件不会发生透明变化

3、行距、对齐等:

line-height (行高)①像素单位48px②不带px正常行高的倍数③百分数 同2

>>典型应用,调整控件中文字垂直居中的方式:控件的height=控件的line-height 

text-align (对齐)块级元素控件中文字的水平对齐方式left center right 

letter-spacing (字符间距)字与字之间的间距

text-decoration (文本修饰 )下划线下划线overline

line-through删除线

overflow 控制超出范围文本的显示方式(auto根据文字多少自动选择滚动条scroll始终显示滚动条hedden超出范围文本隐藏)可以通过overflow-x/设置水平垂直方向

text-overflow:设置多余文字的显示方式clip裁剪掉ellipsis省略号

【重点】让每行多余文字显示省略号:三步

①white-space: nowrap;如果是中文,需设置行末不断行

②overflow:hidden;设置控件超出范围隐藏

③text-overflow:ellipsis;设置多余文本显示省略号

white-space: nowrap; 修改中文行末不断行显示

word-break:设置英文行末断行:浏览器默认在空格处断行,break-all允许在单词内换行。

(上记住下会用)

text-shadow(文本阴影)四个属性值:

①水平阴影距离 必选,数值越大,阴影右移

②垂直阴影距离 必选,数值越大,阴影下移

③阴影模糊距离 可选,数值越大,阴影越模糊。默认为0,不模糊

④阴影颜色 可选,默认为黑色

2px水平5px垂直 5px阴影的模糊距离green

text-indent:首行缩进,可用像素值调整缩进大小

text-stroke:描边的粗细,描边的颜色

 三、背景属性

CSS常用背景属性】

background (缩写形式)

1、background-color(背景色 )

2、background-image: (背景图 )

url(图片地址相对路径);背景图与背景色同时存在时,背景图会覆盖背景色

3、background-repeat(背景图重复方式 ):

repeat平铺(默认)no-repeat不平铺repeat-x水平平铺y垂直平铺

4、background-size(背景图大小)

【指定宽度、高度】

>>>宽高的写法:第一个属性值为宽度,第二个属性值为高度

可以直接①写像素②写百分比(父容器宽高的百分比)cover覆盖contain

>>>当只有一个属性值时,默认为宽度、高度等比缩放

当有两个属性值时,会按照指定的宽度高度进行压缩/拉伸显示

【其他属性值】

>>>contain:图片等比缩放,缩放到宽或高的某一边等于父容器的宽高,另一边按照图片大小缩放(可能导致空余部分区域无法覆盖)

>>>cover:图片等比缩放,使背景图像完全覆盖背景区域(可能导致背景图部分区域无法显示)

5、background-position(位置坐标、偏移量)

>>>指定位置:left/center/right top/center/bottom

当只写一个属性值时,另一个默认居中

>>>填写坐标像素:水平位置 垂直位置(像素或百分比形式)

① 当只写一个属性值时,默认写的是水平方向垂直居中

②当使用像素时:图片的左上角往各个方向移动的实际距离(左负右正,上负下正)

水平方向:正数右移,负数左移 垂直方向:正数下移,负数上移

③当使用百分数时,一般只能是正数。代表去掉图片后剩余空白距离的分布比例

例如:background-position:30%;水平方向去掉图片后,剩余区域3:7分

6,7了解)

6、background-origin设置背景图的定位方式。

border-box从边框外缘开始显示,padding-box从边框内缘开始,content从文字内容开始

从背景图哪个位置开始裁切

7、background-clip裁切背景图和背景色显示区域。

border-box从边框外缘开始,padding-box从边框内缘开始显示,content-box从文字内容区开始显示。不在显示区域内的背景图或背景色,会被裁切不显示

background-origin不改变背景图显示区域大小,只是决定左上角定位位置

background-clip不改变定位位置,只是通过裁切显示部分区域

添加边框:

border: 30px green dotted;

四、盒子模型

[margin ]外边距

1、写一个值:上下左右四个方向均为指定数值

2、写两个数值:第一个数=上下margin,第二个数=左右margin

3、写三个数值:上右下 左边默认等于右边

4、写四个数值:上右下左四个方向 顺时针

5.margin:0 auto;块级盒子,在父容器中水平居中 

[border 边框]

1、三个属性值:宽度、样式、颜色,原则上不能少。顺序可随意安排

solid 实线框

dashed虚线框

2、可以用top right left bottom修改四个方向

[padding 内边框]

1、padding为内边距,会使盒模型的整个可视区域变大,使用时需要注意盒模型实际显示的区间大小

2、其他使用同margin

Border-radius】

1、可以接受8个属性值:X轴(左上、右上、右下、左下)/Y轴同X

例如:border-radius:50px 50px 50px 50px/50px 50px 50px 50px;

 

2、只写X轴时Y轴默认=X轴,只写左上角,默认=右下角。只写一个角默认对角相等

例如 border-radius:50px 0px 50px 0px/=border-radius:50px 0px 50px 0px/50px 0px 50px 0px

 

3、只写一个数,默认八个数默认相等

box-shadow】盒子阴影

六个属性值,空格分割:

X轴阴影距离:(必选)可正可负,正——右移,负——左移

Y轴阴影距离:(必选)可正可负,正——下移,负——上移

阴影模糊距离:(可选)只能为正,默认为0,数值越大,阴影越模糊

阴影扩展半径:(可选)可正可负,默认为0,数值增大,阴影扩大,数值减少,阴影缩小

阴影颜色:(可选)默认为黑色

内外阴影:(可选)可选值,inset(内阴影) 默认为外阴影

[border-image]图片边框

十个属性:

①图片路径:url()

②图片切片宽度:4个值,分别代表上、右、下、左,四条切线。通过四条切线切割后,会把图片分成九宫格,四个角分别对应边框的四角(不会进行任何拉伸),四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)

写的时候不能带像素单位

③图片边框的宽度:4个值,分别代表上右下左四条边框,可以省略,默认等于切片宽度

写的时候必须带像素单位

④边框背景重复方式:stretch(拉伸)、round(铺满)、repeat(平铺)

【铺满和平铺区别】

平铺:会保持原有四条边的宽度,进行平铺。可能导致角落处无法显示完整一个图标,


 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:将html部署到虚拟云服务器,实现获取唯一的网址链接,通过了浏览

下一篇:transform做2d和3d变形(css动画一)