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日
随机推荐
- 解决ftp无法连接登录linux的办法
1. 首先安装vsftpd 命令:yum -y install vsftpd 之后开启服务:service vsftpd start 2.关闭防火墙 1) 重启后生效 开启: chkconfig ip ...
- 30-盐水(分段dfs)
链接:https://www.nowcoder.com/acm/contest/94/K来源:牛客网 时间限制:C/C++ 5秒,其他语言10秒 空间限制:C/C++ 131072K,其他语言2621 ...
- scala中的self type
scala目前的书籍有两<快学scala>和<scala编程>.资料确实不多,对这个语法使用只能结合使用进行理解. 先看源码: private[spark] trait Act ...
- TestNG入门
在Eclipse中安装TestNG 打开Eclipse Help ->Install New Software , 然后Add "http://beust.com/ecli ...
- 微信开放平台 redirect_uri参数错误
微信开放平台 redirect_uri参数错误 请注意是开放平台开放平台,公众平台和开放平台不是同一个. 解决办法 在写 授权回调域 时,地址只用写到域名级,不能写到域名下一级,这和QQ互联的回调 ...
- Windows Services windows服务如何删除服务
如何删除服务 一.为何要删除服务: 1.当服务文件丢失时,在服务里还会显示. 2.现在好多都会有服务,你看那个不顺眼就可以把它干掉.前提是不用的软件. 二.使用: 使用sc.exe 这个是window ...
- javascript js获取url及url参数解析
js获取url及url参数解析 一.获取url: var url=window.location.herf; 二.url参数解析: function GetRequest() { var url = ...
- CSS之字体样式
css字体样式 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对单位使用 ...
- 7、OpenCV Python 高斯模糊
__author__ = "WSX" import cv2 as cv import numpy as np #高斯模糊 基于权重(卷积) #高斯模糊 去燥效果很好 #高斯模糊 d ...
- SP18637 LAWRENCE - Lawrence of Arabia
\(\color{#0066ff}{ 题目描述 }\) 给定一个长度为n的序列,至多将序列分成m+1段,每段序列都有权值,权值为序列内两个数两两相乘之和.求序列权值和最小为多少? \(\color{# ...