CSS基础知识梳理

CSS基础知识:

1.CSS层叠样式表(Cascading Style Sheets):解决内容与表现分离的问题。

2. 层叠次序:

(1)浏览器缺省设置;

(2)外部样式表;

(3)内部样式表(位于 <head> 标签内部);

(4)内联样式(在 HTML 元素内部);

即,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

3.CSS语法:CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。语法格式如下:

                          selector {property: value}

例:

ps:CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

4.选择器的分组:用逗号将需要分组的选择器分开。例:

5. 继承及其问题:按照CSS规则,子元素从父元素继承属性。

(1)但是部分浏览器可能不支持,如Netscape4。我们可以通过冗余法则处理该问题,即在子元素中也定义相同的属性;例:

(2)同时,也可以通过在子元素重定义属性,脱离父元素的继承属性。例:

6.CSS派生选择器:

#派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。

例:

7.id选择器:

(1)id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,以 "#" 来定义。例:

(2)id选择器与派生选择器:在现代布局中,id 选择器常常用于建立派生选择器。用法:

<1>下面的样式只会应用于出现在 id 是 box 的元素内的段落

<2>一个选择器,多种用法。例:

(3)作为单独的选择器:例:

ps:根据这条规则,id 为box 的元素将拥有一个像素宽的黑色实线边框,老版本的 Windows/IE 浏览器可能会忽略这条规则,除非你特别地定义这个选择器所属的元素,即:

8.类选择器:

(1)在 CSS 中,类选择器以一个点号显示:例:

Ps:类名的第一个字符不能使用数字!无法在 Mozilla 或 Firefox 中起作用。

(2)class可以被用作派生选择器:用法如下:

<1>类名为 tab1的更大的元素内部的表格单元格都会以橙黄色背景显示;例:

<2>类名为tab1的表格单元格将是带有橙黄色背景的;例:

9.CSS属性选择器:对带有指定属性的 HTML 元素设置样式。


选择器


描述


[attribute]


用于选取带有指定属性的元素。


[attribute=value]


用于选取带有指定属性和值的元素。


[attribute~=value]


用于选取属性值中包含指定词汇的元素。


[attribute|=value]


用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。


[attribute^=value]


匹配属性值以指定值开头的每个元素。


[attribute$=value]


匹配属性值以指定值结尾的每个元素。


[attribute*=value]


匹配属性值中包含指定值的每个元素。

10.插入CSS的方式:

(1)外部样式表:

(2)内部样式表:

(3)内联样式:

Ps: 不要在属性值与单位之间留有空格。

时间: 2024-08-03 08:14:02

CSS基础知识梳理的相关文章

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

CSS基础知识---浮动,定位和盒模型

转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域.添加边框会在内边距的区域外边加一条线.在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔. 内边距,边框,和外边距是可选的,默认值为零.但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的m

〖前端开发〗HTML/CSS基础知识学习笔记

经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head

[SQL] SQL 基础知识梳理(一)- 数据库与 SQL

SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 序 目录 What's 数据库 数据库结构 SQL 概要 创建表 删除和更新表 1-1 What's 数据库 1.数据库(Database,DB):将大量数据保存起来,通过计算机加工而成的可以进行高效访问的数据集合.如:大型-银行存储的信息,小型-电话簿. 2.数据库管理系统(Batabase Management Syste

JavaScript基础知识梳理--数组

JavaScript基础知识梳理--数组 1.创建方法 空数组:var obj=new Array(); 指定长度数组: var obj=new Array( size ); 指定元素数组 :  var obj=new Array( 元素1,元素2,....): 单位数组:var obj=new Array[ 元素1,元素2,元素3,...,元素N]; 多维数组:var a=new Array( [数组1],[数组2],[数组3],...,[数组N] ); 2.基本操作 存取数组元素: 单维数组

Java基础知识梳理《一》

一.Java数据类型(简单称之为“四类八种”) java 基本的数据类型长度都是固定的,好处是在实现跨平台时就统一了. 1.整型 byte short int long (分别是1,2,4,8个字节) 类型 存储需求 位数 取值范围 byte 1字节 8位 -128~127 short 2字节 16位 -2^15 ~2^15-1 int 4字节 32位 -2^31~2^31-1 long 8字节 64位 -2^63~2^63-1 当超出int表示范围时,应该使用long型,添加后缀一大写的L 注

[SQL] SQL 基础知识梳理(四) - 数据更新

SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 目录 一.插入数据 1.INSERT 语句的基本语法 --语法: --INSERT INTO <表名>(列1, 列2, ...) VALUES (值1, 值2, ...) INSERT INTO dbo.Shohin ( shohin_id , shohin_mei , shohin_bunrui , hanbai_tanka , s

(转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)

欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局.如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听不懂. 由于时间关系,本教程只讲解一些基础知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教

[SQL] SQL 基础知识梳理(三)- 聚合和排序

SQL 基础知识梳理(三)- 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 目录 一.对表进行聚合查询 1.聚合函数 (1)5 个常用函数: ①COUNT:计算表中的记录(行)数. ②SUM:计算表中数值列的数据合计值. ③AVG:计算表中数值列的数据平均值. ④MAX:求出表中任意列中数据的最大值. ⑤MIN:求出表中任意列中数据的最小值. (2)聚合:将多行汇总成一行. 图1-1 Shohin 表 2.计算