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方面的学习比较,适合新手看看,老手或者大佬别看了。