CSS层叠样式表

1.css层叠样式表 cascading style sheets 多个样式可以层层覆盖叠加,如果不同的css样式对同一个html标签进行修饰,有冲突是使用优先    级高的。

2.css特点:a丰富的样式定义 b易于使用和修改 c 多页面应用 d层叠 e页面压缩

3.语法规则,两部分  a选择器 选择器通常是需要改变的样式

     b 一条或多条声明 由一个属性和值组成(css对大小写不敏感)

4.(1)内联方式:css样式嵌入到html标签当中,类似属性的用法,可以单独设置某个元素样式,不利于样式重用

    (2)内部样式:head标签中使用style标签引入css,可以控制页面中多个元素样式,只能一个页面使用

    (3)外部样式:将css样式抽成一个单独文件,多个页面可以同时使用。

  优先级:内联样式>内部样式>外部样式

5.css选择器:

  a标签选择器:在<head> 中使用style标签引入在其中声明标签选择器,html标签属性,属性值

  b.id选择器

  c class选择器 

优先级  id class 标签

  6.CSS属性:font-size:字体大小

                       font-family:文字的字体

                       font-style:规定斜体字 italic 文本斜体显示  oblique 文本倾斜显示

                       font-weight:文本的粗细100~900 九级加粗度,100最细 400等价于normal,700等价于bold;

     文本属性:color 设置文本颜色

                       text-indent:5em 缩进元素中文本的首行,取值类型 text—indent:5em;第一行缩进五个字符

                       text-indent:20% 表示此段落第一行缩进父容器宽度的百分之二十;

          text-decoration:none 关闭原本应用到一个元素的所有装饰

                                      underline 添加下划线

                                      overline 顶端上划线

                                      line-through 文本中间画一个贯穿线

                                      blink 让文本闪烁

         text-aligh 对齐

         word-spacing 字符之间的间隔

         letter-spacing 单词或者字母之间的间隔

         line-height 设置行高

7.背景属性

      background-color 背景颜色,默认透明

      background-image:url(“图片路径”):设置背景图片

      background-repeat:repeat-y 垂直方向平铺

                                        repeat-x水平方向平铺

                                        repeat 水平垂直方向平铺

                                       no-repeat任何方向都不平铺

       background-position 改变图像在背景中的位置,top bottom left right center

       可以简写没有顺序

8.列表属性 list-style-type:decimal改变列表的标志类型

                  list-style-image:url(“images/xxx.gif“)inside

9.尺寸显示轮廓属性

     width 设置元素的宽度

     height:设置元素的高度

     display:none 不显示,block 块显示  inline行级显示   inline-block 行级块 outline-style:绘制于元素周围的一条线

10.浮动属性 模拟浮动的块 display

    静态定位static 

    相对定位 relative

    绝对路径 absolute 相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么他的位置相对于视窗本身。

    固定位置 fixed 网站左下角和右下角的广告,往下滑动还是有的。

11.CSS 盒子模型,border 边框   margin 外边框     padding 内边距  element一个元素 height元素高度  width元素宽度

      边框的属性:border-style  边框样式 solid实线,double实心线, dashaed虚线组成的边框,dotted圆点组成的边框

      边框的颜色:border-color

     边框的宽度: border-width

            外边距属性:margin 边框和边框外层的元素距离

            四个方向的距离顺序(top right bottom left)

12.css3扩展属性

     1.border-radius 圆角属性  border-radius:20px;

     2.box-shadow 添加阴影 box-shadow:10px 10px 5px 颜色;

     3.background-size 规定背景图片的尺寸 ,

     4.background-image 未指定元素使用多个背景图像,   

             background-image:url(../img/001.jpg),url(../002.bmp);

             background-repeat:no-repeat,no-repeat

            background-size:200px 100px 200px 100px;

           background-position :顺时针

 

 

 

 

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值