CSS学习笔记(记录一些小技巧)
2015-07-06 11:08
609 查看
一、CSS简介
CSS:是Cascading Style Sheets的缩写,中文意思是级联样式表,只要是任何和样式有关的,布局、样式、颜色、大小等等,都与css相关。
CSS:是用来解决内容与表现分离的问题。(把内容和样式分离开)
二、CSS语法
CSS语法
selector{
property : value;
}
选择器、属性、值
class名最好小写
三、CSS基本选择器及权重值
1.标签选择器或元素选择器:
h1{ //(只要符合这个标签都会被选中)
}
2.分组选择器:
h1,p{
}
3. 子类选择器:div下的h1
div h1{
}
4.class选择器:
.class名{
}
5.id选择器:
#id名{
}
6.其他选择器
a:hover{
color: red; //鼠标滑过字体颜色变红
}
7.全部选择器
*{
}
权重值:
id选择器为100
class选择器为10
标签选择器为1
四、元素的类型
块元素:上下分布,宽度默认是其父级元素的100%
p、h1、div
行元素:水平分布
li a input
改变元素类型使用
display: inline-block;
display: block;
五、CSS的颜色
修改字体颜色:color: red;
修改背景颜色:backgroud-color: blue;
修改边框颜色:border: 1px solid #666;
颜色:
英文单词:red、bule
16进制:#ff0000 简写#ff0(两个两个的字母都一样可以简写成1个)
RGB:rgb(255,0,0) 或 rgb(100%,0%,0%)(红绿蓝三原色)
六、一些实用的小技巧
小技巧1:文字垂直居中 (text-align=center文字水平居中)
height: 30px;
line-height: 30px;
小技巧2:块元素居中
margin: 0 auto;
小技巧3:所有页面最好首先消掉内外边距(所有浏览器body都有8个像素外边距)
*{
padding: 0;
margin: 0;
}
小技巧4:鼠标移动到按钮区域显示小手
cursor: pointer;
小技巧5:
表格里去掉重复边框: border-collapse: collapse;
去掉字体粗细: font-weight: normal;
小技巧6:有浮动的存在时,下面内容为了不被覆盖,需要加both,即不左浮也不右浮。
clear: both;
小技巧7:溢出隐藏
overflow: hidden;
小技巧8:按z-index值的大小展示模块
z-index = 9999;
小技巧9:css精灵,选取图片中的某一个小图时使用
css sprite
#aa{
background: url(xx.jpg) -104px -112px;
}
小技巧10:如何让一个浮动的元素居中(在父元素居中)
方法一:
text-align: center;
float: left;
height: 30px;
position: absolute;
left: 50%;
margin-left: -81px;
方法二:
父元素设置宽和高,margin:0 auto;
子元素:float: left; 一个span设置为:style="margin-right:0;"
方法三:
display: inline-block; 父元素设置text-align:center,直接可居中 (inline-block在IE6中不支持)
margin:0 auto;只对块元素生效
text-align对于浮动不生效
小技巧11:
background: red url(../images/tel.gif) no-repeat 95% 5px;
padding: 0 5px;
小技巧12:去掉a标签的下划线
text-decoration: none;无下划线
CSS:是Cascading Style Sheets的缩写,中文意思是级联样式表,只要是任何和样式有关的,布局、样式、颜色、大小等等,都与css相关。
CSS:是用来解决内容与表现分离的问题。(把内容和样式分离开)
二、CSS语法
CSS语法
selector{
property : value;
}
选择器、属性、值
class名最好小写
三、CSS基本选择器及权重值
1.标签选择器或元素选择器:
h1{ //(只要符合这个标签都会被选中)
}
2.分组选择器:
h1,p{
}
3. 子类选择器:div下的h1
div h1{
}
4.class选择器:
.class名{
}
5.id选择器:
#id名{
}
6.其他选择器
a:hover{
color: red; //鼠标滑过字体颜色变红
}
7.全部选择器
*{
}
权重值:
id选择器为100
class选择器为10
标签选择器为1
四、元素的类型
块元素:上下分布,宽度默认是其父级元素的100%
p、h1、div
行元素:水平分布
li a input
改变元素类型使用
display: inline-block;
display: block;
五、CSS的颜色
修改字体颜色:color: red;
修改背景颜色:backgroud-color: blue;
修改边框颜色:border: 1px solid #666;
颜色:
英文单词:red、bule
16进制:#ff0000 简写#ff0(两个两个的字母都一样可以简写成1个)
RGB:rgb(255,0,0) 或 rgb(100%,0%,0%)(红绿蓝三原色)
六、一些实用的小技巧
小技巧1:文字垂直居中 (text-align=center文字水平居中)
height: 30px;
line-height: 30px;
小技巧2:块元素居中
margin: 0 auto;
小技巧3:所有页面最好首先消掉内外边距(所有浏览器body都有8个像素外边距)
*{
padding: 0;
margin: 0;
}
小技巧4:鼠标移动到按钮区域显示小手
cursor: pointer;
小技巧5:
表格里去掉重复边框: border-collapse: collapse;
去掉字体粗细: font-weight: normal;
小技巧6:有浮动的存在时,下面内容为了不被覆盖,需要加both,即不左浮也不右浮。
clear: both;
小技巧7:溢出隐藏
overflow: hidden;
小技巧8:按z-index值的大小展示模块
z-index = 9999;
小技巧9:css精灵,选取图片中的某一个小图时使用
css sprite
#aa{
background: url(xx.jpg) -104px -112px;
}
小技巧10:如何让一个浮动的元素居中(在父元素居中)
方法一:
text-align: center;
float: left;
height: 30px;
position: absolute;
left: 50%;
margin-left: -81px;
方法二:
父元素设置宽和高,margin:0 auto;
子元素:float: left; 一个span设置为:style="margin-right:0;"
方法三:
display: inline-block; 父元素设置text-align:center,直接可居中 (inline-block在IE6中不支持)
margin:0 auto;只对块元素生效
text-align对于浮动不生效
小技巧11:
background: red url(../images/tel.gif) no-repeat 95% 5px;
padding: 0 5px;
小技巧12:去掉a标签的下划线
text-decoration: none;无下划线
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- 表格标签table深入了解
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- WEB标准网页布局中尽量不要使用的HTML标签
- 不同版本IE使用不同css(css条件注释语句用法)
- css类选择器的使用方法详解
- css文本框与按钮美化效果代码