当前位置: 开发笔记 > 前端 > 正文

网页样式---CSS

作者：大帅哥石头2011 | 来源：互联网 | 2014-08-10 02:56

一个样式由三部分组成，分别是选择器、属性和属性值。例如:p{font-size:12px;font-family:隶书;}这样页面中使用p标签的元素或范围都应用这个样式。所有样式规则放在标签内。标签一般放在文档头部即，的开始于结束标签之间。选择器分为三类：标签选择器，类选择器，id选择器。类选择器：.className

是个逻辑容器标签，方便控制管理

一个样式由三部分组成，分别是选择器、属性和属性&＃20540;。

例如:p{font-size:12px;font-family:"隶书";}这样页面中使用p标签的元素或范围都应用这个样式。

所有样式规则放在

选择器分为三类：标签选择器，类选择器，id选择器。

标签选择器：例如上述示例的p选择器，标签选择器一旦声明，页面中所有的该标签都会应用该标签的样式

类选择器：.className{属性：属性&＃20540;;}

示例：

静夜思

床前明月光，

疑是地上霜。

举头望明月，

低头思故乡。

id选择器在HTML中只能使用一次。语法：#idName{属性：属性&＃20540;;}

例如：

静夜思

床前明月光，

疑是地上霜。

举头望明月，

低头思故乡。

如果在页面中有某些选择器的风&＃26684;完全相同，或部分相同，那么可以选择集体声明的方式声明

使用CSS控制页面的方法：1、行内样式。2、内嵌样式表。3、外部样式表。

行内样式：直接在HTML标签中使用style属性，将CSS代码直接写在其中。

归园田居

种豆南山下，草盛豆苗稀。

晨兴理荒秽，带月荷锄归。

道狭草木长，夕露沾我衣。

衣沾不足惜，但使愿无违。

内嵌样式表就是将CSS代码写在与之间，并且使用标签之间声明。

外部样式表：将所有的CSS样式放在一个扩展名为CSS的文件里，在将这个CSS文件应用到各个HTML文件中。

两种在HTML中引入CSS文件的方式：

1、链接样式表：

2、导入样式表：

外部样式表示例：

首先看CSS文件

@charset "utf-8";
/* CSS Document */

h1 { font-size:18px; }
p { font-size:12px; }
.red { color:#ff0000; font-size:16px; }
#foot { font-size:20px; color:#0000ff; font-weight:bold; }

然后看应用该样式的HTML

链接外部样式表和导入外部样式表的区别：导入外部样式表在HTML初始化时就会被导入HTML文件内，作为文件的一部分，类&＃20284;内嵌样式表。链接样式表则是在HTML标签需要样式时才以链接的方式导入。

他们之间的主要区别有：

1、加载顺序不同，当一个页面被加载时，使用link标签引用的css会同时被加载，而是用import导入的css会等页面全部被加载完，才会被加载。

2、兼容性的差别。

3、是用DOM控制页面样式的区别，当页面是用Javascript控制DOM改变页面样式时，是用link标签支持，而import不是DOM可控的。

4、link时HTML标签，而import是css提供的方式。

网页样式的优先级：行内样式>内嵌样式表>外部样式表(链接外部样式表>导入外部样式表)。

2、CSS属性

1、字体属性：font-size:字体大小,例如24px指字体大小为24像素。font-family设置字体的类型，例如：宋体。font-style字体风&＃26684;，normal表示正常，Italic表示斜体。font-weight表示字体粗细，bold表示字体加粗。

font-size单位：em(相对长度单位，相对当前对象内文本字体的大小),pt（绝对长度单位，表示点的多少）,px（像素）

font属性一次表示多个属性，他的顺序为：字体样式font-style,字体粗细font-weight，字体大小font-size，字体名称font-family

2、文本属性：color：设置文本颜色、line-height:设置行高、text-align:设置文本的对其方式、text-decoration:向文本添加修饰（添加下划线、上划线、删除线等效果）。

3、列表属性：list-style-type:表示设置列表标志的类型，list-style-image：表示将图像设置为列表项标志，list-style-position：表示设置列表项的位置。

list-style-type取&＃20540;：disc：缺省&＃20540;，圆黑点。circle：空心圆点。square：小黑方块。none：无列表项标志。

list-style-image实行&＃20540;是一个URL，URL后面的括号表示要使用的图片的路径和名称。

list-style-position：表示列表项标记的位置。outside：项目标记在文本以外，环绕文本根据标记对齐。inside：项目标记在文本以内，环绕文本根据标记对齐。

4、浮动属性：float：元素向那个方向浮动（a、none不浮动，默认&＃20540;。b、left向左浮动。c、right向右浮动。）clear：设置元素的哪一侧不允许有浮动元素（取&＃20540;为left、right、both、none）。

5、背景属性：background-color：背景颜色（transparent默认&＃20540;透明色），background-image：背景图像（从元素左上角开始向元素右侧和垂直方向重复，如果不想重复则设置background-repeat属性），background-repeat：背景的重复方式（取&＃20540;为repeat、repeat-x、repeat-y、no-repeat），background-position：背景图像的起始位置。

6、盒子模型:常用属性：border:边框，padding：填充，margin：边界，content：内容。

border有三个属性：color：颜色，width：宽度（可以用thin、thick、medium表示也可以用数&＃20540;表示。），style：样式（none表示无边框，dotted表示点状边框，dashed表示虚线边框，solid表示实线边框，double表示双线边框）。border可以在一个声明中设置所有的边框属性，顺序依次为width、style、color。

7、定位属性：position：表示指定元素的位置，（1、static，默认&＃20540;，表示元素在原本应该在的位置上，没有任何移动效果。2、absolute，绝对定位。3、relative，相对定位。4、fixed，绝对定位。）

z-index属性用于调整定位时重叠块的上下顺序。

8、其他属性，超链接一共有四种状态，a:link表示未访问过的超链接,a:visited已访问过的超链接,a:hover鼠标移到超链接上的状态,a:active表示鼠标选择激活链接，也就是说鼠标按下时的链接。a:hover必须设置在a:link和a:visited之前才有效。a:active必须设置在a:hover之后才有效。

使用CSS控制鼠标主要是通过cursor属性来实现的，该属性可以在任何标签中使用。以下为cursor&＃20540;和对应的鼠标效果。

控制元素的显示和隐藏，使用display属性，该属性有两个&＃20540;：none和block。分别表示隐藏和显示页面元素。

标签与

标签一样是容器类标签。他们之间的区别：

是块级元素，他的前后会换行，是一个行级元素，不会换行。2、标签可以嵌套在

标签中使用，反之不可以。

推荐阅读

js
程序员妻子吐槽：丈夫北漂8年终薪3万，存款情况令人意外

一位程序员的妻子在网上分享了她丈夫在北京工作八年的经历，月薪仅3万元，存款情况却出乎意料。本文探讨了高学历人才在大城市的职场现状及生活压力。 ... [详细]

蜡笔小新 2024-12-28 11:14:15
js
2018回顾与2019展望

本文总结了2018年的关键成就，包括职业变动、购车、考取驾照等重要事件，并分享了读书、工作、家庭和朋友方面的感悟。同时，展望2019年，制定了健康、软实力提升和技术学习的具体目标。 ... [详细]

蜡笔小新 2024-12-28 09:10:26
js
四载相伴，与51CTO学院共成长

在计算机技术的学习道路上，51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域，51CTO学院始终是我信赖的学习平台。 ... [详细]

蜡笔小新 2024-12-28 08:20:07
css
信息安全小组第一周工作总结

本周信息安全小组主要进行了CTF竞赛相关技能的学习，包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外，还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细]

蜡笔小新 2024-12-28 05:52:22
js
技术分享：从动态网站提取站点密钥的解决方案

本文探讨了如何从动态网站中提取站点密钥，特别是针对验证码（reCAPTCHA）的处理方法。通过结合Selenium和requests库，提供了详细的代码示例和优化建议。 ... [详细]

蜡笔小新 2024-12-28 04:11:47
js
CSS 布局：液态三栏混合宽度布局

本文介绍了如何使用 CSS 实现液态的三栏布局，其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性，可以实现灵活且响应式的网页设计。 ... [详细]

蜡笔小新 2024-12-28 02:40:28
js
Linux 系统启动故障排除指南：MBR 和 GRUB 问题

本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案，涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]

蜡笔小新 2024-12-27 20:40:29
js
通过类型和标签选择元素

本文介绍了如何使用jQuery根据元素的类型（如复选框）和标签名（如段落）来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]

蜡笔小新 2024-12-27 19:44:14
js
导航栏样式练习：项目实例解析

本文详细介绍了如何创建一个具有动态效果的导航栏，包括HTML、CSS和JavaScript代码的实现，并附有详细的说明和效果图。 ... [详细]

蜡笔小新 2024-12-27 19:42:28
build
新浪笔试题

1:有如下一段程序：packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]

蜡笔小新 2024-12-27 19:32:17
js
深入理解Tornado模板系统

本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块，支持嵌入Python代码片段，帮助开发者快速构建动态网页。 ... [详细]

蜡笔小新 2024-12-27 19:22:16
js
深入理解Cookie与Session会话管理

本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息，以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制，解释其原理及应用场景。 ... [详细]

蜡笔小新 2024-12-27 18:20:43
js
Xcode 中多行代码缩进技巧

本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进，包括右缩进和左缩进的具体操作方法。 ... [详细]

蜡笔小新 2024-12-27 17:52:34
css
Python爬虫实战：豆瓣电影Top250数据抓取

本文详细介绍了如何使用Python编写爬虫程序，从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制，再到多页数据抓取的全过程，并提供了完整的代码示例。 ... [详细]

蜡笔小新 2024-12-27 16:55:07
js
Linux 自动化安装脚本详解

本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建，还处理了系统服务的配置和启动，确保在多种 Linux 发行版上都能顺利运行。 ... [详细]

蜡笔小新 2024-12-27 16:33:32

大帅哥石头2011

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章