CSS 分类 选择器

CSS:层叠样式表(英文全称:Cascading Style Sheets)

后缀名:css

标志  style

对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力

用 属性 和 属性值 来表示     style=" 属性 : 属性值

一 分类

 内联:写在标记的属性位置,优先级最高,重用性最差

< div style = "width : 100px; height : 100px; background-color : red; bordet : 1px solid blak ">

</div >

内嵌:写在页面的head中,优先级第二,重用性一般

<style type = " text/css ">

p {                                             -- 只对 p 标签起作用

样式

}                                               -- 标签的 高、宽、颜色等 都是一种样式

外部:写在一个以css结尾的文件中,通过引用来建立文件与html页面的关系,优先级最低,但是最灵活最好用,重用性最好

————————————————————

. p {

样式                                    -- css样式文件  相当于  <style type = " text/css "> 直接写就可以

}

二 选择器 

主要针对外部内嵌两种形式

id选择器: #  id,优先级最高,只能选中一个元素

| # a {                |

|            样式       |

|       }                |

-————————-

调用    <div  id = " a " >       <div>

class选择器:. class,优先级第二,能选中一堆元素

b {                 |

|            样式       |

|       }                |

-————————-

调用    <div  clss = " b " >       <div>

标签选择器:标签名 div  span 等给指定标签一个样式,优先级最低,能选中一堆元素,不建议使用

 div  {              |

|            样式       |

|       }                |

-————————-

调用    <div >       <div>                 -- 给所有的 div 套一个样式

特殊选择器:
   并列:逗号隔开

. d1, .d2, #d3 {        |                  -- d1,d2,d3 样式相同

|            样式                 |                  -- 可以用在不同的父集子集中

|       }                          |

-————————-——---

调用    <div  clss = " d1" >     <div>

<div  clss = " d2 " >    <div>

< div  id  = " d3 "  >    <div>

后代:空格隔开

.d2 sp  {          |

|            样式       |                   -- 在标签 d2 中的 class =“ sp ”标签 (父集,子集)

|       }                |

-————————-

调用   <div class = "d2" >

<span class = "sp">   </span>

</div>

选择器的优先级

同一类型选择器,内嵌高于外部

不同类型选择器,id 最高(如 外部 id 高于内嵌 class)

内联优先级最高

时间: 2024-11-03 01:18:32

CSS 分类 选择器的相关文章

发布两款JQ小插件(图片查看器 + 分类选择器),开源

图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer(".viewer-item"); 它的实现其实也没啥复杂的原理,唯一觉得可说的地方是图片展开的过程 —— 从小变大动态过程的实现.主要是靠这一段代码实现的: $(this).css({"top": win_h / 2 + sroll_t, "margin-l

js仿百度文库文档上传页面的分类选择器_第二版

仿百度文库文档上传页面的多级联动分类选择器第二版,支持在一个页面同时使用多个分类选择器: 此版本把HTML,CSS,以及图片都封装到"category.js"中,解决因文件路径找不到样式及图片的问题: 源码下载地址:http://download.csdn.net/detail/testcs_dn/7290577 初始状态,一个页面使用两个,可以初始化之前选中的分类: 选择状态: 当选中一个分类后,会触发"onChange"事件,如上图中的"您选择的分类编

Css3之基础-2 Css 基础选择器

一.Css 基础选择器 通用选择器 通用选择器 - 通用选择器,显示为一个星号(*) - 可以与任何元素匹配 - 常用于设置一些默认样式,比如设置整个文档的文本的默认字体和大小 元素选择器 - html文档的元素就是选择器 - 比如<p>.<h1>等 类选择器 - 语法为: .className {color:read;} - 类名称不能以数字开头 - 所有能够附带class属性的元素都可以使用此样式声明 - 将元素的class属性的值设置为样式类名 - 可以将多个类选择器应用于同

HTML中CSS相关选择器

1.选择器的分类: 1 h1,h2,h3,h4 { 2 color:red; 3 } 2.派生选择器: 1 li strong{ 2 color:red; 3 } 3.id选择器: 1 1 #red{ 2 color:red; 3 } 4 #green{ 5 color:green; 6 } 8 9 HTML: 10 <p id="red">I am red</p> 11 <p id="green">I am green</

CSS初识- 选择器 &amp;背景&amp; 浮动&amp; 盒子模型

CSS初识 CSS:cascading style sheets,css样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTML为基础,提供丰富的功能,如字体.颜色.背景的控制及整体排版等,而且还针对不同的浏览器设置不同的样式. 引入CSS样式(书写位置) 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并用style标签定义,语法就是在 行内式

0009 CSS基础选择器( 标签、类、id、通配符)

typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用基础选择器给页面元素添加样式 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的一组 选择器的作用 ? 找到特定的HTML页面元素 一句话说出他们: ※※※※ CSS选择器干啥的? 选择标签用的, 把我们想要的标签选择出来 必

CSS属性选择器

属性选择器 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="./css/属性选择器.css&qu

CSS系列(7)CSS类选择器Class详解

这一篇文章,以笔记形式写. 1,  CSS 类选择器详解 http://www.w3school.com.cn/css/css_selector_class.asp 知识点: (1)    使用类选择器的前提是给标签添加上类属性,比如<p class="important"></p> (2)    类选择器的语法为:*.important {color:red;},不过一般省略前面的通配符选择器,写成 .important {color:red;},这样就会给所

浅谈css中选择器的优先级

学习web前端,主要学习的课程html5,css,js,ajax等一些基本的编程语言,当然这是一门高深的学问.而这篇文章主要是谈谈我对css中选择器优先级的一些简单的理解与看法,希望对您的学习提供一些帮助.好了,废话不多说了,让我们开始进入主题吧. css中文解释是“层叠式样式表”,在这里我要说一下,所谓层叠样式表的意思就是说我们可以给一个标签或者文本内容同时添加许多种样式,简单点说就是可以通过多种方式去支配同一个东西.那么就会出现这样的问题了——选择优先级的问题.就是谁的属性能起到控制的最终目