css常用标签

选择符

一.元素选择符:

1. 通配符*{}

Hdml中所有标签属性

设置字体font-family:

设置字体大写font-size

2. 类选择器.hp{}

<div class="hp"></div>id

3. 选择符#hs

<div id="hs"></div>

4. 类型选择符(标签选择符):div{}

<div></div>

二.关系选择符

1. 子元素选择器div>p{}

父亲>儿子  不包括孙子

2. 兄弟选择器p~p{}

选择同级别的标签

3. 相邻选择器p+p{}

同一级别相邻的元素

4. 包含选择器div p{}

包含所有子孙

三.属性选择符

包含指定属性的标签,属性与属性值均匹配的标签

四.伪类选择符

  1. 元素link:设置超链接a在未被访问时的样式a:link{}
  2. 元素:visited:设置超链接a在其链接地址已被访问过时的样式a:visited{}
  3. 元素:hover:设置元素在其鼠标悬停时的样式a:hover
  4. 元素:active:设置元素在被用户激活(在鼠标点击与释放之间发生的时间)时的样式)a:active

 

注意:a:hover必须位于a:link和a:visited之后,a:active必须位于a:hover之后

 

五.伪对象选择符

  1. 元素::befofe{}  设置在对象前发生的内容。用来和content属性一起使用,并且必须定义content属性
  2. 元素::after{}    设置在对象前发生的内容。用来和content属性一起使用,并且必须定义content属性

li:befofe{

content:”>”

}

选择器的优先级

Imporeant>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符

注意:!important要写在属性值后面,分号的后面

例如;

P{

color:red ! important

}

背景

background-attachment:

背景图像是否固定或者跟随滚动

background-image: url();

背景图插入

background-color:

背景颜色

background-position:

背景位置

background-size:

背景大小

background-repeat:

背景是否平铺

 

 

 

 

颜色

1. 颜色值

color:red

color:#ff0000;

rgb(red, green, blue)

Reba( , , , )

透明色 color:transparent

2. 属性

透明度opacity:

0完全透明

1不透明

 

 

 

 

字体

1. 字体样式font-style:

normal正常;italic斜体;oblique倾斜

2. 字体大小font-size:

 

3. 字体粗细font-weight:

bold加粗;bolder更粗;lighter更细;400等同于normal;700相当于bold;

 

4.字体名称font-family:

Microsoft Yahei(微软雅黑),SimSun(宋体),SimHei(黑体

Font:样式 粗细 大小 字体名称;

5.字体颜色color

6.字体引入

(阿里图标字体库:https://www.iconfont.cn/)

@font-face{

    font-family:"abc";

    src: url(/css/Day1/世纪园林/Americratika.ttf);

}

 

*{

    font-family: "abc";

}

文本

1. 文本颜色color

2. 文本水平对齐方式text-align

 

3. 垂直对齐方式vertical-align

 

4. 行高line-height

 

5. 文本大小写text-transform

capitalize 单词首字母大写    uppercase全大写 lowercase全小写

6. 文本缩进text-indent

7. 文本修饰

7.1 装饰线text-decoration-line:

下划线underline、删除线line-through、顶划线overline;

7.2 装饰线颜色 text-decoration-color:

7.3 装饰线样式 text-decoration-style:

solid(实线)dotted(点线)dashed(虚线)double(双线)wavy(波浪 线)

7.4 装饰线、文本阴影

text-shadow:水平位移 垂直位移 模糊度 颜色;

 

 

8. 文本超出盒子设置overflow:

hidden;超出之后隐藏 scrol超出展示下拉框 visible超出展示

9. 文本超出行设置text-overflow:

ellipsis;文本超出显示省略号

10. 单词换行:word-break:

nowrap;文本不换行

列表

列表项标记的类型;list-style-type:

 

列表标记的图像;list-style-image:

list-style-position:

inside;  边框内显示文本以内 inherit   outside边框外

表格

边框重叠border-collapse:

collapse重叠边框 separate边框独立

边框颜色border-color:

文字居中text-a‘lign:center

背景色background-color:

元素

块级元素

可用{display:block}把内联元素设为块级元素

内联元素(行内元素)

可用{display:inline}把内联元素设为块级元素

内联块级元素

可用{display:inline-block}把元素设为内联块级元素

盒子模型

 

内边距:padding

 

 

边框:border

 

1. 边框宽度 border-width:

2. 边框样式 border-style:

solid(实线)dotted(点线)dashed(虚线)double(双线)

3. 边框颜色 border-color

 

4. 设置圆角边框border-radius

 

5. 设置对象阴影 box-shadow

 

6.边框背景图片 border-image

 

7.宽高包含区域box-sizing:

content-box(默认内容)

border-box;从边框开始

 

外边距:margin

 

盒内布局

1.盒子尺寸开始区域box-sizing:

content-box(默认内容)尺寸包含内边距外边距和边框

border-box;从边框开始尺寸包含内边距和边框

2.盒内布局(老)

定义浏览器内核

display: -webkit-box;  谷歌浏览器

Ie:ms

Opera:o

Firefox:moz

 

 

1. 子元素排列方式box-orient

默认值水平排列horizontal;

 

 

垂直排列vertical;

 

 

2. 水平居中box-pack

 

3. 垂直居中box-align

 

 

4. 子元素比例box-flex

 

 

5. 子元素排列顺序box-direction:

倒序排列reverse;

默认正序排列:

 

 

 

 

3.盒内布局(新)

1.按比例分配flex-grow

 

2.子元素排列方式flex-flow

 

3子元素flex-direction

 

4.子元素超出父级盒子后是否换行flex-wrap

 

  1. 子元素出现顺序order

 

定位position

  1. 默认没有定位:position: static;
  2. 想对于浏览器窗口定位:position:fixed;
  3. 相对定位,相对正常位置position:relative;
  4. 绝对定位,相对不是static的父元素定位position:absolute;
  5. 元素堆叠顺序值最大的在最上面:z-index:1;

fixed和absolute是不占据空间的,fixed不设置top,是相对于原来位置显示

static外可根据top:;left:;right:;bottom:;设置上、左、右、下偏移量

浮动

  1. 浮动float

左浮动float:left;

右浮动float:right;

  1. 清除浮动

clear:both;

1》父级元素后加元素:<div style=”clear:both”></div>

2》父级元素加::after{display:block;content:” ”;clear:both}

3》父级元素{overflow:hidden}

可视方式

是否可视visibility

  1. 对象可视:visible
  2. 对象隐藏:hidden
  3. 对溢出内容不做处理:overflow:visible;
  4. 隐藏溢出容器的内容且不出现滚动条overflow:hidden;
  5. 隐藏溢出内容,隐藏内容以滚动条方式展示overflow:scroll;
  6. 按需出现滚动条auto

溢出展示方式overflow

动画效果

2D/3Dtransform

2D效果

1. 移动translate:;

transform: translate(10px 10px);

 

2. 旋转rotate

 

3. 缩放scale

 

4. 倾斜skew

3D效果

  1. rotateX
  2. rotateY
  3. 规定应用过度CSS属性名称transition-property
  4. 过度效果时长transition-duration
  5. 过渡时间曲线transition-timing-function
  6. 线性过度linerar
  7. 平滑过度ease
  8. 由慢到快ease-in
  9. 由快到慢ease-out
  10. 由慢到快再到慢ease-in-out
  11. 过渡延迟时间transition-delay

过渡transition

动画

@keyframes创建动画; animate.css

@keyframes myfirst

{

from{background:red;}

to{background:yellow;}

}

animation:动画名 2s;

 

animate.css扩展文件

多列columns

  1. 列数column-count:
  2. 每列宽度column-width
  3. 列与列之间间隙column-gap
  4. 列与列之间边框column-rule
  5. 边框厚度column-rule-width
  6. 边框样式column-rule-style
  7. 边框颜色column-rule-color

媒体

检测浏览器尺寸并展示对应样式

居中总结

水平居中

  1. margin:0 auto;
  2. 文字居中:

line-height

text-alingn:center

  1. 基于盒子居中

{dispalay:-webkit-box;

-webkit-box-pack:center;

-webkit-box-align:center;

}

css常用标签

上一篇:.net core


下一篇:Kubernetes 1.20.1 版 高可用环境搭建(普通版)