CSS基础
css层叠样式表
1、元素内嵌样式表
<p style=" color:red;font-size:50px;">.....<p>
2、外部样式表 是一个.css文件，需要在页面引用样式表才能使外部样式表的设置生效。
><link>元素应用，一般写在<head>元素内部。
<html>
<head><title>css基础<title>
<link type="text/css" rel="stylesheet" href="css.css" />（引用外部样式语句）
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
3、文档内嵌样式表 写在<style>元素中，一般位于<head>中
<html>
<head><title>css基础<title>
<style type="text/css">
p{color:red;font-size:100px;}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
两个主部分构成
选择器：要改变以样式的HTML元素。
一条或多条声明：一个属性和一个值组成（属性（property））是需要设置的样式(style attribute)；
属性和值用冒号分开；用花括号包围）。a（选择器）{color（属性）：black（值）；font-size：100px；（声明）}
css多重声明
大多数样式表不止一条规则，包含不止一个声明。
a{ color：blac；font-size：100px；}
常用选择器
.class .myset 选择所有class=" myset "的元素
#id #myId 选择id=" myId "的元素
* * 选择所有的元素
element1 element2 div P 选择所有元素1内部的元素2
element a 选择所有该元素
element1>element2 div>p 选择父元素为元素1的元素2
element1+element2 div+p 选择紧接元素1后的元素2
element1，element2 div，p 选择所有元素1和元素2
elementhover a：hover 鼠标位于其上的元素
：：seletion ::selection 选择被用户选取的元素部分
css背景
background 在一个声明中设置所有的背景属性
background-image：url（img/...） 背景图像
background-size：50px； （100%） 尺寸
background-repeat：no-repeat；(不重复) 是否及5如何重复
background-attachement：fixed；(背景固定) scoll（滚动）
background-color：rgb（0，0，0，0）； 背景颜色
background-position（位置）：值 right top button % px
background-clip： 背景绘制区域
background-orgin： 定位区域
>-size尺寸
x% y% 宽、高百分比，只设一个，第二个默认" auto";
x px y px 宽高像素
cover 扩展至足够大，使用图像完全覆盖区域，某些部分也许无法显示在背景定位区域中
contain 把图像扩展至在最大尺寸，适应内容区域
一条声明设置所有背景
语法：background：bg-color bg-image position/bg-size bg-repeat bg-orgin bg-clip bg-attachment initial / inherit;
>background-clip规定绘制区域
border-box 被裁减到边框盒
padding-box 被裁减到内边距框
content-box 被裁减到内边框
>background-origin: 规定图片定位区域
border-box 相对于边框盒来定位
padding-box 相对于内边距框来定位
content-box 相对于内边框来定位
