欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS常用样式属性锦集

程序员文章站 2024-03-24 20:29:58
...

以下快捷键针对webstorm,idea原则上也可以,我用idea打标签快捷键都可以,样式快捷键打不出。

一、文字属性

1、文字样式属性

格式:font-style: italic;
取值:normal:正常显示 italic:斜体

快捷键:
fs font-style: italic;
fsn font-style: normal;

2、文字粗细属性

格式:font-weight:bold;
取值:lighter:细线(默认) bold:加粗 bolder:加粗更粗

快捷键:
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;

3、文字大小属性

格式:font-size:30px;
单位:px

快捷键:
fz font-size:;
fz30 font-size: 30px;

4、文字字体属性

格式:font-family:;

注意:
1、中文需要双引号或单引号
2、设置的字体必须是用户电脑安装的字体
设置的字体不存在,系统使用默认字体显示,想要使用设置的字体,可设置备选方案,用逗号隔开
中文英文单独设置字体:
中文字体都包含英文
中文都有英文名称,能处理中文才是中文字体,因此先英文后中文
常见字体:中文:宋体、黑体、微软雅黑 英文:“Times New Roman”、“Arial”
快捷键:
ff font-family:;

简写连体:

font:style weight size family;

注意: 简写中,样式、粗细可省略,可交换位置;大小字体不能省略、交换位置。

 

二、文本属性:

1、文本装饰属性

格式:text-decoration: underline;
取值:underline下划线 line-through删除线 overline上划线

快捷键:
td text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;

2、文本水平对齐属性

格式:text-align: left;
取值:leftright右边 center中间

快捷键:
ta text-align: left;
tar text-align: right;
tac text-align: center;

3、文本缩进属性

格式: text-indent:;
取值:em,px

快捷键:
ti text-indent:;

4、文本颜色属性

格式:color: #000;
取值方式:英文单词、rgb(0,0,0)、rgba(0,0,0,亮度(0-1))、16进制(#000)

 

三、选择器

1、标签选择器

选中当前界面所有的标签

格式:

标签{
    属性:值;
    }
2、id选择器

根据制定的id选择对应的标签,具有唯一性,只能字母/数字、下划线组成,并且不能数字开头,大多数是给js使用

格式:

#id名称{
    属性:值;
    }
3、类选择器

根据制定的类选择对应的标签,具有重复性,命名方式与id一样,一个标签可设置多个类名,以空格隔开。

格式:

.类名称{
    属性:值;
    }
4、后代选择器

找到指定标签中所有指定标签

格式:

标签1 标签2{
    属性:值;
    }
5、子元素选择器

找到指定标签中所有特定子元素标签

格式:

标签1>标签2{
    属性:值;
    }
6、交集选择器

格式:

标签1标签2{
    属性:值;
    }
7、并集选择器

格式:

标签1.标签2{
    属性:值;
    }
8、兄弟选择器

相邻:给指定选择器后紧跟选择器选中的标签设置属性

格式:

标签1+标签2{
    属性:值;
    }

通用:给指定选择器后所有选择器选中的标签设置属性

格式:

标签1~标签2{
    属性:值;
    }
9、序选择器

同级别第几个:

:first-child同级别第一个
:last-child同级别最后一个
:nth-child(n)同级别n个
:last-child(n)同级别倒数n个
:only-child同级别唯一一个

:nth-child(odd)同级别奇数,
:nth-child(even)同级别偶数
:nth-child(xn+y)

同级别同类型第几个:

:first-of-type同级别同类型第一个
:last-of-type同级别同类型最后一个
:nth-of-type(n)同级别同类型n个
:last-of-type(n)同级别同类型倒数n个
:only-of-type同级别同类型唯一一个

:nth-of-type(odd)同级别同类型奇数,
:nth-of-type(even)同级别同类型偶数
:nth-of-type(xn+y)

10、属性选择器

根据指定的属性选择对应标签

格式:

[attribute]
[attribute=value]

(1、)属性取值以什么开头

[attribute|=value] CSS2(只能找到value开头并-隔开的)
[attribute……=value] CSS3

(2、)属性取值以什么结尾

[attribute$=value] CSS3

(3、)属性取值包含某个特定值

[attribute~=value] CSS2
[attribute*=value] CSS3

11、通配符选择器

格式:

*{
    属性:值;
}

 

四、CSS三大特性

1、继承性

作用: 父元素设置的属性,子元素也能使用

注意:并不是所有的属性都可以继承
1、只有以color/font-/text-/line开头的属性才可以继承
2、不仅仅儿子可以继承,后代都可以继承

特殊性:
a标签的文字颜色和下划线不能继承,h标签的文字大小不能继承

继承应用: 设置网页的共用信息
 

2、层叠性

多个选择去选择同一标签,设置相同的属性才会发生层叠性
 

3、优先级

当多个选择去选择同一标签,设置相同的属性,如何层叠由优先级决定

优先级判断的三种方式:

1、间接选中指继承
谁离目标标签近听谁的

2、相同选择器(直接选中)
都是同类型选择器,写在后面的有效

3、不同选择器(直接选中)
不是同类型选择器,按选择器优先级层叠
id>类>标签>通配符>继承>浏览器默认

!important:用于提升某个直接选中标签的选择器中的某个属性的优先级,可以将被指定的属性的优先级提升为最高
只能用于直接选中,不能用于间接选中
通配符是直接选中标签
!important只能提升被指定属性的优先级,其他属性优先级不会被提升

优先级权重问题(直接选中):

作用: 多个选择器混合在一起使用,可通过计算权重方式判断高优先级
计算规则: 先看id个数,相同则看类个数,再相同则看标签名称个数,之后不再计算,写在后面的有效

四、页面背景与盒模型

1、背景颜色

格式:background-color:;
取值:单词、rgb(0,0,0);、rgba(0,0,0,亮度);、#000;

2、背景图片

格式:background-image: url();

background-repeat:repeat;默认

background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;

3、背景定位

background-position: 0 0;
取值: 具体方位名词(left center right top center bottom)或具体像素

关联方式:
格式:background-attachment:scroll;默认
取值:fixed

背景属性简写:background:背景颜色 背景图片 平铺方式 关联方式;,任何一个属性都可省略

4、css精灵图

减少请求次数,降低服务器的压力
需要配合背景图片和背景定位使用

5、边框属性

格式:

连写1:

border:边框宽度 边框样式 边框颜色

快捷键:bd+
连写中:颜色可以省略,默认黑色,样式不能省略,宽度能省略

连写2:

border-top:边框宽度 边框样式 边框颜色
border-right:边框宽度 边框样式 边框颜色
border-left:边框宽度 边框样式 边框颜色
border-bottom:边框宽度 边框样式 边框颜色

连写3:

border-width:上 右 下 左
border-style:上 右 下 左
border-color:上 右 下 左

非连写:

border-top-width:
border-top-style:
border-top-color:

内边距属性:

非连写格式:

padding-top:

连写:

padding:上 右 下 左

省略取值与边框属性一样

外边距属性:

margin-top:

连写:

padding:上 右 下 左

省略取值与边框属性一样

外边距合并:
默认布局水平方向外边距进行叠加,垂直方向外边距取最大值

6、盒模型

内容区域+内边距+边框+外边距
内容的宽度和高度:内容区域
元素的宽度和高度:可视范围,内容区域+内边距+边框
元素空间的宽度和高度:元素所有区域,内容区域+内边距+边框+外边距

box-sizing属性
格式:box-sizing:border-box;

css3新增属性,盒子增加padding和border,盒子宽高不变,自动减去内容的宽高。
如果两个盒子是嵌套关系,设置了里面盒子顶部的外边距,大盒子与小盒子同时被顶下,需要给大盒子设置边框
padding是控制父子关系的间隙
margin是控制兄弟关系的间隙

注意: 嵌套关系中,利用margin:0 auto, 控制里面元素水平居中与外面元素

盒子居中与内容居中:
盒子居中:margin:0 auto;
内容居中:text-align:center;

五、网页布局方式:

1、标准流排版:

块级:垂直排版
行内/行内块级:水平排版
浏览器默认排版方式

2、浮动流排版

半脱离标准流排版,只能水平排版

注意: 浮动流没有居中对齐,margin:0 auto;在浮动流中无效
特点: 在浮动流中不区分块级、行内块级、行内元素;并且都可以设置宽高。

浮动元素脱标:相当于在标准流删除

浮动元素排序规则:
相同方向的浮动,先浮动的会显示在前面
不同方向的浮动,左浮动会对应左浮动,有浮动会对应右浮动
浮动元素浮动之后位置会根据浮动之前标准流的位置确定

清除浮动

在标准流中内容可以撑起父元素的高度,而在浮动中不能撑起

方式1:
给前面一个父元素设置高度(在企业开发中能不写高度就尽量不写),因此不常用

方式2:
给后面的盒子添加clear属性
clear取值:left,right,both,none
注意:设置了clear属性,margin属性会失效

方式3:隔墙法(不常用)
1、外墙法:
两个盒子中间添加块级元素并清除浮动
注意:可以让第二个盒子使用margin-top属性,但不能让第一个盒子使用margin-bottom,可直接设置高度达到margin效果

2、内墙法:
第一个盒子最后添加块级元素并清除浮动

注意点: 可以让第二个盒子使用margin-top属性,也能让第一个盒子使用margin-bottom,可直接设置高度达到margin效果

区别: 外墙法不能撑起第一个盒子的高度,内墙法能撑起第一个盒子的高度

伪元素选择器:
1、给指定标签的内容前面或后面添加一个子元素
格式:

标签名称::before{
    属性名称:值;
    }

2、给指定标签前面添加一个子元素
格式:

标签名称::after{
    属性名称:值;
    }

给指定标签后面添加一个子元素

div::before{
    content"添加的内容"
}在div内容的前面添加内容

方式4:
设置添加的子元素内容为空、块级元素、高度为0,添加的子元素看不见并清除浮动(类似内墙法)
ie6兼容:

.box{
    *zoom:1;
}

方式5:

设置第一个盒子的overflow:hidden;属性进行清除浮动,ie6下兼容增加*zoom:1;
overflow其他用途:
overflow:hidden;可以将超出标签范围的内容清除掉
可以通过里面的盒子设置margin-top,外面的盒子设置overflow:hidden;不会被顶下

3、定位流排版

定位流: 相对定位、绝对定位、固定定位、静态定位

相对定位
格式:

position: relative;
	垂直方向:;
	水平方向:;

相对于以前在标准流的位置进行移动
注意: 不脱离标准流,在标准流定位占用空间,同一方向只能设置一个属性,区分行内元素和块级元素
应用: 微调、配合绝对定位

绝对定位
格式:

position: absolute;
        垂直方向:;
        水平方向:;

相对于body的位置移动

注意: 脱离标准流,在标准流定位不占用空间,同一方向只能设置一个属性,不区分行内元素和块级元素
默认所有绝对定位以body为参考点移动,若祖先元素有定位流(相对、绝对、固定),默认以最近祖先元素为参考点移动
1、绝对定位的元素以body作为参考点,是以首屏网页作为参考点,不是以整个网页作为参考点
2、绝对定位会忽略祖先元素的padding

元素水平居中:

left:50%
margin-left:元素宽度一半

固定定位

格式:

 position: fixed;
    垂直方向:;
    水平方向:;

注意: 脱离标准流,在标准流定位不占用空间,不区分行内元素和块级元素

z-index属性: 控制定位流元素覆盖关系
默认情况下,所有元素都有z-index属性,取值为0;
定位流元素会盖住标准流元素,后定位元素会盖住先定位元素,
先看父元素z-index属性,再看子元素

a标签伪类选择器
修改a标签不同状态的样式
状态:
默认:a:link{}
点击后:a:visited{}
鼠标移入:a:hover{}(hover可用于任何标签)
鼠标长按:a:active{}
注意:一起出现,必须按照顺序编写,否则失效

过渡模块:
transition-property: ;(哪个属性需要执行过渡效果)
transition-duration: ;(过渡效果持续时长)
transition-timing-function: ;(延迟开始过渡时间)
transition-delay: ;(过渡效果运动速度)

注意: 要过渡,必须满足三要素(属性变化、哪个属性发生过渡、过渡时长),多个属性过渡用“,”隔开

简写:transition:过渡属性 过渡时长 运动速度 延迟时间;

多个属性运动速度、延迟时间、持续时间一致,简写为:transition:all ()s;

六、2D3D转换模块

基础:
deg是单位,代表旋转多少度

transform:rotate(45deg);

第一个参数:水平方向,第二个参数:垂直方向

transform: translate(-100px, 50px);

第一个参数:水平方向,第二个参数:垂直方向,相同参数可用一个参数

transform:scale(1, 1.5);

transform:rotate();旋转相关属性:

形变中心点:
默认情况下以中心为参考点旋转
第一个参数:水平方向,第二个参数:垂直方向。取值:具体像素、百分比、特殊关键字(top bottom left right)。
格式:transform-origin: 0 0;

旋转轴向:
默认情况下所有元素围绕z轴旋转,*代表轴向(X、Y、Z)
格式:transform:rotate*();

透视属性:
特点:近大远小,像素代表离物体距离
格式:perspective:px;
注意:透视属性必须添加到呈现近大远小父元素上面

盒子阴影与文字阴影:
盒子阴影(默认外阴影):
box-shadow:h-shadow(水平偏移) v-shadow(垂直偏移) blur(模糊度) spread(阴影扩展) color(阴影颜色) inset(内外阴影);
快速添加阴影需要添加3个参数:ox-shadow:h-shadow(水平偏移) v-shadow(垂直偏移) blur(模糊度);

默认情况下,阴影颜色与盒子内容颜色一致

文字阴影:
box-shadow:h-shadow(水平偏移) v-shadow(垂直偏移) blur(模糊度) color(阴影颜色);
默认情况下,阴影颜色文字颜色一致

七、动画模块

1、过渡与动画之间的区别

不同点:
1)、过渡必须人为触发才会生效
2)、动画不需要人为触发就能执行

相同点:
1)、都是给元素添加动画的
2)、都是系统新增的属性
3)、都需要满足三要素才能有动画效果

2、动画步骤格式

1、告诉系统需要执行哪个动画

animation-name:xxx;

2、告诉系统需要自己创建一个名称叫xxx的动画

方式1:

@keyframes xxx{
    from{
    }
    to{
    }
}

方式2:

@keyframes xxx{
    1%{
    }
    2%{
    }
    ...%{
    }
}

3、告诉系统动画持续时长

animation-duration: 3s;

3、其他属性

1、动画执行的速度

animation-timing-function: linear;

2、动画执行次数

 animation-iteration-count: 1;

3、动画是否需要做往返动画

   animation-direction: alternate;

4、动画执行状态

animation-play-state: paused;

5、执行动画等待状态与结束状态样式
取值:
none:默认
forwards:动画元素结束处于最后一帧状态样式
baxkwards:动画元素开始处于第一帧状态样式
both:动画元素结束处于最后一帧状态样式,动画元素开始处于第一帧状态样式
animation-fill-mode: ;

连写格式:

animation:动画名称 动画时长 动画运动速度 延迟时长 执行次数 往返动画;

前端编码步骤:

1、 重置样式,设置全局样式
2、 引入全局样式表,引入单页样式表
3、 搭建网页结构及样式结构
4、 布局划分,区块化编写