css 层叠样式表

尼克-狐尼克

于 2025-07-07 10:25:06 发布

阅读量957

点赞数 24

CC 4.0 BY-SA版权

文章标签： css tensorflow 前端

本文链接：https://blog.csdn.net/sr20020305/article/details/149167372

层叠样式表用于美化页面和页面布局

CSS的特点：

CSS将样式的定义与HTML文件结构分离。
对于由几百个网页组成的大型网站来说，要使所有的网页样式风格统一，可以定义一个CSS样式表文件，这样几百个网页都调用这个样式表文件即如果要修改网页的样式，只需修改CSS样式表文件就可以。
css并不是编程语言，单独的css是没有效果的，必须结合HTML才能生效，作用就是为网页中的页面元素定义样式，美化网页，并且能够实现页面结构与样式定义分离，提高网站开发效率。

在html文档中引入css样式，主要提供了3中引入方式

行内样式 优先级最高

实例

<h3 style="color: rgb(122, 8, 216); text-align: center;" >嗨皮</h3>

嵌入式

实例

<head>
    <style>
        css样式设置
    </style>
</head>

外部样式

实例

<head>
    <link rel="stylesheet" href="xxx.css">
</head>

css基本属性

font-family 设置字体
font-size 设置字号
font-weight 设置字体的粗细 normal 正常不加粗 bold加粗
font-style 设置字体的倾斜 normal默认 italic 斜体 oblique 倾斜
@font-face 设置服务器端字体，font-family 设置新字体名字 src:url(font/xxxx.TTF) 去这个文件下载
text-decoration 设置文本是否添加下画线、删除线等 none没有装饰可以设置a标签取消下划线 underline下划线 overline 上划线 line-through 删除线
color 设置文本颜色
text-align 设置文本的水平对齐方式 center居中 left左 right右 justify两端
text-indent 设置段落的首行缩进
line-height 设置行高
text-shadow 设置文字的阴影效果，是CSS 3新增属性设第一个左右第二个上下 ·· 第三个模糊第四个颜色
text-overflow 设置元素内溢出文本的处理方法， ellipsis 溢出部分用省略号标记
white-space 值 nowrap 强制文本不换行
overflow hidden 隐藏

css中有很多选择器

标签选择器

直接使用标签作为选择器

优点快速统一相同标签样式

缺点不能精准的选择单独一个标签进行修改

id选择器

id选择器用于为某个元素定义单独的样式。id选择器以#名称进行设置

id选择器名称是唯一的不能重复

类选择器

类标签选择器指定的样式可以被网页上的多标记元素选用。类选择器以 .名称进行设置

在标签中设置 class=“” 进行命名 class的值是可以重复的

通配符选择器

一般用于对所有标签进行基础设置一般用于清除边距优先级最低

用 * 进行设置

优先级从高到低

id选择器 class选择器标签选择器通配符选择器

以上都是基础选择器

以下是复合选择器

交集选择器

例 h1.red {} 既有标签又有类选择器

优先级比标签和类选择器高但比id选择器低

并集选择器

让不同的选择器用相同的样式

写法例 div,p,h1 {}

后代选择器

例 div p {} 只有在div里的p标签才能管用

div盒子

div是一个块级标签

它的宽度和高度由内容+内边距+边框组成

设置的width和height 是内容的宽度和高度

如果不设置div的宽度那么它的宽度就是浏览器的宽度

不设置高度就是内容的高度

div的属性

宽 width

高 height

外边距 margin

内边距 padding

边框 border 语法格式 border：边框大小样式颜色

边框样式的种类

solid 单实线

dashed 虚线

dotted 点线

double 双实线

none 没有边框

每条边框单独的设置

border-top 上边框

border-right 右边框

border-bottom 下边框

border-left 左边框

border-radius 圆角

阴影 box-shadow : 10px 10 px 10px red；第一个参数是横向移动第二个参数纵移动第三个参数阴影大小第四个阴影颜色

box-sizing: border-box 的作用

当你设置 box-sizing: border-box; 后，元素的宽度和高度计算方式会发生变化：

总宽度 = 指定的 width 值
内容区宽度 = 指定的 width - padding - border

高级特性

层叠性：一个标签可能受多个选择器的叠加修改

继承性：子标签可能会继承父级标签的一些属性如颜色字体设置等像边框边距这些子标签就无法继承

优先级：行内样式>内部样式>外部样式 id>类>标签>通配符

网页背景设置

基础属性
- background: 背景颜色图片平铺与否滚动位置
- background-color:颜色设置背景颜色
- background-image：url() 设置背景图片
- background-repeat: 背景图片平铺
  - no-repeat 不平铺
  - repeat 平铺
  - repeat-x 横向平铺
  - repeat-y 垂直平铺
  - space 留白均匀分配
  - round 自适应拉伸填充
- background-position: 位置
  - 可以用top 也可以用百分比
  - 更细致 top 10px 在最上面10px的位置
- opacity:0.5
  - 透明度整体背景和文字
- background-attachment 滚动
  - scroll 默认相对于所在元素固定
  - fixed 相对于浏览器窗口固定
  - local 相对于元素内容固定
- background-size 图片大小
  - 长度 10px 不能为负数
  - 百分比不能为负数
  - auto 默认图片正常大小
  - cover 覆盖容器图像可能会超出容器
  - contain 使图片始终在容器中最大显示但会有留白
- background：linear-gradient 颜色渐变
  - 参数 1 渐变角度 n deg 2颜色 3颜色 .....
- 背景混合模式
  - 伪透明度
    
    background-color: rgba(255, 255, 255, 0.7); background-blend-mode: lighten;
元素类型

块元素

块元素在页面中以区域块的形式出现，特点是每个块元素通常会占据一整行或多行

可以对其设置宽度高度对齐方式等属性 h1-h6 div p ui oi li

float 浮动属性

元素的浮动式指设置了浮动属性的元素会脱离标准流的控制，移动到指定位置

通过 float 浮动来使块元素不独占一行

clear: both; 取消浮动效果

行内元素

不独占一行不能设置宽度和高度和对齐方式的仅靠自身的文字大小和图像尺寸来支撑结构

display:block; 转化为块元素

strong b em i a span 标签等

span与div 是作为容器标记可以容纳各种html元素

区别

div 块元素容纳的元素会自动换行

span 行内元素不自动换行

行级块

img 能设置宽高对齐但不独占一行