CSS学习笔记(记录一些小技巧)
来源:互联网 发布:贵州广电网络收费标准 编辑:程序博客网 时间:2024/06/05 20:09
一、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;无下划线
0 0
- CSS学习笔记(记录一些小技巧)
- CSS布局学习笔记and一些小技巧
- css学习的一些小技巧
- 记录一些小技巧
- 记录一些小技巧
- [Emacs学习笔记]一些小技巧
- Eclipse IDE 使用技巧 (Eclipse工作空间小技巧)(自己的一些学习笔记和心得,记录下来,备忘录和复习使用)
- 一些css小技巧收藏
- CSS中的一些小技巧
- Unity学习笔记 一些小疑问解答记录
- 【opencv 学习笔记】入门篇(一): 一些小技巧
- python︱sklearn一些小技巧的记录(pipeline...)
- 微信小程序学习笔记(一)——css小技巧
- Git学习笔记(3)--Git的基本操作及一些小技巧
- 矩阵及一些数学小技巧的学习笔记(不断补充中)
- 一些CSS相关的小技巧
- css+div 的一些小技巧
- 一些CSS兼容的小技巧
- Mongodb的windows服务安装和卸载
- 利用QtGraphicalEffects来使得自己的图像显示更加生动
- 常用排序--冒泡/快速排序
- sed 转译
- 安卓应用开发实战:[2]修改程序名称&标题
- CSS学习笔记(记录一些小技巧)
- Ubuntu上使用jsp去连接mysql的时候踢提示Access denied for user 'root'@'localhost' (using password: YES)的解决办法!!!
- 22、linux文件属性详解
- v4转v6
- 笔试——数据库、网络、操作系统(Linux)
- 2012年5月SAT香港真题解析
- MySQL事务隔离级别详解
- Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
- 第九节 linux标准输入输出操作