5月 28日css前端知识
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前端知识的更多相关文章
- 10月28日PHP基础知识测试题
本试题共40道选择题,10道判断题,考试时间1个半小时 一:选择题(单项选择,每题2分): 1. LAMP具体结构不包含下面哪种(A) A:Windows系统 B:Apache服务器 C:MySQL数 ...
- 2013年7月28日web前端学习笔记-------head相关标签应用
7月份快过完了.趁周日写写学过觉得有用的东西. 1.缩略图的展示问题,不要以为缩略图设置了width,height,就是缩略图了.比如一个300kb的500*500原始图片,用户请求web服务器后,展 ...
- 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,若有 ...
- 无插件的大模型浏览器Autodesk Viewer开发培训-武汉-2014年8月28日 9:00 – 12:00
武汉附近的同学们有福了,这是全球第一次关于Autodesk viewer的教室培训. :) 你可能已经在各种场合听过或看过Autodesk最新推出的大模型浏览器,这是无需插件的浏览器模型,支持几十种数 ...
- 2015年12月28日 Java基础系列(六)流
2015年12月28日 Java基础系列(六)流2015年12月28日 Java基础系列(六)流2015年12月28日 Java基础系列(六)流
- 2016年11月28日 星期一 --出埃及记 Exodus 20:19
2016年11月28日 星期一 --出埃及记 Exodus 20:19 and said to Moses, "Speak to us yourself and we will listen ...
- 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 ...
- 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 ...
- 跨界!Omi 发布多端统一框架 Omip 打通小程序与 Web 腾讯开源 2月28日
https://mp.weixin.qq.com/s/z5qm-2bHk_BCJAwaodrMIg 跨界!Omi 发布多端统一框架 Omip 打通小程序与 Web 腾讯开源 2月28日
随机推荐
- day69-oracle 21-PLSQL课后作业
- java 矩阵转置算法
工作中用到了行列转置,把这两种情况的算法记下来,以便后用 1.行列数相等的转置 /** * @description 矩阵转置 * @author oldmonk * @time 2017年8月18日 ...
- Hibernate 执行sql语句返回yntax error: syntax error, expect LPAREN, actual NOT not
hibernate自动创建表时提示 : ERROR: sql injection violation, syntax error: syntax error, expect LPAREN, actu ...
- 为什么一些公司把dwg文件转化为pdf
是因为dwg文件中可能会涉及到字体问题 这台电脑打开dwg没问题,另一台电脑可能没有相应的字体用autocad打开就会出现乱码,所以先转化为pdf,而pdf有固定格式的作用,能够保证一台电脑打开是什么 ...
- 形式化验证工具(PAT)羊车门代码学习
首先介绍一下PAT工具,下图是PAT工具的图标 PAT工具全称是Process Analysis Toolkit,可以做一些简单的验证. 今天我们分析一下例子里面的Monty Hall Problem ...
- [译]Javascript的弱点
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
- blkid找不到需要的uuid
记录: blkid找不到需要的uuid,需要格式化后才有
- C++时间操作的汇总
. 获取当前时间 time_t cur_time = time(NULL); . 把整数时间转为字符串时间 string GetStringTime(const time_t time) { stru ...
- webpack热更新实现
原文地址:webpack热更新实现 webpack,一代版本一代神,代代版本出大神.如果你的webpack和webpack-dev-server版本大于2小于等于3.6,请继续看下去.其它版本就必浪费 ...
- sap abap 流水号设置
1.TCODE:SNRO,进入如图所示界面 2. 短文本和长文本用来说明这个编号范围对象,输入任意描述即可. 子对象数据元素我们这里不填.这里需要说明一下,所谓子对象,多数指一个组织结构,比如公司代码 ...