Web前端之CSS
-
一.CSS简介
-
是什么
层叠样式表(英文全称:Cascading Stylt Sheets)
-
可以干什么
简单来说就是修饰网页
-
怎么用(引入方式)
-
行内样式
<div style = "background:red;"> 123 </div>
-
嵌入式
<head> <title></title> <style type = "text/css"> div{ background:"red"; } </style> </head>
-
链接式
<head> <line rel = "stylesheet"type="text/css"href = "***.css"></line> </head>
-
导入式
在css中使用相对于本css文件路径进行导入
@import url("style.css")
-
-
-
二**.CSS 选择器**
-
基本选择器
- * :通配符选择器
- element:标签选择器
- #id:id选择器
- .class:class 选择器
-
关系选择器
基本选择器,
基本选择器,
基本选择器{}
-
后代选择器
- E F:包含选择器
- E>F:子元素选择器
-
兄弟选择器
- E+F:直接兄弟选择器
- E~F:所有兄弟选择器
-
伪类选择器
E:hover 鼠标悬停效果
-
属性选择器
E[Attr]
-
-
三.选择器权重
-
选择器权重大小
!important > 行内 > id > class > 标签 > *(通配符)
-
如何计算
!important: 无穷大
行内: 1000
id: 100
class|属性|伪类 : 10
标签: 1
*: 0
多个选择器之间使用时进行累加
使用时比较规则:
选择器权重相同时,采用“后来者居上”原则
-
-
四.标签的大小和单位
-
大小
width:宽度
height:高度
width 和 height 的默认值时auto
auto 和 % 的区别:
<1 . auto:会将元素撑开置父元素的位置width,但是会减去自身的margin,padding+border
<2 . %: 会将元素变成父元素一样的宽度,并且额外的空间(margin+padding+border) 会加到 width上 , height = 100% 不会生效
-
单位
绝对单位:不会因为其他元素的尺寸的变化而变化
相对单位:根据其他元素尺寸的变化而变化
px:像素(绝对单位)
vw: 根据浏览器的可视化区域的宽度
vh: 根据浏览器的可视化区域的高度
%: 相对于父元素的宽度 或 字体 大小
-
-
五.元素之间的转换属性
- display:none 元素隐藏
- display:block 转成块级
- display:inline 转成行级
- display:inline-block 转成行级块
-
六.字体样式
-
字体 font-family
-
字体大小 font-size (每个浏览起的默认大小都不一样,一般为 16 px)
-
字体粗细 font-weight
bold ,100 - 900
-
文本颜色:color
color:#ff0000 ==简写 #f00
color:rgba(1,1,1,1)
color:red
-
简写
font-style | font-weight | font-size | line-height | font-family 字体的简写 .font{font:italic bold 12px/1.5em arial,verdana;}
-
-
七.文本样式
-
文本行高 line-height
-
文本水平对齐方式 text-align
left ,right, center
-
文本首行缩进 text-indent [:2em]
-
设置文本装饰 text-decoration
none
underline
through-line
overline
-
单行文本溢出处理
overflow:hiddden ==> 溢出隐藏
white-space : nowrap ==> 不换行
text-voerflow : ellipsis ==> 省略号
-
显示光标类型 cursor [:pointer]
-
列表样式 list-style : none == > 去掉
-
-
八 边框
-
border : 1px solid #f00. => 框宽 框样 框色
-
各边框的写法
border-left
border-right
border-top
border-bottom
-
颜色:
默认颜色 为 color
border-color: 上 右 下 左
-
三角
div{ width: 0; height: 0; border: 50px solid; border-color: transparent transparent blue black ; }
-
-
九 背景
-
背景色:background-color
- background : 三种写法
-
背景图 : background-image
-
background:url(“xxx.png”)
-
背景图的重复 background-repeat:
repeat-x
repeat-y
no-repeat
-
背景图的位置 background-position:x y
background-position: right [center默认]
background-position: 50% [50%默认]
background-position: 20px 30px
-
规定背景图尺寸 background-size
- 关键字 : contain(缩小) , cover(放大)
- 百分比: background-size:50% [50%默认]
- 像素:background-size:20px 30px
-
-
简写
●background-color:#f00;
●background-image:url(background.gif);
●background-repeat:no-repeat;
●background-attachment:fixed;
●background-position:0 0;
可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:
●color: transparent
●image: none
●repeat: repeat
●attachment: scroll
●position: 0% 0%
-
-
十 盒模型
-
盒模型组成部分
两种盒模型:
w3c标准盒模型实际宽: content(width+ height). + padding + border+ margin (默认)
ie盒模型实际宽 : content(width+ height). + padding + border
切换:
w3c: box-sizing:conten-box
ie: box-sizing:border-box
-
内边距 padding: 值 ==》 百分比(只和父元素的width计算) ,数值,没有负数
- padding-left
- padding-right
- padding-top
- padding-buttom
- 简写
- padding: 10px(上) 20px(右) 30px(下) 40px(左)
- padding: 10px(上右下左)
- padding: 10px(上下) 20px(左右)
- padding: 10px(上) 20px(左右) 30px(下)
-
外边距margin: 值 ==》 百分比(只和父元素的width计算) ,数值,有负数
- margin-left
- margin-right
- margin-top
- margin-buttom
- 简写
- margin: 10px(上) 20px(右) 30px(下) 40px(左)
- margin: 10px(上右下左)
- margin: 10px(上下) 20px(左右)
- margin: 10px(上) 20px(左右) 30px(下)
-
-
十一 浮动
-
float :left 或 right
-
特性:
浮动的最初设计是用来:实现文字环绕图片
-
1包裹(收缩,隔绝),释放原空间
-
2.破坏:子元素浮动会上父元素高度塌陷
不是 bug ,是一种标准
-
-
清除浮动
方式特别多:
-
不用:在尾添加一个块级元素,加入clear:both
-
用:给父元素加入伪类 after 样式
父元素:after{
content = “”;
clear = both;
display = block;
}
-
-
双飞翼布局
左中右占满屏幕;左右宽度是200 ,中间自适应;先加载中间
<head> <style> .contents>div{ height: 20px; float: left; } .right{ width: 200px; background: red; margin-left: -200px; } .left{ width:200px; background: lawngreen; margin-left: -100%; } .main{ width: 100%; background: yellow; } .middle{ margin: 0 200px; } </style> </head> <body> <div class="contents"> <div class="main"> <div class="middle">中</div> </div> <div class="left">左</div> <div class="right">右</div> </div> </body>
-
-
十二.overflow
当内容溢出时的表现
-
1值
- hidden(溢出隐藏)
- scroll[-x|-y] (显示滚动条)
-
BFC
可以用来清除浮动(实际不会那么用)
为什么可以清除浮动?
-
什么是BFC
块级格式化上下文
-
BFC的原则
如果一个元素具有BFC,那么内部元素再怎么弄,都不会影响到外部元素(例如子元素浮动父元素高度塌陷问题)
-
如何触发BFC
html根元素
float 不是 none
overflow 的值是: auto ,scroll,hidden,
display的值是:table-cell
position的值不是:relative 和 static
-
-
-
十三.定位
-
相对定位
position:relative
-
值
-
left,right,top,buttom
-
正数,负数,%
-
注意:left ,right,top ,buttom 同时出现
left 干掉 right ,top 干掉 buttom
-
-
定位标准:相对原来位置进行定位
-
保留原来的位置,不是释放空间
-
-
绝对定位
position:absolute
-
值,left right top button 同时出现,则是拉伸的效果
/*可以用来设置背景色,但没有这么玩的*/ div{ position: absolute; right: 0; left: 0; bottom: 0; top: 0; background:red; }
-
定位标准:找到第一个非static的的祖先元素进行定位,如果没有则针对浏览器进行定位
-
脱离文档流,释放原空间
经常配合relative使用
单独使用,无依赖:位置跟踪
<head> i{ position: absolute; margin: -12px 0 0 0; } </style> </head> <body> <div> 消息fasfdas <i>1</i> </div> <body/>
-
-
固定定位
position:fixed
-
值:left ,right,top ,buttom 同时出现*
left 干掉 right ,top 干掉 buttom
-
定位标准:针对浏览器进行定位
-
脱离文档流,释放原空间
-
-
层级关系:z-index ==> position
z-index 数值越大 ,越在上面
-
-
十四 .其他
- outline : 绘制元素周围的一条线(去除 outline: none)
- border-radius:边框圆角(像素,%)
-
十五 . css企业开发规范
-
布局容器(全局): 以 g 为命名空间 。例如:(大盒子)
.g-wrap 、.g-header 、 .g-content 、 .g-container
-
工具: 以 u 为命名空间 ,表示不耦合业务逻辑的、可服用的工具。
.u-clearfix .u-ellipsis
-
为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀,增强语义化
添加 .is- 前缀
-
书写顺序
盒子类型(定位 浮动 )
位置
大小
文字
背景
-
中横线:单词之间使用 - 进行连接
-
不要随意使用id(初级阶段配以 js 才会使用 id)
-
-
十六
html 判段IE半杯
非 IE :
< !–[if !IE]> 除了IE 外 都会执行 <!fi[endif]>
< !–[if lt IE 6]> IE 6以下 <!fi[endif]>
!: 不等于
lte: 小于等于
lt: 小于
gte: 大于等于
gt: 大于
...在两者之间写正常的html 代码...
禁止的js脚本 要执行的代码