CSS笔记

最新推荐文章于 2024-11-02 10:32:21 发布
最新推荐文章于 2024-11-02 10:32:21 发布
阅读量115 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ho622/article/details/105370792
版权

一、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标签链接外部样式文件(推存用法)

    <link rel="stylesheet" type="text/css" href="css样式文件路径"

    type属性可以省略

  • @import指令导入外部样式文件

    <style>
    @import "css样式文件的路径";
     @import url(css样式文件的路径);
</style>

三、选择器

1、基础选择器
1.1 标签选择器

也称为元素选择器，使用HTML标签作为选择器名称
以标签名作为样式应用的依据

1.2 类选择器

使用自定义名称，以.点号 作为前缀，然后通过HTML标签的class属性调用类选择器
以标签的class属性作为样式应用的依据
注意事项：

  • 调用时不能添加.点号
  • 同时调用多个类选择器时以 空格 分隔
  • 类选择器定义时，名称不能以数字开头
1.3 ID选择器

使用自定义名称，以# 号作为前缀，然后通过HTML标签的id属性进行名称匹配
以标签的id属性作为样式应用的依据，一对一的关系

2、复杂选择器
2.1复合选择器

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

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

2.2组合选择器

也称为集体声明

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

2.3嵌套选择器

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

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

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

2.4伪类选择器

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

四种状态：

  • ：link 表示未访问的链接
  • ：visited 已访问的链接
  • ：hover鼠标移动到链接上，即悬浮在链接
  • ：active选定的链接，被激活

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

2.5 伪元素选择器

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

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

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

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

3、选择器优先级
3.1 优先级

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

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

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

3.2 内部样式加载顺序

就近原则

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

3.3 !important

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

四、常用CSS属性

1、字体属性

定义字体相关的样式

属性含义说明
font_size大小、尺寸可以使用多种单位
font_weight粗细
font_family字体
font_style样式
1.1 font_size

取值：

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

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

1.2 font_weight

取值：

  • nomal普通（默认）
  • 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水平对齐方式取值：left，center，right
vertical-align垂直对齐方式取值：top，middle，bottom可用于图片和文字的对齐方式
text-indent首行缩进
text-decoration文本修饰取值：underline，overline，line-through
text-transform字母大小写取值：lowercase，uppercase，capitalize首字母大写
letter-spacing字符间距
word-spacing单词间距只对英文有效
white-space空白的处理方式文本超出后是否换行显示，取值：nowrap
2.1 color

取值：四种

  • 颜色名称：使用英文单词
  • 16进制RGB取值：#RRGGBB
#FFFFFF--->#FFF  白色
#000000--->#000  黑色
#FF0000--->#F00  红色
#00FF00--->#0F0  绿色
#0000FF--->#00F  蓝色
#CCCCCC--->#CCC  灰色
#FF7300--->无法简写

注意：不区分大小写

  • rgb函数：rgb（red，green，blue）

    每个颜色取值范围：[0,255]

    rgb(255,0,0)--->红
rgb(0,255,0)--->绿
rgb(0,0,255)--->蓝

  • rgba函数：（rgbared，green，blue，alpha）

    可以设置透明度，alpha的取值范围：[0,1]0–表示完全透明 1–表示完全不透明

    rgba（255,0,0.1）—>纯红色

    rgba（255,0,0.5）—>红色半透明

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

取值：transparent透明

3.2 background-image
  • 必须使用url（）方式指定图片的路径
  • 如果在css样式文件中使用相对路径，此时是相对于css文件，不是相对于HTML文件
3.3 background-repeta

取值：repeat（默认）、repeat-x、repeat-y、no-repeat

3.4 background-position

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

取值：

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

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

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

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

3.5 background-attachment

取值：scroll默认、fixed固定不变

3.6 background

简写属性：background-color|background-image| background-repeta|background-position

以空格隔开，书写顺序没有要求

4、列表属性
属性含义说明
list-style-type设置列表前的标记
list-style-image将图像作为列表前的标记
list-style-position设置标记的位置取值：outside（默认），inside
list-style简写
4.1 list-style-type

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

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

4.2 list-style

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

书写顺序没有要求

5、表格属性

border-collapse表格属性中相邻边框是否合并（折叠）为单一边框

取值：separate（默认）、collapse

6、使用LiveReload

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

步骤：

1.在Chrome浏览器中安装LiveReload扩展程序

将livereload文件解压—>Chrome浏览器中“…”—>更多工具—>扩展程序–>开启“开发者模式”—>加载已解压的扩展程序

注意：勾选“在所有网站上”

2.在sublime中安装LiveReload插件

将livereload.rar解压后放到sublime插件目录packages中

3.配置sublime的LiveReload插件

preference—>packages settlings—>livereload—>settings-default

{

     "enabled_plugins": []

     "SimpleReloadPlugin"

     "SimpleRefresh"

}

4.在浏览器中启用LiveReload

先打开浏览器要访问的页面，然后点击浏览器地址栏右边的黑色 圆圈，当中心的小圆圈变成实心的表示已启用

5.在Sublime中启用LiveReload

ctrl+shift+p---->搜索LiveReload：选择enable—>搜索simple reload,选择enable

五、盒子模型
1、简介

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

  • width 宽度

  • height 高度

  • border 边框

  • padding 内边距

  • margin 外边距

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JWeiovl9-1586255251471)(.\images\盒子模型.png)]

2、盒子模型
2.1 border

盒子边框

分为4个方向：

​ 上top、右right、下bottom、左left

​ border-top、border-right、 border-bottom 、 border-left

每个边框都包含三个样式：

​ 颜色color、粗细width、样式style

​ border-top-color、border-top-width、border-top-style

​ border-right-color、border-right-width、border-right-style

​ border-bottom-color、border-bottom-width、border-bottom-style

​ border-left-color、border-left-width、border-left-style

样式取值：

​ solid实线、dashed虚线、dotted点线、double双线、inset内嵌3D线、outset外嵌3D线

简写，三种方式：

  • 按方向写

    border-top、border-right、border-bottom、border-left

    书写顺序：

    border-方向：width style color

  • 按按时简写

    border-color、border-width、border-style

    书写顺序：

    ​ border-样式：top right bottom left

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

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

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

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

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

  • 终级简写

    如果四个边样式完全相同，borderwidth style color

2.2 padding

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

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

书写顺序：

border-方向：width style color

  • 按按时简写

    border-color、border-width、border-style

    书写顺序：

    ​ border-样式：top right bottom left

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

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

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

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

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

  • 终级简写

    如果四个边样式完全相同，borderwidth style color

2.2 padding

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

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

注意：上下冲突，则以上为准，如果左右冲突，则以左为准

Ao622
关注
css笔记
04-02
这本“css笔记”是对CSS技术的深入理解和实践的总结，旨在帮助开发者巩固基础知识，提升技能水平。 **基本概念** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p`）、类选择器（`.myClass`）、ID...
狂神说视频-CSS笔记.pdf
11-12
CSS 笔记 CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...
CSS学习笔记
m0_58761900的博客
09-18 3148
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 1816
这是div标签</div>复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。} </style> <div id="red">这是div标签
CSS笔记（精简）
weixin_46160720的博客
03-11 7582
CSS笔记 HTML 前端教程 前端笔记
CSS笔记II
皮鞭蘸碘伏边抽边消毒
01-15 1338
CSS3最全笔记 ，非常详细，HTML5+CSS3 详细完全体笔记
B站pink老师HTML+CSS笔记
m0_56428225的博客
07-20 3313
b站pinkl老师HTML+css笔记（包括h5c3+移动端)
css笔记1
qq_61466402的博客
03-13 8311
目录 css语法 实例 例子解释 css选择器 css使用 三种使用css的方法 外部 CSS 内部 CSS 行内 CSS 多个样式表 层叠顺序 css注释 实例 实例 实例 HTML 和 CSS 注释 css颜色 css背景色 CSS 文本颜色 CSS 边框颜色 CSS 颜色值 实例 css背景 CSS background-color css背景图像 css背景重复 css背景附着 css背景简写 css语法 CSS 规则集（rule...
第一周学习html css笔记
DarrenTitor的博客
10-05 409
0 1 solid不能遗漏 2 缺口方框，用“&amp;lt;fieldset”和“&amp;lt;legend”组合 3 图片固定在某位置，不随滚轮滚动，position：fixed 4 标题在表格的上方中央，caption-side: top ...
【整理+总结】pink老师前端三件套之CSS笔记（二）CSS属性 & 元素显示模式 & 引用方式 & 三大特性
weixin_42771853的博客
12-08 3250
1. CSS属性：字体属性、文本属性、背景属性 2. 元素显示模式：块元素、行内元素、行内块元素 3. CSS 引用方式：行内样式表、内部样式表、外部样式表 4. CSS 三大特性：层叠性、继承性、优先级
CSS笔记(1).pdf
01-26
CSS笔记 CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML，让HTML专注于结构呈现，而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...
HTMLCSS笔记.pdf
07-14
HTML与CSS笔记 HTML（HyperText Markup Language，超文本标记语言）是构成网页内容的骨架，用于创建网页的结构，并通过不同的标签来描述网页的各个部分。CSS（Cascading Style Sheets，层叠样式表）则负责网页的...
【前端基础】CSS进阶
qq_41413652的博客
11-01 899
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
前端学习Day10 CSS盒子属性（附练习版）
最新发布
As977_的博客
11-02 503
medium 为默认宽度，thin 为小于默认宽度，thick 为大于默认宽度。⚠️：要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为absolute。在web页面中，“盒子”的结构包括厚度、边距、填充等元素，引申到CSS中，就是border、margin和padding。对于任何盒子，都可以分别设定4条边的padding、border和maegin，实现各种各样的排版效果。length 由浮点数字和单位标识符组成的长度值，不允许负值。
第八章 利用CSS制作导航菜单课后习题
2302_80786141的博客
11-01 789
【代码】第八章 利用CSS制作导航菜单课后习题。
CSS例子: 横向排列的格子
11-01 382
【代码】CSS例子: 横向排列的格子。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值