CSS笔记

最新推荐文章于 2024-10-12 17:55:45 发布

FanDoKey

最新推荐文章于 2024-10-12 17:55:45 发布

阅读量511

点赞数

文章标签： java 编程语言类 css 前端

本文链接：https://blog.csdn.net/qq_45859377/article/details/123310140

版权

本文详细介绍了CSS是什么，包括其表现和内容相分离的优势，提高页面浏览速度和便于维护的特点。接着，讨论了内嵌、内部和外部样式表的应用。深入探讨了CSS的语法、class与id的区别，以及布局定位的三大方法：普通流、浮动和绝对定位。通过实例解释了浮动定位的工作原理和绝对定位的相对与固定定位。最后，提到了多重样式表的叠加规则。

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

一、CSS是什么？

CSS (Cascading Style Sheet,层叠样式表单) ,用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

二、CSS的优势

1.表现和内容相分离

将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。

2.提高页面浏览速度

对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。

3.易于维护和改版

只要简单的修改几个CSS文件就可以重新设计整个网站的页面

三、应用样式表

1.内嵌样式表

内嵌定义：利用标签的style属性来指定各种CSS样式表属性。如：

<h1  style="color:white;background-color:blue“>This is a line of Text.</h1>

内嵌样式表，每一页的样式都独立，不能通过修改某个样式代码来完成整个网站中多个页面的样式修改，甚至同一页面中的相同元素，也不能共用同一样的代码。完全将表现和内容混合在一起。

2.内部样式表

内部样式表：利用style标签来包含本页面所需样式定义。即在对象的标记内，使用对象的style属性定义适用其的样式表属性。在HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>…</STYLE>块对象。如

<style type="text/css">
   body {
             color: red;
              background: green;
             margin: 0;
              padding: 0;
  } 
  h1 {
		font: 15pt/17pt "Arial";
		 font-weight: bold; 
		color: maroon
		}
</style>

内部样式表，可以通过修改某个样式代码来完成一个页面的样式修改。虽然还是将表现和内容混合在一起，单独放在一起。

3.外部样式表

链入外部样式表文件 (Linking to a Style Sheet)，可以先建立外部样式表文件（.css）。
1)链接式

<link  rel="stylesheet"  type="text/css" href="mystyle.css" />

2)导入式

<style type="text/css">
	@import "mystyle.css";
</style>

三、CSS语法

CSS的定义是由三个部分构成:
选择符(selector)
属性(properties)
属性的取值(value)
语法:
selector {property1: value； property2: value；}
在这里插入图片描述

1.基本选择器

在这里插入图片描述

2.多元素的组合选择器

在这里插入图片描述

3.属性选择器

在这里插入图片描述

四、class 和id 的区别

W3C对于id与class的设定原则：
id 具有唯一性
class 具有普遍性
使用原则也是依据这一特性建立。id是不能重复，所以在 XHTML的结构中，大结构一定是用id。比如标志、导航、主体内容、版权。个性制定的规范命名为#logo , #nav , #content , #copyright

五、CSS布局与定位

在使用CSS排版的页面中，<div>与<span>是两个常用标记。利用这两个标记，加上CSS对其样式的控制，可以很方便的实现各种效果。
<div>（divsion）简单而言是一个区块容器标记，即<div></div>之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。
因此，可以把<div></div>中的内容视为一个独立的对象，用于CSS的控制。声明时只需要对<div>进行相应的控制，其中的各标记元素都会因此而改变。
用div盒模型结构给各部分内容划分到不同的区块，然后用css来定义盒模型的位置、大小、边框、内外边距、排列方式等
div 用于搭建网站结构（框架）、css 用于创建网站表现（样式/美化），实质即使用XHTML对网站进行标准化重构，使用CSS将表现与内容分离，便于网站维护，简化html页面代码，可以获得一个较优秀的网站结构便于日后维护、协同工作和搜索引擎蜘蛛抓取。

1.盒属性

所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间，一个页面由很多这样的盒子组成，这些盒子之间会互相影响。
方框属性
在这里插入图片描述

2.行内元素和块元素

行内元素（inline element）
特点是只占内容的宽度，默认不会换行，行内元素一般放文本或者其它的行内元素。常见内联元素<span><a>
块元素(block element)
特点不管内容有多少，它要换行，同时沾满整行，块元素可以放文本，行内元素，块元素。常见块元素：<div>，<p>。
区别：
行内元素只占内容的宽度，块元素内容不管内容多少要占全行。
行内元素只能容纳文本和其它行内元素，块元素可以容纳文本，行内元素和块元素。（与浏览器类版本和类型有关）

3.CSS 定位

CSS 定位 (Positioning) 属性允许对元素进行定位
定位的基本思想：它允许定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

3.1 普通流定位

普通流：块级框从上到下一个接一个地排列（不设宽度时，独占一行），框之间的垂直距离是由框的垂直外边距计算出来，行内元素会按顺序依次前后排列。
在这里插入图片描述

3.2 浮动定位

CSS Float属性
float：设置元素浮动到页面的边缘。取值如下：
none：缺省值，不浮动
left:元素在页面左边缘浮动,让出自己右边空间，给下一个元素显示；
right:元素在页面右边缘浮动,直到碰到他的父元素的右边界。

浮动目的：就是可以让多个块级元素一行内显示，从而实现布局效果。
浮动种类：左浮动和右浮动。

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
在这里插入图片描述
当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
在这里插入图片描述
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

在这里插入图片描述

3.3 绝对定位

position 属性
通过使用 position 属性，可以选择 4 种不同类型的定位
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
相对定位
例:如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。