a:link {color : #FF0000}    #未访问连接时设置颜色

a:visited {color:  #FF0000}   #访问过得连接设置颜色

a:hover {color: #FF0000}   #鼠标放在上面设置的  颜色

a:active{color: #FF0000}      #选定时设置的颜色

input: focus{outline:none; background-color:#eee}

p.first_letter{ font_size:24px ;  }

p.before {content:'@';            } 在每个p标签前面加内容@

p.after {content:'@';            } 在每个p标签后面加内容@

before和after多用于清除浮动。

优先级 :内联式》id选择器》类选择器》元素选择器               也可以用!important 强制生效

width设置宽度,height设置高度。块级标签才能设置宽度,内联标签的宽度由内容来决定

body {

font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}   font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。

p {font-weight:bold     或font-weight:bolder

}  字体粗度,粗或更粗

p {color : #FF0000或RGB(255,0,0)或red或者 rgba(255,0,0 , 1)最后一个透明度0-1

}

p{ text-align:center(居中),left(左对齐),right(右对齐)}

p{text-decoration: underline (文本下一条线),overline(文本上的一条线),line-through(穿越文本的  一条线)}

常用来去除a标签下的一条线       a {text-decoreation:none}

p{text-indent:32px}首行缩进

p{ background-color:red,background-image:url('1.jpg'),

background-repeat:no-repeat #设置图片不铺满整个背景  background-repeat:repeat-x  #设置图片铺满x轴

background-position: right,top(背景在右上角) , background-position:200px,200px

background:#ffffff url('1.png') no-repeat right top;支持简写

background-attachment: fixed 滚轮背景不动 宽度要设置成百分百,width:100%

}

#i1{border-width: 2px;border-style:solid(实线边框,还有none,dashed虚线边框); border-color:red           }#设置边框属性 

#i2{border:2px solid red}          为单独某一边框赋值,border-top-color border-bottom-style

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

display:'block' 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。

盒子模型:

  • margin:            用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
  • padding:           用于控制内容与边框之间的距离;
  • Border(边框):     围绕在内边距和内容外的边框。
  • Content(内容):   盒子的内容,显示文本和图像。

浮动 float:right  向左浮动

clear:both 两边不允许浮动 clear left   左侧不允许浮动

默认 :.clearfix:after {

content: "";

display: block;

clear: both:

}

overflow:hidden   内容会被修剪,其余内容不可见

overflow:scroll    内容会被修剪,其余内容用滚轮可以查看

position:relative的一个主要用法:方便绝对定位元素找到参照物。

position:absolute 对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。

fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位

5月 28日css前端知识的更多相关文章

  1. 10月28日PHP基础知识测试题

    本试题共40道选择题,10道判断题,考试时间1个半小时 一:选择题(单项选择,每题2分): 1. LAMP具体结构不包含下面哪种(A) A:Windows系统 B:Apache服务器 C:MySQL数 ...

  2. 2013年7月28日web前端学习笔记-------head相关标签应用

    7月份快过完了.趁周日写写学过觉得有用的东西. 1.缩略图的展示问题,不要以为缩略图设置了width,height,就是缩略图了.比如一个300kb的500*500原始图片,用户请求web服务器后,展 ...

  3. 2016年12月28日 星期三 --出埃及记 Exodus 21:23

    2016年12月28日 星期三 --出埃及记 Exodus 21:23 But if there is serious injury, you are to take life for life,若有 ...

  4. 无插件的大模型浏览器Autodesk Viewer开发培训-武汉-2014年8月28日 9:00 – 12:00

    武汉附近的同学们有福了,这是全球第一次关于Autodesk viewer的教室培训. :) 你可能已经在各种场合听过或看过Autodesk最新推出的大模型浏览器,这是无需插件的浏览器模型,支持几十种数 ...

  5. 2015年12月28日 Java基础系列(六)流

    2015年12月28日 Java基础系列(六)流2015年12月28日 Java基础系列(六)流2015年12月28日 Java基础系列(六)流

  6. 2016年11月28日 星期一 --出埃及记 Exodus 20:19

    2016年11月28日 星期一 --出埃及记 Exodus 20:19 and said to Moses, "Speak to us yourself and we will listen ...

  7. 2016年10月28日 星期五 --出埃及记 Exodus 19:13

    2016年10月28日 星期五 --出埃及记 Exodus 19:13 He shall surely be stoned or shot with arrows; not a hand is to ...

  8. 2016年6月28日 星期二 --出埃及记 Exodus 14:25

    2016年6月28日 星期二 --出埃及记 Exodus 14:25 He made the wheels of their chariots come off so that they had di ...

  9. 跨界!Omi 发布多端统一框架 Omip 打通小程序与 Web 腾讯开源 2月28日

    https://mp.weixin.qq.com/s/z5qm-2bHk_BCJAwaodrMIg 跨界!Omi 发布多端统一框架 Omip 打通小程序与 Web 腾讯开源 2月28日

随机推荐

  1. day69-oracle 21-PLSQL课后作业

  2. java 矩阵转置算法

    工作中用到了行列转置,把这两种情况的算法记下来,以便后用 1.行列数相等的转置 /** * @description 矩阵转置 * @author oldmonk * @time 2017年8月18日 ...

  3. Hibernate 执行sql语句返回yntax error: syntax error, expect LPAREN, actual NOT not

    hibernate自动创建表时提示 :  ERROR: sql injection violation, syntax error: syntax error, expect LPAREN, actu ...

  4. 为什么一些公司把dwg文件转化为pdf

    是因为dwg文件中可能会涉及到字体问题 这台电脑打开dwg没问题,另一台电脑可能没有相应的字体用autocad打开就会出现乱码,所以先转化为pdf,而pdf有固定格式的作用,能够保证一台电脑打开是什么 ...

  5. 形式化验证工具(PAT)羊车门代码学习

    首先介绍一下PAT工具,下图是PAT工具的图标 PAT工具全称是Process Analysis Toolkit,可以做一些简单的验证. 今天我们分析一下例子里面的Monty Hall Problem ...

  6. [译]Javascript的弱点

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  7. blkid找不到需要的uuid

    记录: blkid找不到需要的uuid,需要格式化后才有

  8. C++时间操作的汇总

    . 获取当前时间 time_t cur_time = time(NULL); . 把整数时间转为字符串时间 string GetStringTime(const time_t time) { stru ...

  9. webpack热更新实现

    原文地址:webpack热更新实现 webpack,一代版本一代神,代代版本出大神.如果你的webpack和webpack-dev-server版本大于2小于等于3.6,请继续看下去.其它版本就必浪费 ...

  10. sap abap 流水号设置

    1.TCODE:SNRO,进入如图所示界面 2. 短文本和长文本用来说明这个编号范围对象,输入任意描述即可. 子对象数据元素我们这里不填.这里需要说明一下,所谓子对象,多数指一个组织结构,比如公司代码 ...