常用CSS代码大全

admin2个月前建站技巧130
一.文本设置
 
  1、font-size:字号参数
 
  2、font-style:字体格式
 
  3、font-weight:字体粗细
 
  4、颜色属性
 
  color:参数
 
  注意使用网页安全色
 
  二、超链接设置
 
  text-decoration:参数
 
  主要用途是改变浏览器显示文字链接时的下划线。
 
  参数取值范围:
 
  underline:为文字加下划线
 
  overline:为文字加上划线
 
  line-through:为文字加删除线
 
  blink:使文字闪烁
 
  none:不显示上述任何效果
 
  三、背景
 
  1、背景颜色
 
  background-color:参数
 
  2、背景图片
 
  background-image:url(URL)
 
  URL就是背景图片的存放路径,none表示无。
 
  3、背景图片重复
 
  background-repeat:参数
 
  参数取值范围:
 
  no-repeat:不重复平铺背景图片
 
  repeat-x:使图片只在水平方向上平铺
 
  repeat-y:使图片只在垂直方向上平铺
 
  如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。
 
  4、背景图片固定
 
  背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时转移浏览者的注意力,一般都设为固定
 
  background-attachment:参数
 
  参数取值范围:
 
  fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动
 
  scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动
 
  四、区块
 
  1、单词间距
 
  word-spacing:间隔距离
 
  2、字母间距
 
  letter-spacing:字母间距
 
  3、文本对齐
 
  text-align:参数
 
  参数的取值:
 
  left:左对齐
 
  right:右对齐
 
  center:居中对齐
 
  justify:相对左右对齐
 
  4、垂直对齐
 
  vertical-align:参数
 
  top:顶对齐
 
  bottom:底对齐
 
  text-top:相对文本顶对齐
 
  text-bottom:相对文本底对齐
 
  baseline:基准线对齐
 
  middle:中心对齐
 
  sub:以下标的形式显示
 
  super:以上标的形式显示
 
  5、文本缩进
 
  text-indent:缩进距离
 
  12px相当于一个文字距离
 
  6、空格
 
  white-space:参数
 
  normal正常
 
  pre保留
 
  nowrap不换行
 
  7、显示样式
 
  display:参数
 
  参数取值范围:
 
  block:块级元素,在对象前后都换行
 
  inline:在对象前后都不换行
 
  list-item:在对象前后都换行,增加了项目符号
 
  none:无显示
 
  五、方框
 
  1、height高度
 
  2、width宽度
 
  3、padding内边距
 
  4、margin外边距
 
  5、float(浮动):可以让块级元素在一行中排列,例如横向菜单。
 
  6、clear清除浮动
 
  六、边框
 
  1、样式
 
  borderstyle参数
 
  边框样式的参数:
 
  none:无边框
 
  dotted:边框为点线
 
  dashed:边框为长短线
 
  solid:边框为实线
 
  double:边框为双线
 
  2、宽度
 
  borderwidth参数
 
  3、颜色
 
  bordercolor参数
 
  七、列表
 
  list-style-type列表样式
 
  不同浏览器的列表符可能不相同,可能会影响到网页,所以网页中的列表大多都是由背景图片显示。
 
  控制用户界面的样式
 
  八、鼠标
 
  cursor:鼠标形状参数
 
  CSS鼠标形状参数表:
 
  鼠标形状:CSS代码
 
  style="cursor:hand"手形
 
  style="cursor:crosshair"十字形
 
  style="cursor:text"文本形
 
  style="cursor:wait"沙漏形
 
  style="cursor:move"十字箭头形:
 
  style="cursor:help"问号形
 
  style="cursor:e-resize"右箭头形
 
  style="cursor:n-resize"上箭头形
 
  style="cursor:nw-resize"左上箭头形
 
  style="cursor:w-resize"左箭头形
 
  style="cursor:s-resize"下箭头形
 
  style="cursor:se-resize"右下箭头形
 
  style="cursor:sw-resize"左下箭头形


相关文章

使用Forsaken Mail搭建临时邮箱教程

使用Forsaken Mail搭建临时邮箱教程

环境:centos-7.5.1804LINUX面板:https://www.appnode.com/临时邮箱软件:Forsaken Mail安装Node.js1、装好APPNode面板,在软件管家里面...

一行代码解决:纯CSS实现目录自动编号

一行代码解决:纯CSS实现目录自动编号

在css中list-style-type属性可以用于控制列表项显示符号的类型none:无标记。disc:默认。标记是实心圆。circle:标记是空心圆。square:标记是实心方块。decimal:标...

html -- pre标签内容自动换行CSS纯净代码?

html -- pre标签内容自动换行CSS纯净代码?

在一些特殊的排版中,我们期望显示的内容能够和代码里的格式展示的一致。但是如果长度太长的话可以自动化行,而pre标签默认是不给换行的。代码如下:<template>  <di...

CSS 文本超出隐藏,并显示省略号

CSS 文本超出隐藏,并显示省略号

可以使用overflow:hidden;来把超出的部分隐藏,使用text-overflow:ellipsis;当文本对象溢出是显示为省略号。以下是可直接使用的代码://超出一行省略号overflow:...

关于网站建设的十个策划小技巧

关于网站建设的十个策划小技巧

好多站长在网站建设的时候往往既要考虑的网站的整体美观度,同时还要考虑到网站的实用性和营销作用,那么在这方面都有什么小技巧吗,或者有什么要注意的吗,原创小编今天就为大家整理了十条关于网站建设的实用小技巧...

http和https有什么区别?

http和https有什么区别?

当我们在打开网页的时候,经常会看到有的网址显示的是http,有的网址显示的是https,而有的浏览器还会提示http不安全,而打开https地址会有绿色安全图标。有的人会禁不住发问,这两者之间到底有什...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。