CSS复习
CSS
选择器
p.into 表示带有into类的p元素
伪类:
a) first-line
b) last-line
伪元素:
:before 能在指定的元素前添加内容(创造内容)
如:p.tip:before{content: ‘hot top’;}
:after 用法和:before相同
::sekection 针对访问者选中的东西进行样式设置。(只能对颜色和背景颜色进行改变)
如:::selection{
color:#fff;
background-color:red;
}
属性选择器
如:img[title]
子选择器:nth-child()
如: tr:nth-child(odd){color:red;}
tr:nth-child(odd){color:blue;}
子类型选择器:
如:
:first-of-type 同 :first-child
:last-of-type 同 :last-child
:nth-of-type 同 :nth-child
not选择器
用样式继承节省时间
继承:用用在某个css标签上的样式内嵌到其子标签上
一般影响网页元素位置的属性,或者边距,背景色和元素的边框都不会被继承。
用层叠管理多样式
有限性:直接应用的->最近的祖先
用权值决定哪种样式胜出:(权重由上往下增大)
a) 标签选择器
b) 类选择器
c) ID选择器
d) 内嵌样式
权重相同的后面的会覆盖前面的。
文本格式化
大小写: text-transform: uppercase; / lowercase; / none;
小型大小写字母: font-variant : small-caps;
文本修饰: text-decoration: overline; / underline; …
使用上下边框可以代替上下下划线
字间距,字耦距 word-spacing letter-spacing
给文本添加阴影:text-shadow : 4px 4px 3px #ddd;
水平偏移量,垂直偏移量,阴影模糊度,颜色
给网页添加图片
background-image: url();
background-position: top; / center; /bottom;
例如:
background-position: top top;
background-position: 20px 30px;
background-position: 50% 50%;
background-attachment: scroll; / fixed;
background-origin 和 background-clip
background-origin: 图片的起始位置:可接收的值如下
border-box 图片放置与border区域左上角
padding-box 图片放置与padding区域左上角
center-box 图片放置与center区域右上角
background-clip : 限制背景图片的显示区域
border-box 图片放置与内容区域后面
padding-box 图片放置与padding区域左上角
center-box 图片放置与center区域右上角
background-size: 缩放背景图片
value : background-size:100px 200px;
key : background-size: contain; / cover
contain:保持长宽比 ; cover: 不保持长宽比
使用渐变色背景:
background-image : linear-gradient(left , black, red);
装饰网站导航
css的transform transition animation
1,transform (变形)
a) transform: roate(10deg); 顺时针旋转10度
b) transform: scale(2); 放大2倍
c) transform: translate(1px 2px); 向右移动1px 向下移动2px
d) transform: skew(0, 45deg); 沿Y轴倾斜45度
可以多个函数共用:
transform: roate(10deg) scale(2) translate(1px 2px);
2,transition 在一定时间内是一组样式换到领一组样式
.navbutton{
color: red;
transition-property: background-color;
transition-duration: 1s;
}
.navbutton:hover{
color: blue;
}
transition-property: background-color, color, border-color;
transition-duration: 1s, 2s, 3s;
transition-timing-function
a) linear
b) ease
c) ease-in
d) ease-out
e) ease-in-out
f) cubic-bezier(0.1, 0.2, 0.8, 0.6);
transition-delay: 5s;
animation
animation-duration: 1s;
animation-name: fideIn, blink;
animation-interation-count:10;
animation-play-state: running; / paused;
表格和表单的格式化
1, 给表格定义样式
a) 添加padding td{padding: 1px 2px 3px 4px;}
b) 调整垂直对齐和水平对齐
1,text-align (left , right, center)
2,vertical-align (top, baseline, middle, bottom)
c) 创建边框
1,cellspacing borderspacing: 0;
2,border-callapse (collapse) 消除双边框
2, 给行和列定义样式
tr:nth-of-type(odd){color:red;}
tr:nth-of-type(even){color:red;}
3,给表单定义样式
CSS布局
<blockquot> 标签(一个块)
<article> <header> <footer> <nav>
基于浮动的布局
float: left; / right; / none;
克服浮动: clear: left; / right;
浮动下落:
box-sizing: center-box; / padding-box; border-box;
CSS复习的更多相关文章
- html+css复习之第3篇 | jquery | bootstrap
html+css复习之第3篇 | jquery | bootstrap
- 李洪强和你一起学习前端之(8)CSS复习
今天是2017年3月24日周五 每一天都是余生当中最好的一天,珍惜当下. CSS基础复习 1 复习 1.1Css第一天 css层叠样式表 基础选择器 标签选择器 p{属性: 值;} 类选择器 .自定义 ...
- css复习笔记
margin: 1. 当有三个值时第一个值为上,第二个值为左右,第三个值为下. 2.margin外边距折叠,水平没有,垂直会折叠,且折叠后以两者最大值为准.另外,当一个元素包裹另一元素时也会发生折叠. ...
- html+css复习之第1篇
1. 保证在火狐浏览器字体<12px,苹果横屏的时候字体显示大小还是12px html { background: #fff; -webkit-text-size-adjust: 100%; - ...
- html+css复习之第2篇 | javascript
1. java 中定义数组和对象: 数组(Array)字面量 定义一个数组: [40, 100, 1, 5, 25, 10] 对象(Object)字面量 定义一个对象: {firstName:&quo ...
- CSS复习第一天(简单规范)
1.有意义的html 优点:与表现性的页面相比,有意义的页面更容易后期的处理与维护. 便于浏览器与屏幕阅读器识别. 更加便于调试样式 ...
- css复习内容
有时候 自己动手写一遍比想十遍都有用 <!DOCTYPE html><html> <head> <meta charset="utf-8" ...
- H5+CSS复习笔记(全)
1.自结束标签和注释 通常标签都是成对出现,如<h1></h1>,<div></div>等等.但是又些标签是没有结束标签的,成为自结束标签,如<i ...
- Day6:html和css
Day6:html和css 复习 margin: 0; padding: 0; <!DOCTYPE html> <html lang="en"> <h ...
随机推荐
- SQLite学习笔记(八)&&sqlite实现架构
该系列的前面一些文章我重点讲了sqlite的核心功能,比如封锁机制,共享缓存,以及事务管理等.但对于sqlite的整体没有作一个全面的介绍,本文将从实现的层面,整体介绍sqlite的框架.各个核心模块 ...
- XML 序列化与反序列化
XML序列化与反序列化 1.将一个类转化为XML文件 /// <summary> /// 对象序列化成XML文件 /// </summary> /// <param na ...
- Ubuntu搭建Note.Js 平台
1. 安装nodeJs和npm apt-get install nodejsapt-get install npm 2 .node有一个模块叫n,是专门用来管理node.js的版本的.首先安装n模块: ...
- java中设置代理的两种方式
1 前言 有时候我们的程序中要提供可以使用代理访问网络,代理的方式包括http.https.ftp.socks代理.比如在IE浏览器设置代理. 那我们在我们的java程序中使用代理呢,有如下两种方式. ...
- Acionbar logo
问题: 在使用Actionbar时,默认在左上角是会有一个跟软件发布时的LOGO一样的图标,在大多数情况下按照默认图标进行显示已经很好,既使得软件整体统一,也方便省事.但有些情况下,还是希望不同的界面 ...
- 【Windows编程】系列第七篇:Menubar的创建和使用
上一篇我们学习了利用windows API创建工具栏和菜单栏,与上一篇紧密联系的就是菜单栏,菜单栏是一个大多数复杂一些的Windows应用程序不可或缺的部分.比如下图就是Windows自带的记事本的菜 ...
- Redis3 本地安装集群的记录
引用CSDN文章 环境 centos6.7 目标 redis 三主三从的集群 step 1 编译,如果出错,则根据提示安装依赖 tar -zxvf redis-3.0.0.tar.gz mv redi ...
- oracle 倒库后insert id冲突的问题
错误为:ORA-00001: unique constraint violated 把test库的数据导入到另一个库后,忘记修改自增id sequence的nextval了,因此,当前的数据库中数据和 ...
- UVA 11404 Palindromic Subsequence[DP LCS 打印]
UVA - 11404 Palindromic Subsequence 题意:一个字符串,删去0个或多个字符,输出字典序最小且最长的回文字符串 不要求路径区间DP都可以做 然而要字典序最小 倒过来求L ...
- Chrome 控制台console的用法(转)
下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用. 目前控制台方法和属性有: ["$$", "$x", "dir" ...