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);

装饰网站导航

csstransform  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复习的更多相关文章

  1. html+css复习之第3篇 | jquery | bootstrap

    html+css复习之第3篇 | jquery  | bootstrap

  2. 李洪强和你一起学习前端之(8)CSS复习

    今天是2017年3月24日周五 每一天都是余生当中最好的一天,珍惜当下. CSS基础复习 1 复习 1.1Css第一天 css层叠样式表 基础选择器 标签选择器 p{属性: 值;} 类选择器 .自定义 ...

  3. css复习笔记

    margin: 1. 当有三个值时第一个值为上,第二个值为左右,第三个值为下. 2.margin外边距折叠,水平没有,垂直会折叠,且折叠后以两者最大值为准.另外,当一个元素包裹另一元素时也会发生折叠. ...

  4. html+css复习之第1篇

    1. 保证在火狐浏览器字体<12px,苹果横屏的时候字体显示大小还是12px html { background: #fff; -webkit-text-size-adjust: 100%; - ...

  5. html+css复习之第2篇 | javascript

    1. java 中定义数组和对象: 数组(Array)字面量 定义一个数组: [40, 100, 1, 5, 25, 10] 对象(Object)字面量 定义一个对象: {firstName:&quo ...

  6. CSS复习第一天(简单规范)

    1.有意义的html     优点:与表现性的页面相比,有意义的页面更容易后期的处理与维护.                便于浏览器与屏幕阅读器识别.                更加便于调试样式 ...

  7. css复习内容

    有时候 自己动手写一遍比想十遍都有用 <!DOCTYPE html><html> <head> <meta charset="utf-8" ...

  8. H5+CSS复习笔记(全)

    1.自结束标签和注释 通常标签都是成对出现,如<h1></h1>,<div></div>等等.但是又些标签是没有结束标签的,成为自结束标签,如<i ...

  9. Day6:html和css

    Day6:html和css 复习 margin: 0; padding: 0; <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. SQLite学习笔记(八)&&sqlite实现架构

    该系列的前面一些文章我重点讲了sqlite的核心功能,比如封锁机制,共享缓存,以及事务管理等.但对于sqlite的整体没有作一个全面的介绍,本文将从实现的层面,整体介绍sqlite的框架.各个核心模块 ...

  2. XML 序列化与反序列化

    XML序列化与反序列化 1.将一个类转化为XML文件 /// <summary> /// 对象序列化成XML文件 /// </summary> /// <param na ...

  3. Ubuntu搭建Note.Js 平台

    1. 安装nodeJs和npm apt-get install nodejsapt-get install npm 2 .node有一个模块叫n,是专门用来管理node.js的版本的.首先安装n模块: ...

  4. java中设置代理的两种方式

    1 前言 有时候我们的程序中要提供可以使用代理访问网络,代理的方式包括http.https.ftp.socks代理.比如在IE浏览器设置代理. 那我们在我们的java程序中使用代理呢,有如下两种方式. ...

  5. Acionbar logo

    问题: 在使用Actionbar时,默认在左上角是会有一个跟软件发布时的LOGO一样的图标,在大多数情况下按照默认图标进行显示已经很好,既使得软件整体统一,也方便省事.但有些情况下,还是希望不同的界面 ...

  6. 【Windows编程】系列第七篇:Menubar的创建和使用

    上一篇我们学习了利用windows API创建工具栏和菜单栏,与上一篇紧密联系的就是菜单栏,菜单栏是一个大多数复杂一些的Windows应用程序不可或缺的部分.比如下图就是Windows自带的记事本的菜 ...

  7. Redis3 本地安装集群的记录

    引用CSDN文章 环境 centos6.7 目标 redis 三主三从的集群 step 1 编译,如果出错,则根据提示安装依赖 tar -zxvf redis-3.0.0.tar.gz mv redi ...

  8. oracle 倒库后insert id冲突的问题

    错误为:ORA-00001: unique constraint violated 把test库的数据导入到另一个库后,忘记修改自增id sequence的nextval了,因此,当前的数据库中数据和 ...

  9. UVA 11404 Palindromic Subsequence[DP LCS 打印]

    UVA - 11404 Palindromic Subsequence 题意:一个字符串,删去0个或多个字符,输出字典序最小且最长的回文字符串 不要求路径区间DP都可以做 然而要字典序最小 倒过来求L ...

  10. Chrome 控制台console的用法(转)

    下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用. 目前控制台方法和属性有: ["$$", "$x", "dir" ...