外部样式
<link rel="stylesheet" href="">
rel：指定资源跟页面的关系
href：资源的地址
CSS背景样式
background-color：背景颜色
background-image：背景图片（URL背景地址，默认水平垂直都铺满背景图）
background-repeat：背景图片的平铺方式（repeat-x、repeat-y、repeat、no-repeat）
background-positon：背景图片位置（x y）=>（数字[px/%] | 单词[x:left/center/right],[y:top/center/bottom]）
background-attachment：背景图随滚动条的移动方式（scroll默认值，背景位置是按当前元素进行偏移的；fixed背景位置是按照浏览器进行偏移的）
复合样式：background:red url() repeat 0 0;（颜色 背景图 平铺方式 位置）
CSS边框样式
border-style：边框样式（solid实线、dashed虚线、dotted点线…）
border-width：边框大小（px）
border-color:边框颜色
复合样式：border:1px red solid;（边框大小 颜色 样式）对单个边也可以用
//利用CSS边框实现三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
width: 0px;
height: 0px;
border-top-color: transparent;
border-top-style: solid;
border-top-width: 30px;
border-right-color: red;
border-right-style: solid;
border-right-width: 30px;
border-bottom-color: transparent;
border-bottom-style: solid;
border-bottom-width: 30px;
border-left-color: transparent;
border-left-style: solid;
border-left-width: 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果图：
CSS文字样式
font-family：字体类型
- 设置多字体方式（使其能够适应更多的计算机和设备）
- 引号的问题（有的字体中间有空格，必须用引号引起来）
font-size：字体大小（默认大小16px），字体大小一般为偶数
font-weight：字体粗细（单词[normal正常、bold加粗]； 数字[100-500正常、600-900加粗]）
font-style：字体样式（normal正常、italic斜体[italic所有带有倾斜字体的可以设置；oblique没有倾斜属性的字体也可以设置倾斜]）
color：字体颜色
复合样式：font:weight style size family、font:style weight size family、font:weight style size/line-height family
CSS段落样式
text-decoration：文本修饰（underline下划线、line-through删除线、overline上划线、none不添加任何修饰），可添加多个修饰，用空格隔开
text-transform：文本大小写（针对英文段落，lowercase小写、uppercase大写、capitalize首字母大写）
text-indent：文本缩进（首行缩进font-size的两倍，或2em[em相对单位，永远跟一个字体设置的大小相同）
text-align：文本对齐方式（left默认、right、center、justify[两端点对齐，中间自行调节]）
line-height：定义行高（不是固定值，根据当前字体的大小变化，用数字+px或scale[相对于原来字体的比例]表示）
letter-spacing：定义字间距
word-spacing：定义词间距（针对英文）
CSS盒子模型
padding/border/margin
只写一个值：上右下左
写两个值：上下、左右
写三个值：上、左右、下
写四个值：上、右、下、左
1.背景颜色会填充到margin以内的区域（不包括margin区域）
2.文字会在content区域
3.padding不会出现负值，margin是可以出现负值的
box-sizing（盒尺寸，可以改变盒子模型的展示形态）[content-box]/[border-box]
使用场景：1.不用再去计算一些值
2.解决一些百分比的问题input{width:100%;padding:30px;box-sizing:border-box;}
margin叠加
当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题（取两者中大的值作为叠加值），只有上下有，左右没有
解决方案：
1.BFC规范
2.想办法只给一个元素添加间距
margin传递
传递问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向没有传递问题
解决方案：
1.BFC规范
2.给父容器加边框
3.margin换成padding（加给父元素，padding-top: ;并进行调整）
margin自适应居中（只可以左右，不可以上下）
margin-left:auto;margin-right:auto;居中
一般写法：margin：0 auto;(margin:auto auto;)
标签分类
布局一般用块标签，修饰文本一般用内联标签
按类型：
block：块 div p ul li h1…
独占一行；支持css中所有的样式；不写宽时，和父元素宽相同；所占区域是一个矩形
inline：内联 span a em strong img…
挨在一起；有些样式不支持（宽、高、margin、padding的某些）；不写宽时，宽度由内容决定；所占区域不一定是矩形；内联标签之间会有空隙（换行产生），解决，找到两个内联的父元素：font-size:0;然后两个内联在设置font-size;16px;空隙消失
inline-block：内联块 input select…
挨在一起，支持宽高
显示框类型
display:block/inline/inline-block/none（让指定标签隐藏）
disp:none不占空间的隐藏；visibility:hidden占空间的隐藏
溢出隐藏
overflow:visible（默认）/ hidden / scroll（有滚动条）/ auto（内容多的时候有滚动，内容少的时候没有）
overflow-x、overflow-y:针对x、y分别设置
透明度与手势
opacity
0（透明）~ 1（不透明）0.5
rgba( , , ,0.5) 最后一个为透明度，只针对背景，不针对文字，可以让指定样式透明，不改变其他样式
cursor 手势
default：默认透明
自定义鼠标样式：pointer（手型）、move（十字米可移动的样式）、help（箭头带问号）
自定义，准备图片 .cur .ico的才可以，`cursor:url(),auto；
最大、最小宽高
min-width、max-width
min-height、max-height
一个容器怎么适应屏幕的高：
html,body{height:100%}
.contrainer(height:100%}CSS重置样式
*{margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;color:#666;}
img{display:block;}图片和容器底部有一些空隙
vertical-align:baseline;基线对齐 ==>vertical-aglin:bottom;底线对齐display:block;//推荐
扫一扫
1396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
