标签\CSS

来源：互联网发布：淘宝客qq群免费机器人编辑：程序博客网时间：2024/05/22 10:31

系统快捷键      1：windows+d  返回左面      2：windows+e  打开你的电脑资源页面      3：alt+tab    切换页面webstorm快捷键：    1：tal键    快速创建标签  代码缩进    2：ctrl+d   删除光标所在行    3：ctrl+/   ctrl+shift+/   快速添加注释多行注释                               在js里分别为添加单行注释和添加多行注释    4：ctrl+alt+下方向键   快速复制一行    5：alt+上下方向键，快速移动当前代码    6：ctrl+y      反撤销（取消撤销）

<html>：定义html文档，超文本标签语言浏览器：IE9以上

<head>：描述网页信息元数据

<title>：网页标题；

<progress max(设置长度)>:进度条

<head>
内部样式：
<style type="text/css">
选择器{
对象的属性1：属性值1;
对象的属性2：属性值2;}
</style>
</head>
标签选择器：当前网页同类标签的元素
类选择器（class）：.类名{}
ID选择器：#li_data{}起个id名

CSS使用方式：
内部样式
外部样式： <link href="style.css"rel="stylesheet"type="text/css">
行内样式

文本属性：
font：
font-style：italic：字体倾斜
font-weight: lighter：字体粗细
font-size：大小
line-height：行高与height一致
font-family: sans-serif非衬线体

text-aline：文本文字在水平方向的位置
letter-spacing：字符间距
opacity:透明度
overflow:hidden/scroll溢出
text-indent:缩进：20px
text-decoration：underline下划线
white-space:nowrap:不断行
.container p:后代选择器

图片：
background-image:url('')
background-repeat:repeat-x;横向平铺
background-position：0px 50px:x坐标y坐标

ul{list-style:none;}无点
float：left；水平摆放
display：inline-block:一行一块

margin:外边距水平方向上边距相加；垂直方向上谁大用谁
padding:内边距
overflow:文字溢出
border-radius:边框的圆角矩形
border-image:
box-shadow:阴影
outline:边框不占空间
float:浮动 right left none
.clearfix:after{
content='';
display=table;
clear=both;}清除浮动的方式

定位：
positon:static
relative:相对属性：参照自己坐标
absolute：绝对定位：<div class="parent"><div class="child"></div></div>参照网页坐标
fixed
top
right
bottom
left
z-index

一般父元素相对定位，子元素绝对定位

CSS3
过渡效果
a{transition: all 1s ;}过渡效果
transform: translate(200px,0px);一个元素从这个地方到另一个地方
display: none;隐藏
display: block;显示

0 0