样式
单词：
FontFamily：字体名称 BorderStyle：边框样式 Margin：边界
Padding：填充 Flow：流，浮动 stylesheet：样式表
Line-height：行高 display：显示 Inline：同行 block：块
1.css层叠样式表，级联样式表
Cascade(级联) style sheet：
2.文字相关样式
I.color:颜色
II.font-size:em/px 字体大小
III. font-family:'xxx' 需要浏览器支持的文字字体名 (可以同时写多个值，从前往后判断是否支持使用，直到都不支持则选择默认值)
IV.font-style:italic 斜体字
V.font-weight: blod;100~700 文字粗细
VI.text-decoration:underline...;字体的下线，下划线，删除线等...
3.选择器(常用)
3.1. 元素选择器：(选择标签)
标记--标签-元素
语法： 元素｛
样式名：样式值；
样式名：样式值；
｝
3.2. 类选择器
class="类名1 类名2"。 定义语法用“.”
语法： .类名｛
样式名：样式值；
。。。。。。
｝
3.3. id选择器
id=“唯一代号 ”，用#定义
语法： #id｛
样式名：样式值；
。。。。。。
｝
权重
当一个标签同时有，本标签style；id选择器；类选择器；元素选择器时
优先级为（自己标签上的>id>类>元素）
注意：当在选择器后加“！important”时，优先执行本选择器，忽略权重
3.4父子关系的 派生选择器
用空格表示父子
<style type="text/css">
div div{
width:300px;
height: 100px;
border: 1px solid black;
}
div .f1{
float: left;
}
div #f1{
clear: left;
}
</style>
</head>
<body>
<div>
<div class="f1">
111
</div>
<div class="f1">
222
</div>
<div id="f1">
333
</div>
</div>
</body>
3.5.并列选择器“，” 或 “。”
3.6.伪类选择器
伪类：
a相关的伪类：（最好按顺序来 ）
：link 修改访问之前样式
:active 修改点击时样式
:visited 修改访问后样式
：hover 修改悬停样式(常用)
：before -content: '在之前补充的内容'
:after -content:'在之后补充的内容'
3.7. 背景图
默认情况下，图的本身的大小，平铺且循环
background-image:url(图片地址)
background-repeat:no-repeat
background-position:x坐标，y坐标 (给图片定位，让图片从定位处开始计算，即，使该坐标成为(0,0)的起始点)
css3.0: background-size:contain按照y轴铺满 cover:按照x轴铺满(常用)
3.8 边框
一般简写：border:1px solid blank;
bordeer-width:1px;粗细线宽
border-style:solid单实线 double双实线 dotted点虚线 dashed短虚线
border-color:black 线的颜色
border-radius:(画圆) border-top-left-radius:半圆
3.9 盒子模型：
margin / border / padding
margin:外边距 ， 顺时针原则 上 右 下 左
左右外边距是auto，块级元素水平居中
padding同上
宽度问题：
默认情况下，div的宽度为内容宽度，border边距另算
设初始长宽为100px，border线宽为1px，margin外边距为10px；
默认长宽：100+1+1+10=112（初始长宽+2*border线宽+margin外边距）
box-sizing:borderbox;自动计算长度，内容+边框+内边距=100
3.10.position
1.static 定位，默认定位
2.fixed: 固定定位，清除文档流位置，相对浏览器窗口定位。广告，导航。
3.relative：相对定位， 保留位置， 相对于原位置。
4.absolute: 绝对定位， 清除位置， 相对于非static父。多用于相对于 relative父定位。
扫一扫
3035
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
