-
行间式
-
在标签头部的style属性内
-
属性值满足的是css语法
-
属性值用key:value形式赋值,value具有单位
-
属性值之间用;隔开
-
-
外联式(企业开发中使用这种方式)
-
在外部css文件中
-
属性值满足css语法
-
属性值用key:value形式赋值,value具有单位
-
属性值之间用;隔开(一般独行分开赋值)
-
格式:选择器(样式快)
-
将html与css文件建立联系:通过link
-
-
内联式
-
在style标签内(style标签一般作为head的子标签)
-
属性值满足的是css语法
-
属性值用key:value形式赋值,value具有单位
-
属性值之间用;隔开(一般独行分开赋值)
-
格式:选择器(样式快)
-
二、三种引入优先级
-
注:三种方式间没有优先级
-
三种方式协同布局:
不重复的属性一定为唯一位置的值
重复的属性采用覆盖赋值,保留最后位置的属性值
行间式一定式逻辑上最后被解析的位置(js正常操作的就是行间式)
!important会影响优先级
-
css注释: /这是注释/
三、长度及颜色单位
-
长度单位:
px :像素(pixel),屏幕上的最小单位,用于网页设计,直观方便
in :英寸
pt :点(point) 1pt = 1/72in,用于印刷业,非常简单易用
mm :毫米
cm :厘米
em :相当长度,通常1em=16px,应用于流式布局
rem vw
-
颜色单位
单色:rgb() rgba()
四、常用样式
-
字体样式
-
大小
font-size:30mm
-
自重: bold normal lighter 100~900
font-weight:900
-
行高:行高设置大于等于字体大小,字体在行高中垂直居中显示
line-height:100px
-
样式
font-style:oblique
-
自族:可以自定义字族:当:STSong不存在或不起作用再选取:微软雅黑
font-family:“STSong”,“微软雅黑”
-
css语法: 空格隔开为多个值赋值,逗号隔开为一个值多值赋值
font:lighter 50mm/80mm "STSong","微软雅黑"
-
-
文本样式
-
颜色
color: red
-
水平居中方式:left center right
text-align: cente
-
字划线:underline; line-through; overline none
text-decoration:line-through
-
字间距
letter-spacing:3px
-
词间距
word-spacing:10px
-
应用场景
text-decoration: none
-
显示方式:
display: inline-block
-
垂直排列方式:top baseline bottom
vertical-align:baseline
-
缩进
text-indent:2em
-
按标签的设定宽度强行换行,可以在单词(整体)内部换行
word-break:break-all
-
-
背景样式
-
背景图片
background-image:url()
-
平铺:no-repeat repeat-x repeat
background-repeat:no-repeat
-
定位
10px == 10px center 设置一个值,第二个值默认为center
10px 1px 第一个值控制水平位置,第二个值控制垂直默认位置
background-position:10px
-
定位相关的涉及到滚动时是效果:scorll fixed
background-attachment: scroll
-
==辅助的操作
overflow:auto
-
整体设置
background: url() 10px 10px no-pepeat red
-
五、css选择器
-
基础选择器
-
统配选择器:匹配所有(具有显示效果的标签)
-
标签选择器(标签名):匹配指定标签名的对应所有标签
-
类选择器(.):匹配指令类名对应的所有标签
-
id选择器(#):匹配指定id名对应的唯一标签,id通常是配合js使用的
html,css都是标记语言,所有id可以进行多匹配,但js是编编程语言,只能匹配到一个
总结:统配选择器一般整体用于reset操作(reset操作:清除系统自定义样式) 标签与id在选择器i运用场景并不多,一般不提倡采用id选择器进行布局
类选择器为布局选择(建议基本去全用class选择器进行布局)
基本选择器布局首选:id>clas>标签>通配
-
-
组合选择器
-