css基础

CSS

1CSS概述

CSS:层叠样式表,是对html进行样式修饰的语言,       如果不同的css样式对同一html标签进行修饰,样式有冲突的部分,应用优先级高的,不冲突的部分共同作用.

作用:   1.修饰html的,使html更加好看.

        2. 提高样式代码的复用性

        3.使html的内容与样式分离,便于后期的维护.

2CSS引入方式

 >1.内嵌样式

把css代码嵌入到html当中 使用style属性将样式嵌入到html标签中,属性的写法: 属性:属性值,多个属性之间用分号隔开.(不建议使用)

     2.内部样式

在<head>标签中使用<style>标签进行css引入

     3.外部样式(所有浏览器都支持)

将css样式抽取到一个单独到css文件中,谁使用谁就引入

<linkrel="stylesheet" type="text/css"href="demo1.css"/>

           1.创建css文件,将属性写在css文件中

           2.在head中使用link标签进行引入

     4.@import方式(低版本IE不支持),不支持js的动态修改

             @import url(“css地址”);

3 CSS选择器

>1基本选择器

  -1.元素选择器

      语法:html标签名{css属性}       

-2.id选择器(id具有唯一性)

         语法:#id的值{css属性}

-3.class选择器
    语法:  .class的值{css属性}

选择器优先级:id>class>元素选择器

>2属性选择器

语法:  基本选择器[属性名='属性值']{css属性}

>3伪元素选择器

a标签的伪元素选择器:

   语法:

        静止状态   a:link{css属性}

        悬浮状态   a:hover{css属性}

        触发状态   a:active{css属性}

        完成状态   a:visited{css属性}

>4层级选择器

  语法:

       父级选择器 子级选择器... 标签名{css属性}

4CSS属性

>1、文字属性

     font-size:大小 font-family:字体类型   

>2、文本属性

     color:颜色text-decoration:下划线

     属性值:none underline

     text-align:对齐方式

     属性值:left  center right   

>3、背景属性

     background-color:背景颜色

     background-image:背景图片

        属性值:url("图片地址");

     background-repeat:平铺方式

        属性值:默认横向纵向平铺

     repeat:横向纵向平铺    no-repeat:不平铺          repeat-y:纵向          repeat-x:横向   

>4、列表属性

     list-style-type:列表项前的小标志

        属性值:太多了

     list-style-image:列表项前的小图片

        属性值:url("图片地址");

>5、尺寸属性

     width:宽度     height:高度  

>6、显示属性

     display:

        属性值: none:隐藏

          block:块级显示

          inline:行级显示

>7、浮动属性

     float:

        属性值:left  right

          clear:清除浮动 leftright both

        缺点:  (1)影响相邻元素不能正常显示

          (2)影响父元素不能正常显示

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值