CSS篇
CSS2.0
cascading style sheet--层叠样式表
<!--引入css-->
1.行间样式
<div style=" "></div>
2.页面级css
<style type="text/css"></style>
3.外部css文件
首先建立一个css文件
然后在HTML文件里建立一个<link rel="stylesheet" type="text/css" href="">
<!--选择器-->
1.id 一一对应
在HTML里<div id="only">123</div>
在CSS里#only{ }
2.class 多对多
在HTML里<dic class="demo demo1">123</div>
在css里.demo{ }
.demo1{ ]
3.标签选择器
在HTML里<div>123</div>
在css里直接div{ }
4.通配符选择器
在HTML里<span></span>(行级元素)
<div></div>
<strong></strong>
在css里*{ } 选择所有标签 (适合初始化)
5.属性选择器
在HTML里<div id="only" class="demo">123</div>
在css里[id/id="on;y"]{ }
6.父子选择器/派生选择器 不在乎标签只在乎关系
在HTML里<div>
<span>
</span>
</div>
<span>
</span>
在css里
div span{ }
7.直接子元素选择器
在HTML里<div>
<em>1</em>
<strong>
<em>2</em>
</strong>
</div>
在css里div > em { } 这时候直接选择子元素1
8.并列选择器
在HTML里<div>1</div>
<div class="demo">2</div>
<p class="demo">3</div>
在css里div.demo{ }
9.分组选择器
当css里代码冗余度太高时可以em,strong,span{ }一次性写出
当出现优先级问题时:行间样式>id>class=属性选择器>标签选择器>通配符选择器
当出现!important时优先级最高
css权重
!important Infinity--正无穷
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
256进制
1 0 0 0
1 0 0
1 0
1
**浏览器判断自右向左以最快的方式判断标签
**判断权重:只要是写在同一行时就把权重值相加再进行比较
**如果权重相同后来的代码会覆盖原来的代码叫做后来先到
css
单位:
绝对单位
cm ...
相对单位
px(像素)
em(1em=1font-size=16px)
格式:div{ 属性名 :属性值;}
属性名
font-size 字体大小(高) 默认的浏览器字体是16px
font-weight:bold; 加粗
font-style:italic; 斜体
font-family:arial; 字体(默认arial字体)
opacity(透明度):0.5;
字体颜色
1.土鳖式(纯英文单词)
color:green;
2.颜色代码
举个栗子 color:#ff4400(淘宝红)**transparent(透明色)
每两位代表一个颜色
**如果每两位重复可以简写成三位
r g b
00-ff 00-ff 00-ff 16位进制数
3.颜色函数
举个栗子 color:rgb(0,0,0);十进制
盒子
border:1px(粗细)solid(展示形式)black(颜色);
border-style:dotted;(点状虚线)dashed(条状虚线)
border-left-color
border-top-color
border-right-color
border-radius:10px;圆角
text -align:left; 对齐方式 center(居中)
line-height:0px; 单行文本高度
text-indent:2em; 守首行缩进
text-decoration(装饰):line-through;(中画线)none(没有线)underline(下划线)overline(上划线)
cursor (光标定位置):pointer(变成小手);help(变成小问号;
margin(元素之间的空隙)-left:;
伪类选择器
在HTML里<a href="www.baidu.com"></a>
在css里a:hover{ background-color:orange;}
三大模型
no.1盒子模型
盒子四大部分:
边框 border
外边距 margin
内边距 padding
盒子内容 content (width + heigth);
body有一个天生的margin是8px
no.2层模型
position:absolute;绝对定位(脱离原来位置定位)
left/(right):
top/(bottom):
**相对于最近的有定位的父级进行定位,如果没有这样最近的父级那么相对于文档进行定位
position:relative;相对定位(保留原来位置进行定位)
**相对于原来的位置进行定位
**一般用relative做参照物,用absoluye进行定位
position:fixed;固定定位
left/(right):
top/(bottom):
z-index:1;(设置层面)(数值越大越靠近你)
居中固定写法
position:absolute;
left:50%
top:50%
width:100px;
height:100px
margin-left:-50px;
margin-top:-50px
来自margin的bug
垂直方向的margin会粘合到一起取最大值(margin塌陷)
解决方法NO.1
给父级加一个顶棚border-top;1px solid red;
解决方法NO.2
bfc---block format context 块级格式化上下文
触发规则:position:absolute;(绝对定位)
dispaly:inline-block;(同行)
float:left/right;(左右浮动)
overflow:hidden;(溢出盒子的部分隐藏展示)
**使用时要适当否则会出现新的问题
兄弟级垂直方向的margin是合并的 (margin合并)
解决方法
增加一个父级,,在用bfc解决**但是最重要的一点是在css设计里不能因为改bug随随便便加结构,所以我们的解决办法就是不解决我们选择改像素来弥补
no.3浮动模型
float:left/right;
1.浮动元素产生了浮动流
所有产生浮动流的元素,块级元素看不到他们
产生了bfc的元素和文本类属性(inline)的元素以及文本都能看到浮动元素
clear(用来清除浮动流):both;**必须是块级元素才可以使用clear清楚浮动 display:block;
三件套 content:"";
display:block;
clear:both;
margin:0(上下) auto(自适应);可以解决导航栏问题
伪元素
天生就存在
天生就为行级元素
具有元素特性不具有元素结构
在HTML里随便建立两个标签<span></span>
在css里
span::befor{ conten:"" }选中标签前端的伪元素
span::after{ }选中标签后端的伪元素
**可以用伪元素清楚浮动
**凡是设置了position:abolute; float:left/right;系统会打内部把元素转换成inline-block;
溢出容器,要打点展示
1.单行文本
三件套
white-space:nowrap;(失去换行功能)
overflow;hidden;(部分展示其余隐藏)
text-overflow:ellipsis;(打点)
2.多行文本
overflow;hidden;(只做截断)
背景图片
background-image:ul(背景图片地址);
background-size:200px(宽) 100px(高);(设置背景图片大小)
background-repeat:repeat/no-repeat/repeat-x/repeat-y;(重复出现)
background-position: center center;(50% 50%相当于center center)
用图片代替文字
方法1:
首先让首行缩进超出文本框
text-indent:190px;
让他失去换行功能
white-space:nowrap;
在让其部分隐藏
overflow:hidden;
方法2:
把背景颜色加载到padding上(padding不能加载内容)
把高度去掉用padding把容器撑开
padding-top:90px;
在让其部分隐藏
overflow:hidden;
**行级元素只能嵌套行级元素
**块级元素能嵌套任何元素
**规定
<p></p>标签里不能套块级元素例如<div>
<a>标签里不能嵌套<a>标签
**position:absolute; float:left/right;设置其中的一种display会自动转换成display:inline-block;
**一但行级块元素内有文本后面跟的文字就会变成和文本对齐,如果行级块元素内文字过大依然会出现和大文字底对齐
vertical-align:2px/middle)(中对齐);(可以改变文字的对齐线)