CSS第一天笔记

最新推荐文章于 2024-08-07 20:34:45 发布

Hono郭帅

最新推荐文章于 2024-08-07 20:34:45 发布

阅读量559

点赞数

本文链接：https://blog.csdn.net/Honoi/article/details/90380529

版权

这篇博客介绍了CSS的基本概念，包括样式表的作用、类型和优先级。内容涵盖CSS的起源、样式表的层叠规则，以及CSS的外部、内部和内联样式。文章还讨论了CSS的基础语法，如选择器、属性和值，以及如何引入样式到HTML页面。重点讲述了CSS样式的选择器优先级，以及如何使用背景色、背景图像、文本缩进、文本对齐和文本装饰等属性。

摘要由CSDN通过智能技术生成

CSS的学习

1.css的概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

样式解决了一个普遍的问题

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。

由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。

所有的主流浏览器均支持层叠样式表。
样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
CSS 基础语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

selector {declaration1; declaration2; … declarationN }
选择器{属性值1：属性值1；属性2：属性值2…}
选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

css引入页面的三种方式
1)行内样式/内联样式：通过style属性将样式写入在标签内
<div style=“width: 500px; height: 500px; color: peru;border-width: 3px;border-style: solid; border-color: blue; background-color:palevioletred ;”>xxx</div>

	<!--内联标签或者元素；不会占据一行显示，先写的先排列，重点：内联元素设置的宽高不起作用-->
	<!--经典的页面布局，div+css-->

2）内嵌样式：通过style标签写入在head中
在这里插入图片描述
内嵌样式的语法结构

选择器{属性值1：属性值1；属性2：属性值2…}

3）外部样式/外联样式：使用link标签加载css文件到head中
在这里插入图片描述

一般推荐使用第三种样式
重点
三种样式的优先级：
行内样式>内嵌样式>外联样式
css样式

	<!--border-width表示边框的宽度-->
	<!--border-color表示边框的颜色-->
	<!--background-color表示背景的颜色-->
	<!--font-family设置字体-->
	<!--font-size 设置文本字体大小-->
	<!--border-color 设置文本字体颜色-->