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. 解决ftp无法连接登录linux的办法

    1. 首先安装vsftpd 命令:yum -y install vsftpd 之后开启服务:service vsftpd start 2.关闭防火墙 1) 重启后生效 开启: chkconfig ip ...

  2. 30-盐水(分段dfs)

    链接:https://www.nowcoder.com/acm/contest/94/K来源:牛客网 时间限制:C/C++ 5秒,其他语言10秒 空间限制:C/C++ 131072K,其他语言2621 ...

  3. scala中的self type

    scala目前的书籍有两<快学scala>和<scala编程>.资料确实不多,对这个语法使用只能结合使用进行理解. 先看源码: private[spark] trait Act ...

  4. TestNG入门

    在Eclipse中安装TestNG 打开Eclipse   Help ->Install New Software ,   然后Add   "http://beust.com/ecli ...

  5. 微信开放平台 redirect_uri参数错误

    微信开放平台 redirect_uri参数错误   请注意是开放平台开放平台,公众平台和开放平台不是同一个. 解决办法 在写 授权回调域 时,地址只用写到域名级,不能写到域名下一级,这和QQ互联的回调 ...

  6. Windows Services windows服务如何删除服务

    如何删除服务 一.为何要删除服务: 1.当服务文件丢失时,在服务里还会显示. 2.现在好多都会有服务,你看那个不顺眼就可以把它干掉.前提是不用的软件. 二.使用: 使用sc.exe 这个是window ...

  7. javascript js获取url及url参数解析

    js获取url及url参数解析 一.获取url: var url=window.location.herf; 二.url参数解析: function GetRequest() { var url = ...

  8. CSS之字体样式

    css字体样式 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对单位使用 ...

  9. 7、OpenCV Python 高斯模糊

    __author__ = "WSX" import cv2 as cv import numpy as np #高斯模糊 基于权重(卷积) #高斯模糊 去燥效果很好 #高斯模糊 d ...

  10. SP18637 LAWRENCE - Lawrence of Arabia

    \(\color{#0066ff}{ 题目描述 }\) 给定一个长度为n的序列,至多将序列分成m+1段,每段序列都有权值,权值为序列内两个数两两相乘之和.求序列权值和最小为多少? \(\color{# ...