• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
丶蘇Da同
博客园    首页    新随笔    联系   管理    订阅  订阅

【2017-03-24】CSS样式表

一、样式表的分类

1.内联式             优先级最高,重用性最差,常用

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性,样式属性可以包含任何 CSS 属性

格式:

<div style="width:100px;height:100px;border:1px solid black">这里是内容</div>

2.内嵌式             优先级和重用性都一般,不推荐使用

当单个文件需要特别样式时,就可以使用内嵌样式表。需要在 head 部分通过 <style> 标签定义内部样式表

格式:

<style type="text/css">

.div1{

width:100px;

height:100px;

background-color:red;

}

</style>

(在body部分使用div1)

<div class="div1"></div> 

3.外部式             优先级最低,重用性最高,常用

当样式需要被应用到很多页面的时候,通常使用外部样式表

方法:

创建样式表文件.css,添加样式表内容

.div1{

width:100px;

height:100px;

background-color:red;

} 

最后在html中调用该格式:将css文件拖到html的<head></head>中或者在<head></head>中输入代码:<link href="css文件的路径" rel="stylesheet" />

 

二、选择器

1、id选择器

优先级第一,只能选中一个元素。可以覆盖掉其他选择器

#ddd1{

 css属性

}

2、class选择器(类别选择器)

优先级第二,可以选中一堆元素。

.div1{

 css属性

}

3、标签选择器

根据标签名进行选择,如div、span   优先级最低,能选中一堆元素,不建议使用

div{

 css属性

}

4、复合选择器

(1)群组选择器

当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔

.div1,.div2,#ddd1{

 css属性

}

(2)后代选择器(包含选择器)

用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开

 .div1 #ddd1{

css属性

}

posted @ 2017-03-25 21:08  丶蘇Da同  阅读(260)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3