css选择器,样式表导入

css笔记
1.选择器(selecter)共9种
a.类型选择器 p{},body{}
b.后代选择器 p h1{}
c.ID选择 #idname{}
d.类选择 .classname{}
e.通用选择 *{} 页面上所有元素应用样式,利用此可以删除每个元素上默认
浏览器的填充和空白边。可以用来对特定元素的所有后代应用样式,或跳过一级后代
f.伪类选择 a:link{}
g.高级选择器 IE6及更低版本不支持,避免在对于站点功能重要的使用高级选择器。
1.子选择器和相邻同胞选择器
子选择器选择元素的直接后代 #nav>li{}
相邻同胞选择器 h1+p{}
2.属性选择器 elemnent[attribute]选择出具有attribute的elements元素
example1:.intro{border-style:solid;}
[class="intro"]{border-style:dotted;}
example2:a[rel~="friend"]{}
<a href="" rel="friend met colleague">john Hicks</a>
h.层叠和特殊性
(1)层叠给每个规则分配一个重要度(作者对重要,用户其次,浏览器或用户代理最后)
通过!important提高重要度
重要度次序:
1标为!important 的用户样式
2标为!important 的作者样式
3作者样式
4用户样式
5浏览器/用户代理应用的样式
再根据特殊性决定规则次序。
(2)特殊性
特殊性四个成分等级:a、b、c、d
如果样式是行内样式a=1;
b=ID选择器总数
c=类、伪类和属性选择器数量;
d=类型选择器和伪元素选择器的数量;
如:#wrapper.datePosted{} 特殊性:0,1,1,0 以10为基数的值为1110
应用:form{width:20em;} 一般样式
form#search{width:10em;} 特殊样式覆盖

i.继承
子元素继承父元素样式
2.对文档应用样式
外部样式表附着到网页上有两种方法,
a.链接(可链接基本样式表供所有浏览器使用)<link href="css/basic.css" rel="stylesheet" type="text/css">
b.导入(老式浏览器不支持,导入高级复杂样式)<style type="text/css">
<!--
@important url("/css/basic.css");
-->
</style>
3.在样式表中导入样式
@important url(/css/layout.css);
作用:降低(X)HTML文档的复杂性
注意:避免两层以上的导入

时间: 2024-10-07 14:34:58

css选择器,样式表导入的相关文章

[2016-01-16][CSS][定义样式表(样式选择器)]

Class 定义:.classname{ 属性:属性值;} 使用:<p class = "classname"></p> ID 定义: #IDNUM{ 属性:属性值; } 使用:<p id = "IDNUM"></p> 组合选择器 定义:标记1,标记2...标记n{属性:属性值;} 使用:直接正常使用上面存在标记即可 伪选择器 calss的使用 ID的使用 组合选择器h1 h2 h3 伪选择器 1 2 3 4 5 6

CSS重置样式表

一.为什么需要重置样式表 即使不写CSS样式,HTML标签在浏览器中也有样式,这些样式来自浏览器本身.但问题是,不同浏览器默认样式可能不同.CSS重置样式表就是为了解决这个问题. 二.常用的重置样式表 (1)简单暴力型 只有一行: *{margin:0; padding:0;} 通配符"*"匹配了所有的标签,通常认为性能不好. (2)归零型 (几乎)全部将标签样式清零.如YUI(http://yuilibrary.com/)的重置样式表. (3)保留基础样式型 并不是将所有标签的默认样

css 层叠式样式表(2)

一,样式表分类 (1)内联样式. --优先级最高,代码重复使用最差. (当特殊的样式需要应用到单独某个元素时,可以使用. 直接在相关的标签中使用样式属性.样式属性可以包含任何 CSS 属性.) (2)内嵌样式表. --优先级别第二,不常用,代码重用性一般. (当单个文件需要特别样式时可以使用内嵌样式表.在 head 部分通过 <style> 标签定义内部样式表.) (3)外部样式表. --  优先级最低,最常用,代码重用性最高. (当样式需要被应用到很多页面的时候,可以使用.使用外部样式表可以

CSS的样式表基本概念

一.样式表分类 1.内联样式表 <p style="fint-size:24px;">直接在标签内部进行样式设置</style> 2.内嵌样式表 <head> <style type="text/css"> p    /*以p标签命名,一下所有p标签都会执行此样式*/ { 样式} </style> </head> 3.外部样式表(最常用的) 新建一个css文件,需要在html文件中调用css样式

CSS理解样式表层叠

在网页中,添加样式的方法有三种:嵌入式样式表,外部样式表和内联样式表. 优先级算法按照先后顺序考虑一下三个方面: 1.css规则的重要性和来源: 2.css规则的特殊性: 3.css规则在文档中出现的顺序: 一.找到选择器匹配特定元素的所有声明: 二.根据样式声明的重要性和来源进行优先级排序 重要性有两种:带“!important”定义的声明和不带“!important”定义的声明.在CSS规则后添加!important的重要性要高于没有添加的. 来源有三种样式:浏览器默认.开发人员定义的样式.

学习HTML 第三节.接近正题:HTML样式-CSS级联样式表

CSS (Cascading Style Sheets)级联样式表 内联样式 内联样式- 在HTML元素中使用"style" 属性 使用内联样式的方法是在相关的标签中使用样式属性.样式属性可以包含任何 CSS 属性.以下实例显示出如何改变段落的颜色和左外边距 <p style="color:blue;margin-left:20px;">This is a blue paragraph and with 2 blank in the left.</

css重构样式表性能调优

1重构和架构:重构:重构是在不改变代码行为的前提下,重写代码软件架构:优秀的架构可提升代码的复用性需要重构的原因什么情况下应该重构代码?我能重构自己的代码吗?重构的示例.2级联什么是?选择器特指是3编写更优质的css使用注释结构一致的规则表保持选择器的简单分离css和javascript使用类4 为样式分类 样式分类的重要性通用样式基础样式组件样式5 测试需要测试的重点的浏览器第三方测试工具维护你的代码6 代码的组织和重构策略按照样式从最小最不精确到最精确组织CSS重构 原文地址:http://

css 层叠式样式表(1)

实用css有三种格式:内嵌:内联:外部: 分类:内联:写在标记的属性位置,优先级最高,重用性最差内嵌:写在页面的head中,优先级第二,重用性一般外部:写在一个以css结尾的文件中,通过引用来建立文件与html页面的关系,优先级最低,但是最灵活最好用,重用性最好. 经常用的就是内联和外部.外部的话需要引用. 选择器: id选择器:#id,优先级最高,只能选中一个元素class选择器:.class,优先级第二,能选中一堆元素标签选择器:标签名 div span ,优先级最低,能选中一堆元素,不建议

css 层叠式样式表

内联样式:样式优先级最高的 <div style="width:100px;height:100px;"></div> style=“” 用冒号和分号 width 宽度 height 高度 background-color  背景颜色 float:left; 多个div横向排列 流式布局 <div style="width:100px;height:100px;float:left;margin:5px;"></div>