前端总结之CSS(层级样式表)

一、CSS的概念

cascading style sheet,层级样式表,表现HTML或者XHTML文件样式的计算机语言:包括对字体、颜色、边框、高度、宽度和背景图片,网页定位等等的设定;

1.1、CSS基本语法

选择器{   声明1:
          声明2:
       }

例如:
 h1{                 //选择器(标签选择器,或者叫元素选择器)
    font-size:12px;  //属性:属性值
    color:#ffffff;   //属性:属性值
    }

二、HTML中引入CSS样式

2.1、行内样式

    直接写在标签的属性style里面,如下:
<h1 style="font-size:12px;color:#ffffff;">字体大小和颜色</h1>

2.2、内部样式

<style type="text/css">
  h1{
     font-size:12px;
     color:#ffffff;
    }
</style>

2.3、外部样式

       使用外部样式,是为了降低多个页面引用相同样式而产生的代码重复,提高代码复用。将css代码保存在扩展名为.css的样式表中,HTML文件引入.css样式表,有两种方式。1、链接式。2、导入式;
       链接式:在<head></head>里面,链接外部样式表=>  <link ref="stylesheet" href="style.css" type="text/css" />
       导入外部样式表:在<style type="text/css"></style>中加入=> @import url("style.css")
       链接式和导入式的区别:
        1、链接式中<link />标签属于XHTML,导入式中@import属于CSS2.1
        2、使用<link />链接的CSS文件先加载到网页中,然后再进行编译显示;使用导入式导入CSS文件,客户端显示HTML结构,再把CSS文件加载到网页中。
        3、@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器是不兼容的。

2.4、CSS样式优先级

       行内样式    >(优先于) 内部样式   > (优先于)  外部样式

三、CSS基本选择器

    简介:什么是CSS选择器呢?所谓的CSS选择器,是指如何选择指定选择器并给它加上样式。基本选择有以下几种:标签选择器、类选择器和ID选择器。

3.1、标签选择器

3.2、类选择器

3.3、ID选择器

3.4、基本选择器的优先级

      ID选择器 > 类选择器 >标签选择器

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值