XHTML+CSS基础知识(四):用CSS控制页面

1.CSS写入页面的方法有哪些?

行内式:直接在标签当中利用style属性来写样式表。

内嵌式:将所有的样式表提取出来放到网页头部的style标签当中。

链接式:将样式表单独写成一个.css文件,利用link标签在网页头部引用,W3C标准推荐。

导入式:利用@import来引入样式表,由于效率等等问题已经被淘汰

2.CSS样式表的优先级?

理论上:行内样式>内嵌样式>链接样式>导入样式

实际上:就近原则,内嵌、链接、导入在同一个文件的头部,谁距离相应的代码近,谁的优先级别就更高一些。相当于在后面加载的样式表会覆盖掉在前面写的,所以距离更近的会起作用。

3.CSS当中常用的选择器有哪些?

标签选择器(div、p……)

ID选择器(#)

类选择器(.)

通用选择器(*)

伪类选择器(:link、:visited、:hover、:active)

其中IE6不支持除了a标签以外,并不支持其他标签的伪类,如果不考虑兼容的话可以使用。

4.选择器的优先级别是什么?

ID>类>标签>通用

5.样式的层叠和特殊性

即使是在不太复杂的样式表当中,要寻找同一元素也可能由两个或者更多规则。CSS通过一个称作层叠的过程处理这种冲突。

层叠给每个规则分配一个重要度,层叠采用以下重要度次序。

标有!important的用户样式>标有!important的作者样式>作者样式>用户样式>浏览器/用户代理应用的样式

然后,根据选择器的特殊性决定规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后来定义的规则优先。

为了计算规则的特殊性,给每种选择器都分配一个数字值,并分为a,b,c,d四个等级,将对应等级上的数值分别放置在千位,百位,十位,个位,数值越大越特殊,也就表示其优先级越高。

如果样式是行内样式,那么a=1;b等于ID选择器的总数;c等于类、伪类和属性选择器的数量;d等于类型选择器和为元素选择器的数量。

例如:#content .datePosted{},它的特殊性为0,1,1,0,换算为110

   #wraper #content{},它的特殊性为0,2,0,0,换算为200

那么上面的例子当中,后者的特殊性就高于前者,因而其样式表当中的规定就会起作用。

6.CSS中常见的命名方法

骆驼命名法:第一个字母小写,后面的词的第一个字母大写,比如:headerBlock

帕斯卡命名法:第一个字母大写,后面的词的第一个字母大写,比如:HeaderBlock

匈牙利命名法:在名称的前面加上一个或多个小写字母作为前缀,比如:header_Block

CSS中的命名规则

CSS中需要尽可能的进行语义化命名

头:head/header

内容:content/container

尾:foot/footer

导航:nav/navigation

侧栏:sidebar

7.CSS中样式的缩写

十六进制颜色格式"#RRGGBB",在CSS代码中可以缩写为"#RGB"

正确缩写#aabbcc=#abc,另外#abcabc!=#abc

内外边距的格式一样,现在以内边距为例,一般情况下,若要定义某盒子模型的四个内边距数值,代码如下:padding-top:10px;padding-right:20px;padding-bottom:30px;padding-left:40px;

这种写法如果大量使用,会使得代码变得冗余,现在才去下面写法以缩写代码,四个方向的内边距数值,以“上右下左”为顺序书写:padding:10px 20px 30px 40px;

如果四个方向的内边距数值相同,就可以缩写为一个数值:padding:10px 10px 10px 10px;=padding:10px;

如果四个方向的内边距,方向相对的内边距数值一样,那么就可以只写上面和右面的数值:padding:10px 20px 10px 20px;=padding:10px 20px;

如果左侧的内边距数值和右侧的内边距数值相同,那么只写上、右、下三个数值即可:padding:10px 20px 30px 20px;=padding 10px 20px 30px;

内外边距如果缺省某一项,会自动补充为其对应的那一边的距离,即如果写了上边距而缺失了下边距,则下边距与上边距数值相同,如果写了右边距而缺失了左边距,则左边距与右边距数值相同,通常要根据这个规则来缩写代码。

边框的缩写格式为:border:宽度 颜色 类型;冒号后面的三个属性位置可以变换,对于最终效果没有影响,但是建议大家还是按照这种书写顺序,以提高代码的可读性。

如果需要定义盒子不同宽度的边框,可以采用border-width,属性值同样也是四个并且以“上右下左”的顺序排列。

背景的缩写格式为:background:背景图片 背景颜色 平铺类型 水平定位 垂直定位;

举例:background:url(......) #ccc no-repeat 10px 5px;

定义盒子的背景图片为该地址中的图片,背景颜色为#ccc 不平铺且举例盒子左侧的距离为10px、距离上侧为5px。

另外后面的定位也可以用left,center,right,top,middle,bottom来代替。

文本的缩写格式为:font:样式 粗细 字体大小/行距 字体;

举例:font:italic bold 12px/1.5 Verdana,Geneva,sans-serif;

定义盒子内的字体为斜体、加粗、文字大小为12px、1.5倍行高,字体从左到右依次备选。

font后面的所有属性位置是不可调换的,这与边框和北京并不相同。

时间: 2024-12-19 05:41:01

XHTML+CSS基础知识(四):用CSS控制页面的相关文章

CSS基础知识总结之css样式引用的三种方式

在html中增加css样式有三种: 1.在标签中增加style属性: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>天蓝蓝</title> <!--tag标签的图标--> <link rel=&

CSS基础知识梳理

CSS基础知识: 1.CSS层叠样式表(Cascading Style Sheets):解决内容与表现分离的问题. 2. 层叠次序: (1)浏览器缺省设置: (2)外部样式表: (3)内部样式表(位于 <head> 标签内部): (4)内联样式(在 HTML 元素内部): 即,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值). 3.CSS语法:CSS 规则由

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

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

XHTML CSS基础知识

学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局.如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听不懂. 由于时间关系,本教程只讲解一些基础知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教程的目的. 本教程多以实例形式循序渐进讲解,实例涉及到哪些关键点或难点就讲解什么,较少讲解概念.因为概念这些东西很难说明白,或者说明白你也不一定

html和css基础知识

一,html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的:1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等.2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现.3. JavaScript是用来实现网页上的特效效果.如:鼠标滑过弹出下

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

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

java学习篇之---css基础知识(一)

css基础知识(一) 1.css样式: 加载css样式有以下四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css" rel="stylesheet" type="text/css" /> 这种形式是把css单独写到一个css文件内,然后在源代码中以link方式链接.它的好处是不但本页可以调用,其它页面也可以调用,是最常用的一种形式. <style> h2 {

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大

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

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

〖前端开发〗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