前端(css引入的3中方式)
-
行间式
-
在标签头部的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>标签>通配
-
-
组合选择器
-
