CSS固定格式
<style type="text/css"（可不写）>
标签名{要赋予的样式}
</style>
CSS属性：
1.文字：
font-style：文字样式
font-size：文字大小
font-weight：文字粗细
font-family：文字字体（中文要用双引号）
重要：文字属性缩写
font:属性，属性，属性，属性（属性直接可以写样式，粗细，大小，字体等，
有些属性值不能省略，一定按照样式，粗细，大小，字体的顺序写缩写）
2.文本：
text-decoration：文本装饰
underline 下划线
line-through 删除线
overline 上划线
none 不要任何格式（可以去掉超链接文字的下划线)
text-align: 文本对齐
center居中
text-indent:2em 文字缩进2个字符
类选择器（单独赋予类）（为什么不用id，因为id是专门留给js的)
<style>
#aa{}
</style>
<p class="aa">我是文字</p>
备注：id只能对应一个标签，类可以对应多个标签。
id赋予属性的时候前面加#，类赋予属性的时候前面加.。
后代选择器
格式
标签名称1 标签名称1中的标签名称2{
属性;
}
备注：可以找标签名称1中的所有后代元素。
子元素选择器
格式
标签名称1>标签名称2{
属性；
}
备注：只能找标签名称1中的所有儿子元素。
交集选择器
选择器1选择器2{
属性；
}
并集选择器
选择器1,选择器2{
属性；
}
兄弟选择器
1.相邻兄弟选择器（标签名称1相邻的一个兄弟标签）
格式：选择器1+选择器2{
属性；
}
2.通用兄弟选择器（标签名称1所有的兄弟标签）
格式：选择器1~选择器2{
属性；
}
序选择器（CSS3新增选择器）
详细可看CSS选择器参考手册（感觉并不需要现在掌握）
属性选择器
格式1：标签[id或者类]{
属性；
}
格式2：标签[id或者类=具体的id名称或者类名称]{
属性；
}
通配符选择器（企业开发中一般不用）
*{
属性；
}
CSS三大特性
1.继承性
父元素设置的一些属性，子元素也可以使用。
备注：只有color/font-/text-/line开头设置的属性才可以继承
2.层叠性
CSS处理冲突的一种特性，当样式冲突时，按照优先级来判断样式。
3.优先级
优先级判断的三种方式：
1.是否是直接选中(间接选中时冲突，选中靠近目标的那个样式）
2.是否是相同选择器（如果满足条件1，谁写在后面就选中后面的那个样式）
3.不同选择器（如果满足条件1，会按照选择器的优先级来层叠）
优先级：id>类>标签>通配符>继承>浏览器默认
important函数：
作用：提升某个直接选择器的优先级，把优先级调为最高
格式：{
属性：值 !important;
}
背景颜色设置
background-color:颜色;
背景图片设置
background-color:url(图片地址);
背景图片平铺代码：
background-repeat:
1.repeat 平铺（默认）
2.repeat-x 横向平铺 -y 纵向平铺 no-repeat 不平铺
背景图片定位（移动位置）
background-position:水平方向 垂直方向;
背景属性的缩写格式：
background：背景颜色 背景图片 平铺方式 关联方式 定位方式（按顺序）
背景图片关联方式：
background-attachment:scroll（默认，不随着滚动条滚动）fixed(随着滚动条滚动）
把一个div的元素放在一排函数
display:inline block;
盒子模型函数(加边框）
1.四条边框一起添加 border:边框的厚度 边框的样式 边框的颜色;
2.分别添加四条边框
border-top 顶部
border-right 右边
border-bottom 底部
border-left 左边
内边距函数
padding-top right bottom left（用法同边框）
例子：<style>
.box1{
padding-top:20px;
}
<div class="box1">我是文字</div>
外边距函数
margin 用法同内边距 是标签与标签之间的距离
备注：span标签没有合并现象，但是div标签有合并现象。
增加了padding和border后盒子宽高不变的函数（CSS3新函数）
border-sizing:border-box;
清空系统默认的内边距和外边距
*{
margin:0;
padding:0;
}
备注：企业开发中一般不用通配符，一般采用如下的函数:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;
padding:0
}
给盒子内的文字设置行高：
line-height:
把网页排版变成浮动流：
float:left 浮动左边对齐 :right 浮动右边对齐
清除浮动格式函数：
clear: none（默认，不清除浮动） left（清除左浮动）right（清除右浮动）
both（清除左浮动和右浮动）
备注：企业开发中最推荐给盒子添加overflow:hidden来清除浮动，添加*zoom:1可以让IE6兼容。
CSS代码给签名添加内容：
签名名称::before （原有内容的前面添加）:after（原有内容的后面添加）
!!!网页的导航条和选项卡用<ul>和<li>来做~~~
相对定位函数：
position:relative;
备注：相对定位后可以调整盒子的top,right,left,bottom 高，右，左，下移动位置。
调整覆盖关系的函数：
z-index:（默认为0，比0大就可以覆盖之前的元素）
a标签的伪类选择器（修改超链接的样式的函数）
a:link{
属性}（从未被访问过的超链接的样式）
a:visited{
属性}（已经访问过的超链接的样式）
a:active{
属性}（长按超链接的样式）
a:hover{
属性}（鼠标停在超链接上时候超链接的样式）
备注：如果要给超链接添加多个属性，就要按照link,visited,hover,active的顺序来添加。
CSS3新函数：过渡模块
transition-property:属性；
比如想要宽度过渡变化，就在属性内填width。
过渡时间：
transition-duration:时间；
过渡动画延迟播放：
transition-delay:时间；
CSS3新函数 2D转换：
让元素旋转 transform:rotate(度数+deg);
让元素平移 transform:translate(左右，上下）
让元素缩放 transform:scale(左右缩放的倍数，上下缩放的倍数）
备注：缩写格式transform:rotate空格transform:translate空格transform:scale;
改变元素的中心点函数
transform-origin:0px 0px;中心点改为左上角
透视属性
perspective:500px;让元素显示的近大远小
给元素添加阴影
box-shadow 给盒子添加阴影 text-shadow 给文字添加阴影
设置透明度
opacity:0 完全透明 :1 不透明
CSS3新函数：动画模块
animation-name:inj;
@keyframes inj{
from{
margin-left:0;}
to{
marjin0left:500px;}
}
动画模块连写（用这个写动画代码）
animation:动画名称 动画时长 动画运动速度 延迟时间 循环次数 往返动画;
animation:move 10s linear 0s infinite normal;
@keyframes 动画名称{
from（也可用百分比）{}
to{}
}
备注：想让动画无限循环 就在循环次数那里填写单词 infinite（意思 无限的）
想让动画效果做一个往返动画 就在往返动画那里填写单词 alternate（意思 往返）
完整编写网站的步骤：
1.创建站点文件夹
网站文件夹包括 css文件夹 js文件锁 image文件夹 index首页网页
2.重置所有默认样式和设置一些全局的样式，并且将样式CSS文件和对应的界面关联起来。
重置样式的默认代码：http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
备注：如果插入的图片大于父元素的宽度，可以用margin:0 -100%;来让图片居中。
!!!但是父元素中必须设置text-align:center;
placeholder是<textarea />的属性，意思是在输入框里背景显示某些文字。
以上是CSS方面的学习比较，适合新手看看，老手或者大佬别看了。
网友评论