一、CSS优先级如何
1、内联style
2、id选择器
3、class选择器
4、标签
5、css长度单位：px（像素）\em（倍数）
常用选择器：
1、标签
2、id
3、类
层级选择器
伪类选择器
1. :hover
img:hover{
background:#f0f;//当鼠标放上去的时候出现颜色
border-radius:256px;
}
2.:focus
.username:foucus{
kackground:#f0f;
}
3.::selection
p::selection{
backfround:#f00;
}
CSS常见的样式属性和值
1、字体与颜色
funt
(1)font-family//字体类型
//字体名称：宋体，楷体，黑体
（2）font-size //字体大小
//30px
(3)font-style //字体样式
//normal | italic
(4)font-weight //字体加粗
//bold
2、背景属性
background
1.background-color
2.background-image
3.background-repeat
4.background-attachment
5.background-position
1.水平：left center right
垂直： top center bottom
3、文本属性
letter-spacing //字间距
word-spacing //此间距
text-decoration //none||underline||overline||line-through
//none 用来把a标签的下划线去掉
text-align
//只能是文本居中
text-indent 缩进
line-height 行高
color 颜色
word-break 拆行
4、边框属性
5、鼠标光标属性
6、列表样式
7、定位属性
8、内外边框
9、浮动和清除浮动
10、滚动条
11、显示和隐藏
css背景样式
css过渡动画
<style>
img{
transform:scale(1.5,1.5);
}
</style>
<script>
$('img').mouseenter(function(){
$(this).css({
'transform':'scale(1.5,1.5)'
});
});
</script>
3d样式
1.rorateX(30deg);
2.rorayeY(30deg);
<title></title>
<style>
.img{
background:#ccc;
width:256px;
height:256px;
border-radius:256px;
overflow:hidden;//隐藏图片突出的部分
}
</style>
<body>
<div class='img'>
<img src="xxx.png" alt="">
</div>
</body>
<script>
s=0;
v=10;
$('.img').click(function(){
setInterval(function(){
s+=v;
$('.img').css({'transform':'rotateX('+s+'deg)'});
},100);
});
//分栏
多栏
1.column-count
2.column-gap
3.column-rule
<style>
.art{
border:2px dashed #00f;
-webkit-column-count:3;
-webkit-colimn-gap:30px;
-webkit-column-rule:4px solid #f00;
}
</style>
<div class='art'> 文本</div>
轮廓样式
outline:2px solid #f00;
outline-offset:13px;
1、内联style
2、id选择器
3、class选择器
4、标签
5、css长度单位：px（像素）\em（倍数）
常用选择器：
1、标签
2、id
3、类
层级选择器
伪类选择器
1. :hover
img:hover{
background:#f0f;//当鼠标放上去的时候出现颜色
border-radius:256px;
}
2.:focus
.username:foucus{
kackground:#f0f;
}
3.::selection
p::selection{
backfround:#f00;
}
CSS常见的样式属性和值
1、字体与颜色
funt
(1)font-family//字体类型
//字体名称：宋体，楷体，黑体
（2）font-size //字体大小
//30px
(3)font-style //字体样式
//normal | italic
(4)font-weight //字体加粗
//bold
2、背景属性
background
1.background-color
2.background-image
3.background-repeat
4.background-attachment
5.background-position
1.水平：left center right
垂直： top center bottom
3、文本属性
letter-spacing //字间距
word-spacing //此间距
text-decoration //none||underline||overline||line-through
//none 用来把a标签的下划线去掉
text-align
//只能是文本居中
text-indent 缩进
line-height 行高
color 颜色
word-break 拆行
4、边框属性
5、鼠标光标属性
6、列表样式
7、定位属性
8、内外边框
9、浮动和清除浮动
10、滚动条
11、显示和隐藏
css背景样式
css过渡动画
<style>
img{
transform:scale(1.5,1.5);
}
</style>
<script>
$('img').mouseenter(function(){
$(this).css({
'transform':'scale(1.5,1.5)'
});
});
</script>
3d样式
1.rorateX(30deg);
2.rorayeY(30deg);
<title></title>
<style>
.img{
background:#ccc;
width:256px;
height:256px;
border-radius:256px;
overflow:hidden;//隐藏图片突出的部分
}
</style>
<body>
<div class='img'>
<img src="xxx.png" alt="">
</div>
</body>
<script>
s=0;
v=10;
$('.img').click(function(){
setInterval(function(){
s+=v;
$('.img').css({'transform':'rotateX('+s+'deg)'});
},100);
});
//分栏
多栏
1.column-count
2.column-gap
3.column-rule
<style>
.art{
border:2px dashed #00f;
-webkit-column-count:3;
-webkit-colimn-gap:30px;
-webkit-column-rule:4px solid #f00;
}
</style>
<div class='art'> 文本</div>
轮廓样式
outline:2px solid #f00;
outline-offset:13px;
4931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
