WEB基础之:CSS

一、CSS概述。

Cascading Style Sheet 层叠样式表

作用是使HTML和显示的样式进行分离。

二、CSS和HTML的四种结合方式。

第一种:使用标签的style属性。在属性中写样式。行内样式。
    例:<p style="color:red">一段文字</p>

第二种:使用style标签,在style标签体内写样式。一般在head里面写。
    例:<style type="text/css"></style>
    type属性:定义style标签体的内容类型。

第三种:使用link标签,导入外部的css文件。
    例:<link rel="stylesheet" href="demo.css" type="text/css">
    rel:规定当前文档和目标文档之间的关系。
    href:css资源的URL。
    type:规定目标URL的MIME类型。
        MIME:多用途互联网邮件扩展类型。

第四种:使用@import导入外部css(用的很少)。
    例:<style type="text/css" @import:url('demo.css'); </style>

三、CSS样式优先级和代码规范。

优先级:
    由上而下,由外向内,优先级从低到高。
    简单的说:就近原则(谁离标签近,就使用哪个样式)

代码规范:
    选择器名称{
        样式的属性:属性的值;
    }
总结:属性和属性之间用 ; 分隔。
      属性和值之间用 : 分割。
      一个属性有多个值的情况下,值之间用空格分割。

四、三种常用选择器。

第一种:HTML标签选择器。
    以HTML的标签名称作为选择器的名称。

    例:
     div{
         样式的属性:属性的值; 
     }

第二种:ID选择器,用到的是HTML标签的id属性。
    以#加上id属性的值作为选择器的名称。
    例:
    #div1{
        样式的属性:属性的值;
    }

第三种:类选择器,用到的是HTML标签的class属性。
    以.加上class属性的值作为选择器的名称。

    例:
    .myspan{
         样式的属性:属性的值;
    }

五、三种扩展选择器。

第一种:关联选择器,是以外标签空格内标签作为选择器的名称。

例:
p d{
    样式的属性:属性的值; 
}

第二种:组合选择器,用的是标签的名称 , 表标签的名称来定义选择器的名称。

例:
dir,span{
    样式的属性:属性的值; 
}

第三种:伪元素选择器,定义的是超链接的几种行为。

例:
a:link{
    color:red;
}
link:未点击状态。

a:hover{
    font-size:25px;
}
hover:鼠标悬停状态。

a:active{
    color:blue;
}
active:鼠标点击时状态。

a:visited{
    text-decoration:none;
}
visited:鼠标点击后状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值