1.css的长度单位
1)px
2) em
2.css的选择器
1)常用选择器
*标签 span
*id #id
*类 .class
*关联 #div1 span div1中的span标签
*组合 div,h1,p,apan 关联的都选,逗号隔开
2)基本选择器
:first-child
:first-letter
:first-line
:last-child
:nth-child
3)层级选择器
a b (a中孩子b)
a>b (a下的b1)
a+b (a下的第一个b)
4)伪类选择器
:hover (鼠标经过)
:focus (获得焦点)
::selection (鼠标选中的元素)
5)属性选择器
[id] 所有有id属性的元素
[id=user] 所有id=user的元素
2. 样式
1)字体与颜色
font-family 字体类型(宋体|楷体|黑体)
font-size 字体大小 (30px|2em)
font-style 字体样式 (normal|italic)
font-weight 字体加粗 (bold)
用于在网站中加载字体
@font-face
{
font-family:fzm;
src:url('fzm.ttf');
}
2)背景属性
background:#ccc url('x.png') no-repeat fixed 50% 50%;
background-color
background-image
background-repeat:no-repeat
background-attachment:fixed|scroll;只能用在body上
background-position
(1)left center right top center bottom
(2)50px 50px
(3)-50px -50px
(4)50% 50%
3)文本属性
letter-spacing 字间距
word-spacing 词间距
text-decoration 下划线
text-align 对齐
text-indent 缩进
line-height 行高
color 颜色
word-break:break-all 折行可以有半个单词
text-shadow:1px 1px 5px #ccc 文本阴影
word-wrap:break-word折行没有半个单词
4)边框属性
border:2px solid #f00;
border-style:none|hidden|dotted|solid|double|groove|ridge|inset|outset
border-width:30px
border_color:#f00;
overflow:auto;
5)鼠标光标属性
cursor:pointer
crosshair 十字形状
pointer 小手形状
text文本形状
wait 等待形状
default 默认形状
help 帮助形状
6)列表样式(list-style-type):
none
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
ul{
list-style-type:none;
padding-left:0px;
overflow:hidden;隐藏超出的东西
}
<div style='clear:both'></div>
<table border='1px' width='1000px' cellspacing='0'>
border-collapse:collpase;
border-spacing:10px;
7)定位属性
position:absolute;绝对定位
left:200px;
top:200px;
position:relative;相对定位
z-index:图片的高度
(父定位,子绝对就可以实现子的绝对定位)
块标签屏幕居中
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
8)内外边距
margin
padding
9)浮动和清除浮动
float:left|right
clear:left
clear:right
clear:both防止盒子回缩
10)滚动条
overflow:hidden;
overflow:auto;
11)显示和隐藏
display:block|inline|none
visibility:visible|hidden
12)边框样式
border-radius:50px;边框圆角上左下右
box-shadow:5px,5px,5px,5px #999 inset;前两个定位,三个模糊,四向外扩充,五颜色,内阴影。
border-image:url('b.png') 30 30 stretch|round|repeat;
13)背景样式
background-size:100%;
background-origin:padding-box|content-box|border-box;
14)2D样式
transform:translate(10px,20px);
transform:rotate(30deg);
transform:scale(2,4);
15)3D样式
transform:roateX(100deg);
transform:roateY(100deg);
16) 多栏样式
column-count:3;
column-gap:40px;
column-rule:3px outset #ff0000;
17)过渡动画
18)轮廓样式
outline:2px solid red;
outline-offset:15px;
css学习笔记
最新推荐文章于 2021-08-03 19:51:50 发布