css笔记

最新推荐文章于 2024-09-12 01:25:48 发布
最新推荐文章于 2024-09-12 01:25:48 发布
阅读量157 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangqazwsxedc/article/details/105652361
版权

CSS

一.CSS简介

1.什么是CSS？

CSS，Cascading Style Sheet层叠样式表

是一种央视设置规则，用于控制页面的外观样式

2.为什么使用CSS？

  • 实现内容与样式的分离，便于团队开发
  • 样式复用，便于网站的后期维护
  • 页面的精准控制，让页面更精美

3.CSS作用

  • 页面外观美化
  • 布局和定位

二.基本用法

1.CSS语法

<head>
	<style>
		选择器{
			属性名：属性值；
			属性名：属性值；
			
	</style>
</head>
  • 选择器：要修饰的对象（东西）
  • 属性名：修饰对象的哪个属性（样式）
  • 属性值：样式的取值

2.CSS应用样式

也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式

2.1内部样式

也称为内嵌样式，页面头部通过style标签定义

对当前页面当中所有符合样式选择器的标签都起作用

2.2行内样式

也称为嵌入样式，使用HTML标签的style属性定义

只对设置style属性的标签起作用

2.3外部样式

使用单独的CSS文件定义，然后再页面中使用<link标签>或<@import指令>引入

  • 使用<link标签>链接外部样式文件

    type属性可以省略
  • <@import指令> 导入外部样式文件

三、选择器

1.基础选择器

1.1标签选择器

也称为元素选择器，使用HTML标签作为选择器的名称

一标签名作为样式应用的依据

1.2类选择器

使用自定义名称，以<.点>号作为前缀，然后通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用的依据

注意事项：

  • 调用时不能用<.点>号
  • 同时调用多个类选择器时以<空格>隔开
  • 类选择器定义时不能以数字开头

1.3ID选择器

使用自定义名称，以<#号>作为前缀，然后通过HTML标签属性进行名称的匹配

以标签的ID属性作为样式应用的依据，一对一的关系

2.复杂选择器

2.1 复合选择器

标签选择器和类选择器，标签选择器和id选择器，一起使用

必须同时满足两个条件才能应用样式

2.2 组合选择器

也称为集体声明

将多个具有相同样式的选择器放在一起声明，使用逗号隔开

2.3嵌套选择器

在某个选择器内部在设置选择器，通过空格隔开

只有满足层次关系最里层的选择器所对应的标签才会引用样式

注意：使用空格时不区分父子还是后代，使用CSS3中新增的>时必须实父子关系才行

2.4伪类选择器

根据不同的状态显示不同的样工，一般用于标签

四种状态：

  • :link 未访问的链接
  • :visited 已访问的链接
  • :hover 鼠标移动到连接上，即悬浮在链接
  • :active选定的链接

注意:默认超链接为：蓝色、下划线

2.5伪元素选择器

:first-letter为第一个字符的样式

:first-line为第一行添加样式

:before在元素内容的最前面添加的内容，需要配合content属性使用

:after在元素内容的最后面添加的内容，需要配合content属性使用

3.选择器优先级

3.1 优先级

行内样式>ID选择器>类选择器>标签选择器

原因：首先加载标签选择器，在加载类选择器，然后加载ID选择器，最后加载行内样式

后加载会覆盖先加载的同名样式

3.2内外部样式加载顺序

就近原则

原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先

3.3 !important

可以使用!important使某个样式有最高的优先级

四.常用CSS属性

1.字体属性

定义字体相关的样式

属性 含义 说明
font-size 大小、尺寸 可以使用多种单位
font-weight 字体的粗细
font-family 字体
font-style 字体样式
font 简写

1.1 font-size

取值：

  • inherited继承，默认从父标签继承字体大小（默认值），所有CSS属性的默认值都是inherited
  • px像素 pixel
  • %百分比，相对于父标签字体大小的百分比
  • em倍数，相对于父标签字体大小的倍数

HTML根元素默认字体大小为16px，也称为基础字体大小

1.2 font-weight

取值：

  • normal普通（默认）
  • bold粗体
  • 自定义400normal 700bold

1.3 font-family

是求系统中要安装指定的字体

一般建议3中字体，首写，其次，备用 以逗号隔开

1.4 font-style

  • normal普通
  • italic斜体

1.5 font

字体的简写属性：font font-style font-weight font-size font-family必须按此顺序书写

2.文本属性

属性 含义 说明
color 颜色
line-height 行高 行之间的高度
text-align 水平对齐方式 取值：center、left、right
vertical-align 垂直对齐方式 取值：top、middle、botton
text-indent 首行缩进
text-decoration 文本修饰 取值：underlline、overline、line-through
text-transform 字母大小写 取值：lowercase、uppercase、capitallize
letter-spacling 字符间距
word-spacling 单词间距 只对英文有效
white-space 空白的处理方式 文本超出后是否换行显示

2.1color

取值：四种写法

  • 颜色名称：使用英文单词
  • 16进制的RGB取值：#RRGGBB
    1 #FFFFFF—>#FFF 白色
    2 #000000—>#000 黑色
    3 #FF0000—>#F00 红色
    4 #00FF00—>#0F0 绿色
    5 #0000FF—>#00F 蓝色
    6 #CCCCCC—>#CCC 灰色
    7 #FF7300—>无法简写
  • rgb函数：rgb（red,green,blue)
    每个颜色的取值范围：[0,255]
    1 rgb(255,0,0)–>红
    2 rgb(0,255,0)–>绿
    3 rgb(0,0,255)–>蓝
  • rgba函数：rgba(red,green,blue,alpha)
    可以设置颜色的透明度，alpha的取值范围[0,1]
    0—>完全透明
    1—>完全不透明
    rgb(255,0,0,1)—>纯红色
    rgb(255,0,0,0.5)—>红色的半透明

3.背景属性

属性 含义 说明
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片的重复方式
background-position 背景图片的显示位置
background-attachment 背景图片是否跟随滚动
background 简写

3.1background-color

取值：transparent透明

3.2background-image

  • 必须使用url()方式指定图片路径
  • 如果实在css样式文件中使用相对路径，此时是相对于css文件，不是相对于html文件

3.3background-repeat

取值：repeat(默认)、repeat-x、repeat-y、no-repeat

3.4background-position

默认背景图片显示在左上角

取值：

  • 关键字：top、bottom、left、right、center
  • 左标：左上角(0,0)坐标，向右为x的正方向，向下为y正方向

CSS雪碧图，即CSS sprites，也称为CSS精灵，是一种CSS图像合并技术

含义：将网页中许多非常小的图片整合到一张图片中，当访问该页面时只需要下载一次，可以减少访问访问服务次数,提高性能

原理：使用background-position进行背景定位，试用坐标进行精准定位

3.5background-attachment

取值：scroll、fixed固定不变

3.6background

简写属性：background background-color background-image background-repeat background-position

4.列表属性

属性 含义 说明
list-style-type 设置列表前的标记
list-style-image 将图像作为列表前的标记
list-style-position 设置标记的位置 outside、inside
list-style 简写

4.1list-style-type

取值：none、disc、circle、square、decimal

此时不再区分有序列表与无序列表，只要设置列表前面的标记就可以

4.2list-style

简写属性：list-style-type list-style-image list-style-position

书写顺序没有要求

5.表格属性

border-collapse表格中相邻边框是否合并(折叠)为单一边框

取值：separate(默认)、collapse

6.使用liveReload

可以实现当保存页面文件时，时时刷新浏览器

步骤：

  • 在chome浏览器中安装livereload扩展程序
    将livereload.rar解压==>在chome浏览器的右上角“…”—>更多工具—>扩展程序—>
    提示：需要打开开发者模式—>加载已解压的扩展程序
    注意：后续的操作 勾选“允许访问所有网站留存数据”
  • 在sublime中的livereload插件
    将LiveReload-sublime.rar解压放到sublime的插件目录中（packages）中
  • 配置sublime中的livereload插入
    preference–>packages settings–>livereload–>settings-default
    {
    “enabled_plugins”: [
    “SimpleReloadPlugin”
    “SimpleRefresh”
    ]
    }
    在浏览器中启用livereload
    先打开要访问的页面，然后点击浏览器地址栏右边的黑色圆圈，当中心的小圆圈变成实心时表示已启用
    • 在sublime中启用livereload
      按住crtl+shift+p–>搜索livereload 选择enable–>搜索simple reload 选择enable

五、盒子模型

1.简介

解决网页布局的问题，是网页布局的基础，将页面中所有元素均看作是一个盒子，盒子都包含以下几个属性：

  • width：宽度
  • height：高度
  • border：边框
  • padding：内边距
  • margin：外边距

2.盒子模型

2.1border

表示盒子的边框，分为四个方向top、right、bottom、left

border-top，border-right，border-bottom，border-left

每个边框又包含三种样式：

  • 颜色：color
  • 粗细：width
  • 样式：style

border-top-color，border-right-width，border-bottom-style，border-left-color

样式的取值：solid：实线、dashed：虚线、dotted：点线、double：双线、inset：内嵌3D线、outside：外嵌3D线

  • 按方向写：
    border-top，border-right，border-bottom，border-left

书写顺序：border-方向：width、style、color

  • 按样式简写：
    border-color、border-width、border-style

书写顺序：

border-样式：border-top-color，border-right-color，border-bottom-color，border-left-color

必须按顺时针方向书写，同时可以缩写

border-width：2px-------->四个边框宽度均为2px

 border-width：2px  4px---->上下一样，左右一样

border-width：2px  3px 4px

规则：如果省略，则认为上下一样，左右一样

  • 终极简写
    如果四个边样式完全相同，border-width style color

2.2padding

表示盒子的内边距，即内容与边框之间的距离

有四个方向：也可以简写，按顺时针书写

默认：上下一样，左右一样

注：左右冲突以左为准，上下冲突以上为准

2.3maigin

表示盒子的外边距，即盒子与盒子之间的距离

同样也分为4个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）

居中对齐：

/* 元素的水平居中 */

/* 1.块级元素的水平居中 */

margin:0 auto;

/* 提示：块级元素必须指定宽度 */

/* 2.文本的水平居中 */

text-align:center;

/* 3.垂直居中，将height和line-height设置为相同 */

height:100px;

line-height:100px;

3.其他

3.1元素所占空间

页面中的元素实际所占的空间

  • 宽度=width+左右padding+左右border+左右margin
  • 高度=height+上下padding+上下border+上下margin

3.2盒子

不同标签的盒子属性默认值可能不同，需要自己设置

body,ul,ol,dl,li,p,h1,h2,h3,h4,h5,h6,form{
    margin:0;
    padding:0;
}

3.3外边距的合并

也称为外边距的折叠，指的是两个块级元素垂直外边距相遇时，它们将合并为一个外边距，合并后的外边距值为其中较大的那个外边距值

两种情况：

  • 当一个元素出现在另一个元素上面时，第一个元素的下边距于第二元素的上边距会发生合并
  • 当一个元素包含在另一个元素时，并且没有内边距或边框把外边距分割时，两个元素的上边距会发生合并

外边距的合并的好处，让排版在视觉上显得更美观

六.定位方式

1.简介

通过position属性实现对元素的定位，有4中定位方式

常用取值：

取值 含义 说明
static 默认值 按照常规文档
relative 相对定位 相对于标签原来的位置进行的定位
absolute 绝对定位 相对于第一个非static
fixed 固定定位 相对于浏览器窗口进行定位

设置定位方式后，还要设置定位属性（偏移量）：top,bottom,left,right

2.相对定位

先设置元素的position属性为relative，然后在设置偏移量

3.绝对定位

先设置父标签为非static定位，然后设置元素的position属性为absolute，最后设置偏移量

注意：

  • 一般来说都会将父标签设置为非static定位
  • 如果父标签不是非static定位，则会相对于浏览器窗口进行定位
  • 设置元素为绝对定位以后，元素会漂浮到页面上方

4.固定定位

先设置元素的position属性为fixed，然后设置偏移量

设置元素为固定定位后，元素会浮动在页面上方

5.z-inder

设置元素定位方式后，元素会浮在页面上方，此时可以通过z-inder属性设置优先级，控制元素的堆叠顺序，取值为数字，值越大优先级越高，默认为auto（大多数浏览器为0）

注意：只能给非static定位的元素设置z-index属性

七.其他CSS属性

1.浮动和清除

1.1浮动属性

通过float属性来实现元素的浮动,可以让1块级元素脱离常规的文档流,向左或向右移动，在同一行显示，如果一行显示不下，则会换行显示

  • left左浮动
  • light有浮动
  • none不浮动，默认值

设置float属性后，元素会浮在页面上层，此时父容器无法计算自己的尺寸，如果我们还想显示父容器通常会在末尾添加一个清除了float属性的空的div来解决

1.2清除属性

通过clear属性来清除，设置元素的哪一侧不允许有浮动元素

常用取值：

  • left左侧不允许出现浮动元素
  • right右侧不允许出现浮动元素
  • both两侧不允许出现浮动元素
  • none允许两侧出现浮动，默认值

结论：

  • 对于非浮动元素，两边都可以设置清除（常用）
  • 对于浮动元素，向哪边浮动，就只能设置那边的清除

2.元素的显示和隐藏

2.1display

通过display属性设置元素是否显示，以及是否独占一行

取值 含义 说明
none 不显示
inline 显示内联元素，行级元素的默认值 块级元素转化为行级元素，不在独占一行
block 显示为块级元素，块级元素的默认值 将一个行级元素转换为块级元素，会独占一行
inline-block 显示为内联元素，可以设置行和高 在inline的基础上，匀速设置宽度和高度

注意：

行级元素是无法设置高度和宽度的，可以为行级标签设置inline-block，然后就可以设置宽和高

2.2visibility

也可以通过visibility属性设置元素的显示和隐藏

常用属性：

  • visible：看得见的
  • hidden：隐藏的

2.3区别

  • display阴藏时不再占据页面中的空间，后面的元素会占据其位置
  • sisibility阴藏时会占据页面中的空间，位置还保留在页面中，只是不显示

3.轮廓属性

3.1简介

轮廓outline，用于在元素周围绘制一个轮廓，位于border外围，可以突出显示元素

3.2基本用法

  • outline-width 轮廓宽度
  • outline-color 轮廓颜色
  • outline-style 轮廓样式
  • outline 简写

在浏览器中，当鼠标单击或使用TAB键让一个表单或链接获得焦点时，该元素会有一个轮廓outline

优点：可以提高使用表单的用户体验

缺点：有时会影响美观

3.3outline和border的区别

  • border可以应用于所有html元素，而outline主要用于表单元素，超链接元素
  • 当元素获得焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为
  • outline不影响元素的尺寸和位置，而border会影响

4.其他属性

4.1宽度相关

  • max-width 设置元素的最大宽度
  • max-height 设置元素的最大高度
  • min-width 设置元素的最小宽度
  • min-height 设置元素的最小高度

4.2overflow属性

当元素内容溢出时该如何处理

常用取值：

  • visible：溢出时可见，显示在元素外，默认值
  • hidden：溢出的部分不可见（常用）
  • scroll：无论是否出现溢出，始终出现滚动条
  • auto：溢出时自动出现滚动条

4.3cursor属性

用于设置光标的形状

常用属性：

  • default 默认光标，一般为箭头
  • pointer 手型，光标移动超链接上时一般显示为手形
  • move 表示可移动
  • text 表示文本
  • wait 表示程序正忙，需等待
  • help 表示帮助

八.页面布局

1.简介

常见页面布局：

  • 表格布局
  • div布局

2.表格布局

2.1简介

不适用于复杂布局，仅用于简单有规则的结构

定位相对准确，与浏览器基本无关，适用于简单分隔

2.2用法

table常用样式的属性

  • border在表格外围设置边框
  • border-spacing 设置单元格之间的距离（相当于table标签中的cellspacing属性，即间距）
  • border-collapse 表格中相邻边框是否合并，取值：seprate、collapse

th/td常用样式属性：

  • border 为单元格设置边框
  • padding 设置单元格的内边距（相当于table标签中的cellpadding属性，边距）

3.div布局

定位绝对准确，使用灵活，适合于复杂的布局方式

3.1两种形式：

  • 1-1-1布局
  • 1-2/3-1布局

3.2圣杯布局

页面结构，两边的边栏宽度固定，中间主体在一定范围内可自适应，并且主体优先被加载

一般防止页面缩放影响浏览，都会为页面设置一个最小宽度

3.3双飞翼布局

源自淘宝的UED(用户体验设计)团队

双飞翼布局和圣杯布局要实现的效果是相同的，只是思路不同

圣杯布局和双飞翼布局的区别

  • 双飞翼布局比圣杯布局多创建一个div
  • 双飞翼布局不用设置内边距和相对定位，也不用设置偏移量
  • 双飞翼布局使用的margin，圣杯布局使用的是

实际开发中建议使用CSS3中新增的flex弹性盒子布局，更简易

wangqazwsxedc
关注
CapitallizeFirstLetter.zip
04-09
citavi大写字母转换附件，可以快速将后面的英文参考文献的标题，作者，出版社等英文实词首字母大写。
css样式属性默认值与继承值攻略
weixin_34319999的博客
02-06 329
一 、 属性的继承 1.可继承的属性: visibility 和 cursor 可以被所有元素继承 以下只可被 内联元素 继承 : letter-spacing(伪类里的), word-spacing,white-space,line-height,color,[font家族]font,font-familly,font-weight,font-size,font-style,font-va...
z-index
weixin_40512519的博客
07-30 1万+
z-index:可以设置元素的叠加顺序，但依赖定位属性。 z-index大的元素会覆盖z-index小的元素 z-index为auto的元素不参与层级比较 z-index为负值，元素被普通流中的元素覆盖 number设置z-index大小，number越大z-index越大。z-index只作用于带有定位属性的元素。如果position属性为static的时候，就相当于没有定位属性。在普通中...
关于z-index的详细解释
热门推荐
SmileRM的博客
12-15 1万+
测试的浏览器：IE，chrome <div id="no-style"> <div id="div1" class="test-div" style="background:#0c8484;">11111 <div id="test-position" class="has-position-absolute">11111的子元素</div> </
CSS笔记
2201_76100326的博客
08-12 1673
before定位的基准是其主元素的右上⻆，after定位的基准是主元素的结尾处。当主元素没有内容时before与after仍会正常⼯作，属性为行内元素，若需要设置高宽度等属性需要首先设置为块元素。content是伪元素必需的属性。若伪元素没有内容，需赋值为空格：content: ' ';before与after的主要用途是对元素默认样式的的美化：美化时需要结合定位于内容。⼀般讲主元素设置为position：relative，伪元素设置为position：absolute，以方便对伪元素定位。
CSS学习笔记
m0_58761900的博客
09-18 3107
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
css 笔记2
m0_68844946的博客
06-13 1779
这是div标签</div>复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。} </style> <div id="red">这是div标签
CSS笔记（精简）
weixin_46160720的博客
03-11 7540
CSS笔记 HTML 前端教程 前端笔记
CSS笔记II
皮鞭蘸碘伏边抽边消毒
01-15 1301
CSS3最全笔记 ，非常详细，HTML5+CSS3 详细完全体笔记
狂神说视频-CSS笔记.pdf
11-12
CSS 笔记 CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...
CSS笔记(1).pdf
01-26
CSS笔记 CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML，让HTML专注于结构呈现，而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...
css笔记css笔记css笔记
04-03
在网页设计领域，CSS（层叠样式表）扮演着至关重要的角色，它使得网页的布局、字体、颜色、背景等视觉元素得以精确控制。CSS 的引入解决了早期纯 HTML 页面表现与结构混合的问题，实现了内容与样式的分离，提高了...
HTMLCSS笔记.pdf
07-14
HTML与CSS笔记 HTML（HyperText Markup Language，超文本标记语言）是构成网页内容的骨架，用于创建网页的结构，并通过不同的标签来描述网页的各个部分。CSS（Cascading Style Sheets，层叠样式表）则负责网页的...
B站pink老师HTML+CSS笔记
m0_56428225的博客
07-20 3203
b站pinkl老师HTML+css笔记（包括h5c3+移动端)
css grid布局属性详解
最新发布
Jet_Lover的博客
09-12 990
网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。CSS Grid布局提供了更直观的网格化布局方式，使得响应式设计和复杂页面结构的实现更加简单和高效。Flex 布局是轴线布局，可以看作是一维布局。Grid 布局则是将容器划分成行和列，产生单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
HTML、CSS实现树状图
p_s_p的博客
09-09 772
【代码】HTML、CSS实现树状图。
VUE实现刻度尺进度条
u011753609的博客
09-11 457
VUE实现刻度尺进度条
CSS笔记整理：HTML与CSS基础，字符编码及网页结构
"这是一份关于CSS的个人学习笔记，作者分享了自己在学习CSS过程中的理解和总结，旨在帮助读者更好地理解和应用CSS。...通过这份CSS笔记，读者可以系统地学习和复习CSS的基础知识，为进一步深入学习和实践打下坚实基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值