css 层叠式样式表(2)

一,样式表分类

(1)内联样式。 --优先级最高,代码重复使用最差。

(当特殊的样式需要应用到单独某个元素时,可以使用。 直接在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。)

(2)内嵌样式表。 --优先级别第二,不常用,代码重用性一般。

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

(3)外部样式表。 --  优先级最低,最常用,代码重用性最高。

(当样式需要被应用到很多页面的时候,可以使用。使用外部样式表可以关联多个元素或者文件。)

1、先创建一个样式表

2、写入样式表内容,调整样式表位置

二。选择器

每一条css样式定义由两部分组成,形式如下:

选择器

{

属性

}

在{}之前的部分就是“选择器”。

“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

选择器是选择器,外部样式表只是代码位置

(1)类别选择器( class选择器)

前面以"." 来标志,如:

.d1

{

color:red;

}

在HTML页中:

<div class="d1";>文字</div>    文字颜色为红色

<p class="d1";>文字</p>      文字颜色为红色

定义了一个class类,将样式应用到了元素中。

(2)id选择器  优先级最高

前面以"#"来标志,如:

#d2

{

color:blue;

}

在HTML页中:

<div class="d1" id="d2">文字</div>     文字颜色变为蓝色     id选择器优先级高于类别选择器

(3)标签选择器(根据标签名选择)如果同时出现类别选择器和id选择器,按照优先级来及执行。最不常用

前面以"标签名"来标志,如:

div

{

color:red;

}

在HTML页中:

<div>文字<div>      文字颜色变为红色

(4)复合选择器 。有id第一优先级/都是类别选择器第二优先级。最常用

[1]群组选择器

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

.d1,#d2

{

color:red;

}

在HTML页中:

<div class="d1";>文字</div>    文字颜色为红色

<p id="d2";>文字</p>      文字颜色为红色

使用群组选择器,将会大大的简化CSS代码,将具有多个相同属性的元素,合并群组进行选择,定义同样的CSS属性,这大大的提高了编码效率,同时也减少了CSS文件的体积。

[2]后代选择器

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

.d1 #d2

{

color:blue;

}

在HTML页中:

<div class="d1" id="d2">文字</div>     文字颜色变为蓝色

后代选择器是一种很有用的选择器,使用后代选择器可以更加精确的定位元素。

时间: 2024-12-28 00:14:56

css 层叠式样式表(2)的相关文章

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>

css 层叠式样式表(3)

样式分类 大小 -- 调整div大小,长 width,高 height.长可以直接100%横向沾满屏幕,高不可以. 背景 background-color  背景色 background-image  背景图片  后面接url() 括号里填图片位置 background-repeat  背景图片的平铺方式  :no repeat  让图片只显示一次, background-position  背景图片的位置   center 居中 background-size  背景图片的大小  设置图片的长

[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的样式表基本概念

一.样式表分类 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://