标签:TE lock 16px 隐藏 relative 顺序 图像 单位 渐变
CSS:
一、常用样式:字体,颜色,背景
二、布局:浮动 定位 标签特性
三、标签盒子模型: 边距 边框
四、动画:旋转 渐变
注意:子标签会继承父标签的样式但不是所有的样式都会被继承。
1.1、文本字体
①文本颜色
h1 {color:#ccc;}
②文本对齐方式
h1 {text-align:center;} h2 {text-align:right;} h3 {text-align:justify;}
justify(每一行被展开为宽度相等,左,右外边距是对齐)
③文本修饰
h1 {text-decoration:none;}
none(无效果)
overline(上横线)
line-through(删除线)
underline(下划线)
④文本缩进
p {text-indent:50px;}
⑤字体样式
font-family
⑥字体形态
h1l {font-style:normal;} h2 {font-style:italic;} h3 {font-style:oblique;}
⑦字体大小
font-size
单位:em 1em的默认大小是16px
1.2、列表样式
①list-style-type指定列表项标记的类型
ul.a {list-style-type: circle;} ul.b {list-style-type: square;}
②list-style-image指定列表项标记的图像
ul { list-style-image: url(‘风景.jpg‘); }
③list-style-position设置列表中列表项标志的位置
1.3、背景
①背景颜色:
body {background-color:#ccc;}
②背景图片:
div {background-image:url(‘大海.jpg‘);}
注意:
(路径html和js从html找 css从css找)
③背景图像水平或垂直平铺:
div { background-image:url(‘大海.jpg‘); background-repeat:repeat-x; }
repeat-x(x轴方向平铺)
repeat-y(y轴方向平铺)
no-repeat(不平铺)
④背景图像的位置:
用background-position改变图像在背景中的位置(right top)或(50% 50%)有空格
④简写
当使用简写属性时,属性值的顺序为::
background-color
background-image
background-repeat
background-attachment
background-position
实例:
{background:#ccc url(‘123.jpg‘) no-repeat right top;}
1.4、表格
①边框
table { border: 1px solid red; }
②边框折叠
实例:
table { border-collapse:collapse; } table,th, td { border: 1px solid red; }
③高度宽度
width;height
2.1布局
①元素居中对齐
div { margin: auto; width: 50%; border: 1px solid red; padding: 10px; }
②文本居中对齐
div { text-align: center; border: 1px solid blue; }
③图片居中对齐
img { display: block; margin: auto; width: 50%; }
④左右对齐(使用定位)
.right { position: absolute; left: 0px; width: 100px; border: 1px solid #CCC; padding: 10px; }
⑤垂直居中对齐
div { line-height: 200px; height: 200px; border: 1px solid green; text-align: center; }
⑥浮动
float 给要浮动的元素加父标签 设定父标签的宽高(导航栏常用浮动+li)
⑦Position定位:
fixed relative absolute
fixed:相对于窗口来定位 不在乎是否嵌套 没有本身位置
absolute:相对于标签定位 body 在乎嵌套,
相对于最近的有position属性的父标签定位 最终标签是body 没有本身位置
relative:相对于自身定位 位置还有 常用在微调和父标签(对齐)
⑦标签特性
display:block(块标签) inline-block(行内快标签) inline(行标签) none(隐藏,位置不在)
style="visibility:hidden"(隐藏,位置还在)
⑧盒子模型
padding
border
margin
实例:
div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }
注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式
附加:
border-radius(圆角)
box-sizing:border-box(边框自适应)
margin-top:当写在子标签时会做用在父标签。
标签:TE lock 16px 隐藏 relative 顺序 图像 单位 渐变
原文地址:https://www.cnblogs.com/Ace-suiyuan008/p/9157439.html