阅读模式:

CSS学习(2)

阅读量:22  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:CSS学习(2)Emmet语法emmet语法可以通过缩写的形式来提高html/css的编写速度生成标签:输入标签名按下tab键生成多个相同标签:如div*3生成父子级关系:如ul>li生成兄弟级关系:如div+p生成带有类名或......

CSS学习(2)

CSS学习(2)

Emmet语法

emmet语法可以通过缩写的形式来提高html/css的编写速度

  1. 生成标签:输入标签名按下tab键
  2. 生成多个相同标签:如div*3
  3. 生成父子级关系:如ul>li
  4. 生成兄弟级关系:如div+p
  5. 生成带有类名或id名字的标签:标签名称.demo或#two按下tab键就可以了
  6. 生成div类名有序:用自增符号$
  7. 标签生成中带有默认文字:{}
  8. css中的属性都可以首字母缩写

CSS的元素显示模式

元素的显示就是元素(标签)以什么方式进行显示,比如div自己占一行,比如一行可以放多个span。

HTML元素一般分为块元素和行内元素两种类型。

块元素

h1~h6,p,div,ul,ol,li等为最常见的块元素,特点为:

  1. 独占一行
  2. 高度,宽度,外距和内距都可以控制
  3. 宽度默认为父级的100%
  4. 是一个容器及盒子,内部可以是块元素或者行内元素(文字类的元素内不能使用块级元素)

行内元素(内联元素)

a,strong,b,em,span等为最常见的行内元素,特点为:

  1. 一行内可以有多个行内元素
  2. 宽度和高度直接设置是无效的
  3. 默认宽度是本身内容的宽度
  4. 行内元素只能容纳文本或其他行内元素(a里面不能再放a元素,a中可以包含块级元素)

行内块元素

img,input,td等为最常见的行内块元素,特点为:

  1. 一行内可以有多个行内块元素,两个行内块元素中间会有空白的缝隙
  2. 高度,宽度,外距和内距都可以控制
  3. 默认宽度是本身内容的宽度

元素显示模式转换

行内元素转换为块级元素

display:block

a {
	width: 150px;
	height: 50px;
	background: pink;
	display: block;
}

块级元素转换为行内元素

display:inline

div {
	width: 300px;
	height: 100px;
	background-color: #fff;
	display: inline;
}

转换为行内块

display:inline-block

CSS的背景

背景颜色

background-color:颜色(默认:transparent(透明的)

背景图片

背景图片在背景颜色的上层。

background-image:url()(默认:none)

背景平铺

background-repect:no-repect(不平铺)默认:repect(平铺)repeat-x(沿着x轴平铺)repeat-y(沿着y轴平铺)

背景图片位置

background-position:x y;

x和y为方位名词

left,right,top,down,center前后两个值与顺序无关,如果只指定一个,则另一个默认为居中对齐。

x和y为精确单位

x和y分别为离左侧和离上侧的距离,如果只指定了一个值,那该值必定是x坐标,另一个值为center。

背景图像固定

background-attachment:默认:scroll(滚动)fixed(固定)

设置背景图像是否固定或者随着页面其余部分滚动

背景复合写法

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

背景色半透明

background:rgba(0,0,0,alpha),alpha为0-1之间,0为全透明,1为不透明

CSS的三大特性

层叠性、继承性、优先级。

层叠性

按顺序覆盖重复的样式。

div {
	color: red;
  font-size: 12px
}
div {
	color: pink;
}
/* 12px,粉色 */
<div>层叠性</div>

继承性

父亲标签的的某些样式(text-,font-,line-,color等元素)可以被子标签继承。

行高的继承

一般使用当前文字大小的几倍的写法,当前文字的大小的几倍。

div {
	font: 14px/1.5;
}

优先级

  • 选择器相同,则执行层叠性
  • 选择器不同,根据选择器权重执行(通配/继承0,0,0,0<元素选择器0,0,0,1<类选择器/伪类选择器0,0,1,0<ID选择器0,1,0,0<行内样式style=“”1,0,0,0<!important)

注意a链接有一个默认的颜色,会顶掉继承下来的颜色。

复合选择器会有权重叠加的问题,复合选择器会把权重累加

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: