CSS基础属性

轩陌

分类: WEB前端 1122 0

css伪类

锚伪类

a:link{color:#f00},未访问的链接  

a:visited{color:#f00},已访问的链接

a:hover{color:#f00},鼠标移动到链接上

a:active{color:#f00},选定的链接

点我尝试一下

 重点:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

 重点:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

背景属性

background:  背景属性简写;

background-attachment:  固定背景,不随其他元素滚动,{(scroll 默认)(fixed 固定定位)}

background-color:  背景颜色;(可用英语单词rgb(0,0,0)十六进制颜色

background-image:背景图片,{ url(“图片地址”) }

background-repeat:  背景图片重复,(no-repeat 不重复repeat-x x轴重复y轴重复repeat 重复

background-position:  背景图片定位,{top bottomleft rightcenter)(100% 100%)(100px 100px)}

background-position实例

background-size:  背景图片大小,{cover contain 不可用于background后,单独设置)(100% 100% 相对于其父元素的宽高度)(100px 100px)}
background-attachment实例

定位

position:  static(默认值),静态定位,元素处于普通文档流(画板)

position:  raletive(相对定位)元素框相对于其正常为位置定位,仍然处于普通文档流中(画板) 其所占空间依然存在

position:  absolute(绝对定位),元素框从文档流删除,漂浮起来了,原来所占据的空间删除了,并相对于除了static定位以外的第一父元素定位 (临近原则

知识点:  相对定位和绝对定位通常是配合使用的。

position:  fixed(固定定位)元素框从文档流删除,漂浮起来了,原来所占据的空间删除了,相对于浏览器窗口定位

z-index:  层级,absolute 与fixed才有的属性 谁层级越高就优先显示谁

clip:  裁剪absolute绝对定位元素的边框,(上 下 左 右)

控制文本

text-indent:  px  em(首行缩进)

text-decoration:  none(没有样式)

text-decoration:  underline(下划线)

text-decoration:  overline(上划线)

text-decoration:  line-through(中间线)

word-spacing:  词间距,后跟单位(+ px– px

letter-spaning:  字间距,后跟单位(+ px– px

text-transform:  capitalize(首字母大写)

text-transform:  uppercase(大写)

text-transform:  lowercase(小写)

text-transform:  none(默认)

控制字体

color:  字体颜色 三种 第一种:red blue green (测试用)、 第二种:rgb();(不常用)、 第三种:十六进制(常用

font-family:  “Microsoft Yahei”(字体)

font-weight:  字体加粗(100-900)

font-weight:  normal 默认值=500

font-weight:  bold 加粗=700

font-weight:  bolder 更粗

font-weight:  linghter 更细

font-size:  文字的大小,单位偶数(14px2em%基于父元素的字体的尺寸

smaller:  设置为比父元素更小一级 2px

largter :  设置为比父元素更大一级 2px

font-style:  normal(默认值)

italic 文本字体倾斜 对文字、单词的正常结构有一定的倾斜改变

oblique 文本倾斜显示 仅仅是让文本正常的情况变倾斜而已

line-height:  px百分比%

font:  设置的顺序(font-stylefont-variant:small-caps 显示小型大写字母font-weightfont-size/line-height 常用font-family)

border/outline

border:  宽度 类型 颜色

border-width:  medium(默认的)

border-width:  thin(细的)

border-width:  thinkv(粗的)

border-style:  cnonev(=hidden,用于解决表格边框起冲突)

border-style:  solid(实线型)

border-style:  dotted(点状线)

border-style:  dashed(虚线)

border-style:  double(双线)

border-color:  颜色,后跟(十六进制颜色、)

border-color:  transparent(边框透明)

border-top:  上边框

border-right:  右边框

border-bottom:  下边框

border-left:  左边框

margin/padding

margin:  上 右 下 左,后跟单位(像素px百分比%相对单位em英寸in毫米mm)

margin-top:  上外边距

margin-right:  右外边距

margin-bottom:  下外边距

margin-left:  左外边距

margin:  10px上下左右外边距为10px

margin:  10px 20px上下10px、左右20px

margin:  10px 20px 30px上外边距10px左右外边距20px下外边距为30px

margin:  10px 20px 30px 40px

知识点:

1、行内元素设置上下左右内外边距没用

margin:  浏览器默认为没设置

padding:  设置但不起效果

2、外边距合并

a、当一个元素出现在另一个元素上边时,第一个的下外边距和第二个的上外边距会产生合并,两个盒子之间上下边距为大的值

b、当一个子元素包含在另外一个父元素(假设没有内边距 没有边框)中时,他们的的上外边距会发生合并,去数值大的

列表样式

list-style-type:  none没有  disc 默认值 实心圆   circle空心圆点  square实心方块

list-style-image:  url(路劲)

list-style-position:  设置前面的图标的位置  outside 默认值 在内容外面  inside 在内容里

  • 1人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
css、前端笔记

作者简介:轩陌

打赏

生命的意义在于折腾。

共 0 条评论关于 “CSS基础属性”

Loading...