迅闻网
让更多人看到你

css样式表(css样式属性大全)

  css样式表

css款式表分为三种:css层叠性款式表,外部款式表/链入式款式表,行内款式表(极差,不允许运用)
1.链入式款式表:在HTML文件中运用标签链接外部款式表,且标签有必要放到HTML中的标签内。
2.css层叠款式:将CSS代码写在HTML页面中的标签中的
helloword
3.链入内部CSS
4.行内款式表:直接在HTML标签中运用style属性设置CSS款式。
<标签style=”款式声明1;款式声明2;款式声明3″>
hello!
5.后来者居上,越往后越说了算
行内款式(div)>头部款式(style)>=外部款式(link)3.越准确越说了算
!important优先级最最高,可是不到最破不得已的时分,不要用

css

css样式属性大全

一、常用CSS
1、左起浮
float:left
2、右起浮
float:rigth
3、div内的元素不换号
white-space:nowrap;
display:inline-block;
4、消除padding对宽高影响
box-sizing:border-box;
5、a标签图片太大,尺寸超越容器巨细
background-size:contain;
6、网页跳转打开新的页面
target:”_blank”;
7、宽高充溢父布局
width:100%;
heigth:100%;
8、转为块级元素
display:block;能够设置宽高
display:inline-block;既能设置在一行显现,又能设置宽高。
display:none;元素消失,空间不保存,移除文档流。
9、转为行内元素
display:inline;设置宽高无效,巨细撑满父布局,假如需求转为行内元素还能设置宽高,则有2种方法:起浮和定位
10、居中
text-align:center;文本居中
line-height:50px;容器居中
11、鼠标箭头变为小手指
cursor:pointer;
12、字体设置
font-family:”‘HelveticaNeue’,Helvetica,Arial,sans-serif”;
13、a标签设置
&:hover{
text-decoration-color:rgb(46,49,53);
text-decoration-line:underline;
text-decoration-style:solid;
text-decoration-color:blue;
color:blue;
}
13、去掉下划线
text-decoration:none;
14、定位
position:relative;父类相对定位
position:absolute;子类绝对定位
假如只添加子类不添加父类的定位会导致脱标,加上会在父容器内绝对定位
14、字体加粗
font-weight:bold;
15、字体正常
font-weight:normal;
16、文字换行
word-wrap:break-word;
word-break:break-all;
17、图片显现款式
object-fit:contain;=缩放显现,习惯父布局巨细,不裁切
object-fit:fill;=彻底显现到父布局会有变形,没有裁切。
object-fit:cover;=彻底显现到布局,会有裁切
object-fit:none;=原始尺寸,不变化
18、宽高
px:固定数值,例如:300px表明3000像素
rem:相对于根元素(即html元素)font-size计算值的倍数,1em与当时元素的字体巨细相同,浏览器给网页设置的默许根底字体巨细是16像素,即一个元素来说1em的计算值默许为16像素。可是要em单位是会承继父元素的字体巨细,所以假如在父元素上设置了不同的字体巨细,也会跟随者变化。
100%:表明设置百分比单位。
vh:视窗高度的百分比(1vh代表视窗的高度为1%)
vw:视窗宽度的百分比(1vw代表视窗的宽度为1%)
vmin:当时vw和vh中较小的一个值
vmax:当时vw和vh中较大的一个值
19、z-index
z-index表明谁压着谁。数值大的压盖住数值小的。
只有定位了的元素才干有z-index值,不管是相对、绝对、固定定位都能够运用z-index值,而起浮的东西不能用。
假如都没有z-index值,谁写在后边谁盖住谁。
z-index没有单位,是一个正整数。默许的z-index值是0。
20、元素是否可见
opacity:.5;透明度1-0,空间不消失。
visibility:hidden;隐藏元素,保存空间,和opacity:0;一样。
visibility:visible;元素可见,默许。
21、布景固定,内容滑动
background-attachment:fixed;
position:sticky;和fixed相似,差异在于,假如元素方位不在文档流最顶层,滑动时分会跟随滑动,然后到顶部时分固定,相似Android的TitlBar粘性布局效果。
二、styled-components设置
1、本组件下的className=’xxx’设置
&.xxx{}
2、伪类选择器设置
&:hover{}
&:active{}

未经允许不得转载:迅闻网 » css样式表(css样式属性大全)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

迅闻网-让更多人看到你

登录/注册返回首页