一.CSS概述

最新推荐文章于 2024-04-18 10:49:41 发布

zhoukaimagou

最新推荐文章于 2024-04-18 10:49:41 发布

阅读量82

点赞数

本文链接：https://blog.csdn.net/zhoukaimagou/article/details/118069654

版权

一.CSS概述

1.CSS：层叠样式表（Cascading Style Sheets）用于渲染HTML元素标签的样式，美化网页的一门技术。

使用CSS设置样式，可以让展示数据的HTML代码和设置样式的CSS代码进行分离，可以增强网页的展示能力

2.CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

CSS-syntax

选择器通常是需要改变样式的 HTML 元素。

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

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

二.在HTML里引入CSS

1.通过内联样式 (style属性)

第一种方式是通过标签上的style属性为当前元素设置CSS样式

如果CSS样式属性非常多，就会造成页面结构的混乱，而且代码得不到复用，因此这种方式不推荐大量使用。

!--
 
    1.通过标签上的style属性给div设置样式
 
    边框 1px solid red
 
    字体大小 40px
 
    背景颜色为 pink
 
-->
 
<div style="border:1px solid red;font-size:40px;background:pink">
 
    这是一个div...
 
</div>

2.通过内部样式表 (sytle标签)

第二种方式是通过head标签内部的style标签，书写CSS代码来引入CSS样式。

3.通过外部样式表 (link链接)

当CSS代码特别多的时候，可以将CSS代码统一写在一个独立的文件中，文件的后缀名为.css，在HTML文件中引入CSS文件即可

4.多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

5.多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

三.盒子模型

所谓盒子模型，在HTML里，所有页面元素都可以看成一个一个的框（盒子），这些元素与元素之间的距离，元素的边框，元素与元素之间的距离都会影响元素的位置和元素本身的宽和高。

box

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

四.常用CSS

1.Position（定位）

position 属性指定了元素的定位类型。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

position 属性的五个值：

static：默认值，没定位。
fixed：相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
relative：相对定位元素的定位是相对其正常位置。
absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么他的位置相对于
sticky:粘性定位，依赖于用户的滚动，在绝对与相对之间切换

2.链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */