![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 62
CSS(层叠样式表):用来表现HTML或XML等文件样式的计算机语言,CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。假如以网页作为人体结构分析,CSS相当于人体皮肤。
风之舞_yjf
简单快乐的生活
展开
-
css基础(26)_表格的样式
表格的样式原创 2022-07-13 20:42:00 · 734 阅读 · 0 评论 -
CSS基础(25)_线性渐变、径向渐变
线性渐变、径向渐变原创 2022-06-20 21:15:17 · 322 阅读 · 0 评论 -
CSS基础(24)_Sprite技术(CSS雪精灵、CSS雪碧图)
Sprite技术、CSS雪精灵、CSS雪碧图原创 2022-06-19 19:57:26 · 723 阅读 · 0 评论 -
CSS基础(23)_背景
背景原创 2022-05-17 22:22:04 · 129 阅读 · 0 评论 -
CSS基础(22)_行高、文字简写属性、文本样式
行高、文字简写属性、文本样式原创 2022-04-22 22:41:48 · 1448 阅读 · 0 评论 -
CSS基础(21)_字体样式、图标字体
字体样式、图标字体原创 2022-04-19 18:41:21 · 871 阅读 · 0 评论 -
CSS基础(20)_元素的层级
元素的层级原创 2022-04-17 11:43:02 · 791 阅读 · 0 评论 -
CSS基础(19)_绝对定位元素的水平或垂直布局
绝对定位元素的水平或垂直布局原创 2022-04-12 18:27:28 · 960 阅读 · 1 评论 -
CSS基础(18)_相对定位、绝对定位、固定定位、粘滞定位
CSS各种定位介绍原创 2022-04-08 20:49:08 · 898 阅读 · 0 评论 -
CSS基础(17)_使用clear/伪类after/类clearfix处理高度坍塌
高度坍塌处理二原创 2022-04-08 12:04:04 · 333 阅读 · 0 评论 -
CSS基础(16)_布局中高度坍塌问题的解决方式
高度坍塌原创 2022-04-07 11:29:20 · 235 阅读 · 0 评论 -
CSS基础(15)_浮动
浮动原创 2022-04-03 12:53:50 · 994 阅读 · 0 评论 -
CSS基础(14)_盒子大小、轮廓、阴影、圆角的设置
盒子大小、轮廓、阴影、圆角设置原创 2022-04-02 14:22:18 · 1853 阅读 · 0 评论 -
CSS基础(13)_浏览器的默认样式
浏览器的默认样式原创 2022-03-28 17:41:34 · 359 阅读 · 0 评论 -
CSS基础(12)_行内元素的盒模型、元素显示类型/状态设置
行内元素的盒模型、元素显示类型/状态设置行内元素的盒模型特点:1、行内元素不支持设置宽度和高度。2、行内元素可以设置padding,border,margin,但是垂直方向的padding、border、margin不会影响页面的布局。元素显示类型设置display: 用来设置元素显示的类型。可选值:inline:将元素设置为行内元素block::将元素设置为块元素inline-block:将元素设置为行内块元素(行内块元素既可以设置宽度和高度,又不会独占一行)table:将元素设置为一原创 2021-09-20 22:11:59 · 298 阅读 · 0 评论 -
CSS基础(11)_盒子模型之垂直方向的布局、外边距重叠
垂直方向的布局默认情况下父元素的高度被内容撑开。子元素是在父元素的内容区排列的,如果子元素的大小超过了父元素,则子元素会从父元素中溢出,使用overflow属性来设置父元素来处理溢出的子元素:overflow:auto 两个方向都处理overflow-x:单独处理水平方向的overflow-y:单独处理垂直方向的可选值:visible:默认值 子元素会从父元素中溢出,在父元素外部的位置显示hidden:溢出内容将会被裁减不会显示scroll:生成两个滚动条,通过滚动条来查看完整的内容aut原创 2021-09-20 01:10:49 · 495 阅读 · 0 评论 -
CSS基础(10)_盒子模型之水平方向布局
盒子模型之水平方向布局元素的水平方向的布局:元素在其父元素中水平方向的位置由以下几个属性共同决定:margin-leftborder-leftpadding-leftwidth(默认值为auto)padding-rightborder-rightmargin-right一个元素在其父元素中,水平布局必须要满足以下的等式:margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父原创 2021-09-11 23:24:47 · 336 阅读 · 0 评论 -
CSS基础(9)_盒子模型之内边距、外边距
盒子模型之内边距、外边距内边距(padding)内容区和边框之间的距离是内边距,内边距一共有四个方向:padding-toppadding-rightpadding-bottompadding-left简写属性:padding是内边距的简写属性,可以同时指定四个方向的内边距,规则和border-width一样。特点:1、内边距的设置会影响到盒子的大小。2、背景颜色会延伸到内边距上。总结: 一个盒子的可见框的大小,由内容区、内边距和边框共同决定。所以在计算盒子大小时,需要将这三个区域加原创 2021-09-09 21:57:25 · 1763 阅读 · 0 评论 -
CSS基础(8)_盒子模型之内容区、边框
内容区内容区(content):元素中的所有的子元素和文本内容都在内容区中排列,内容区的大小由width和height两个属性来设置:width:设置内容区的宽度height:设置内容区的高度边框边框(border):边框属于盒子边框,边框里边属于盒子内部,出了边框都是盒子的外部,边框的大小会影响到整个盒子的大小,要设置边框,需要至少三个样式:边框的宽度 border-width边框的颜色 border-color边框的样式 border-styleborder-width1、默认值,一原创 2021-09-03 16:03:34 · 697 阅读 · 0 评论 -
CSS基础(7)_文档流、盒子模型简介
文档流(normal flow)网页是一个多层的结构,一层摞者一层,通过CSS可以分别为每一层来设置样式,作为用户来讲只能看到最顶上一层。在这些层中,最底下的一层称为文档流,文档流是网页的基础,我们所创建的元素默认都是在文档流中进行排列。对于我们来说元素主要有两个状态:在文档流中不在文档流中(脱离文档流)元素在文档流中有什么特点:块元素1、块元素会在页面中独占一行(自上向下垂直排列)2、默认宽度是父元素的全部(会把父元素撑满)3、默认高度是被内容撑开(子元素)行内元素1、行内元素不会独原创 2021-09-02 21:04:44 · 98 阅读 · 0 评论 -
CSS基础(6)_长度单位、颜色单位
长度单位像素1、屏幕(显示器)实际上是由一个一个的小点点构成的2、不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰3、同样的200px在不同设备下显示效果不一样百分比1、也可以将属性值设置为相对于其父元素属性的百分比2、设置百分比可以使子元素跟随父元素的改变而改变em1、em是相对于自身的元素的字体大小来计算:1em = 1font-size2、em会根据字体大小的改变而改变remrem是相对于根元素(html元素)的字体大小来计算颜色单位1、在CSS中可以直接使用颜色原创 2021-08-28 22:50:07 · 334 阅读 · 0 评论 -
CSS基础(5)_继承、选择器的权重
继承继承概念继承:样式的继承,我们为一个元素设置的样式同时也会应用到它的后代元素上。继承是发生在祖先和后代之间的。继承目的继承的设计是为了方便我们的开发,利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上,这样只需设置一次即可让所有的元素都具有该样式。注意:并不是所有的样式都会被继承:比如 背景相关的,布局相关等的这些样式都不会被继承。` 继承 我是一个p元素 我是p元素中的span 我是p元素外的span原创 2021-08-28 16:20:48 · 206 阅读 · 0 评论 -
CSS基础(4)_超链接的伪类、伪元素
超链接的伪类只能适用于设置超链接a:link 用来表示没访问过的链接(正常的链接):visited 用来表示访问过的链接(由于隐私的原因,所以visited这个伪类只能修改链接的颜色)适用所有元素:hover 用来表示鼠标移入的状态:active 用来表示鼠标点击<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>超链接的伪原创 2021-07-05 22:43:58 · 791 阅读 · 0 评论 -
CSS基础(3)_伪类选择器
伪类选择器伪类(不存在的类,特殊的类)作用:伪类用来描述一个元素的特殊状态(比如第一个元素、被点击的元素、鼠标移入的元素...)伪类一般情况下都是使用:开头:first-child 选中第一个子元素:last-child 选中最后一个子元素:nth-child(n) 选中第n个子元素里面的n值根据具体情况选填:n 第n个 n的范围表示0到正无穷2n 或 even 第2n个 表示选中偶数位的元素2n+1 或 odd 表示选中奇数位的元素注意:以上这些伪类都是根据所有的子元素进行排原创 2021-06-04 21:55:22 · 176 阅读 · 0 评论 -
CSS基础(2)_复合选择器、关系选择器、属性选择器
复合选择器交集选择器作用:选中同时复合多个条件的元素。语法:选择器1选择器2选择器3...选择器n{} (选择器之间有并且的关系)例如:div.red{} .a.b.c{} (在div选择器内并且满足类选择器是red类型、类选择器必须同时满足是有a、b、c3个类)注意:交集选择器中如果有元素选择器,必须使用元素选择器开头。并集选择器(也叫选择器分组)作用:同时选择多个选择器对应的元素。语法:选择器1,选择器2,选择器3,...选择器n{} (,相当于或的关系)例如:#b1...原创 2021-06-03 21:47:40 · 203 阅读 · 0 评论 -
CSS基础(1)_CSS基本语法、注释、常用选择器
CSS注释:/* ... */CSS基本语法:选择器 声明块选择器:通过选择器可以选中页面中的指定元素。(比如p的作用就是选中页面中所有的p元素)声明块:通过声明块来指定要为元素设置的样式。声明块特点:1、声明块由一个一个的声明组成; 2、声明是一个名值对结构(一个样式名对应一个样式值,名和值之间以:连接,以;结尾)选择器元素选择器作用:根据标签名来选中指定的元素。语法:标签名{}例子:p{} h1{} div{}任务一:将《回...原创 2021-05-31 23:31:48 · 178 阅读 · 0 评论 -
CSS简介
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。网页分成三个部分:结构(HTML)表现(CSS)行为(Javascript)网页功能-表现层(CSS)一个大原创 2021-05-31 15:27:15 · 193 阅读 · 0 评论