11、学习总结：CSS篇

已于 2022-05-04 14:34:55 修改
阅读量322 收藏 1
点赞数
分类专栏： JavaEE初阶 文章标签： css 学习
于 2022-05-04 12:09:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45795182/article/details/124551401
版权

目录

1.什么是CSS

CSS：层叠样式表 (Cascading Style Sheets)。 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果.，能够做到⻚⾯的样式和结构分离。

2.CSS 基本语法

选择器 + {⼀条/N条声明}
●选择器决定针对谁修改
●声明决定修改啥。（声明的属性是键值对。 使⽤ ; 区分键值对, 使⽤ : 区分键和值. ）
● CSS 使⽤ /* */ 作为注释. (使⽤ ctrl + / 快速切换)

3.CSS 类型

  1. ⾏内样式
  2. 内部样式
  3. 外部样式

3.1 ⾏内样式

通过 style 属性, 来指定某个标签的样式。只适合于写简单样式.，只针对某个标签⽣效。
缺点: 不能写太复杂的样式。这种写法优先级较⾼, 会覆盖其他的样式。
在这里插入图片描述

3.2 内部样式

写在 style 标签中，嵌⼊到 html 内部的样式叫做内部样式。
注意: 理论上来说 style 放到 html 的哪⾥都⾏. 但是⼀般都是放到 head 标签中。
优点: 这样做能够让样式和⻚⾯结构分离。
缺点: 分离的还不够彻底.，尤其是 css 内容多的时候。
在这里插入图片描述

3.3 外部样式

实际开发中最常⽤的⽅式.
步骤：
1.创建⼀个 css ⽂件.
2. 使⽤ link 标签引⼊ css
在这里插入图片描述
优点: 样式和结构彻底分离了。
缺点: 受到浏览器缓存影响，修改之后不⼀定⽴刻⽣效。
注意:
1、 不要忘记 link 标签调⽤ CSS, 否则不⽣效。rel 属性是必须的，规定当前⽂档与被链接⽂档/资源之间的关系。stylesheet 表示要导⼊的样式表的 URL。
2、缓存问题
这是计算机中⼀种常⻅的提升性能的技术⼿段。⽹⻚依赖的资源(图⽚/CSS/JS等)通常是从服务器上获取的. 如果频繁访问该⽹站, 那么这些外部资源就没必要反复从服务器获取.，就可以使⽤缓存先存起来(就是存在本地磁盘上了). 从⽽提⾼访问效率。
可以通过 ctrl + F5 强制刷新⻚⾯,，强制浏览器重新获取 css ⽂件。
在这里插入图片描述

3.4 多种样式优先级

⾏内样式 > 内部样式 > 外部样式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
没有行内样式和内部样式时，才听外部样式的。

4.代码⻛格

4.1 样式格式

  1. 紧凑⻛格
p { color: red; font-size: 30px;}
  1. 展开⻛格(推荐)
p {
   color: red;
   font-size: 30px;
}

4.2 样式⼤⼩写

虽然 CSS 不区分⼤⼩写, 我们开发时统⼀使⽤⼩写字⺟

5.选择器

5.1 选择器功能

选中⻚⾯中指定的标签元素。要先选中元素, 才能设置元素的属性。

5.2 选择器种类

常见选择器：
●标签选择器
●类选择器
●id 选择器
●通配符选择器

5.2.1 标签选择器

特点:
能快速为同⼀类型的标签都选择出来，但是不能对同一类型的不同标签进行差异化设置。
在这里插入图片描述

5.2.2 类选择器

特点:
●差异化表示不同的标签。
●可以让多个标签的都使⽤同⼀个标签。
在这里插入图片描述
语法细节:
●类名⽤ . 开头的
●下⽅的标签使⽤ class 属性来调⽤.
●⼀个类可以被多个标签使⽤, ⼀个标签也能使⽤多个类(多个类名要使⽤空格分割, 这种做法可以让代码更好复⽤)
●如果是⻓的类名, 可以使⽤ - 分割.
●不要使⽤纯数字, 或者中⽂, 以及标签名来命名类名.

注意: ⼀个标签可以同时使⽤多个类名。这样做可以把相同的属性提取出来, 达到简化代码的效果.
在这里插入图片描述

5.2.3 id 选择器

和类选择器类似。
●CSS 中使⽤ # 开头表示 id 选择器
●id 选择器的值和 html 中某个元素的 id 值相同
●html 的元素 id 不必带 #
●id 是唯⼀的, 不能被多个标签使⽤ (是和类选择器最⼤的区别)
在这里插入图片描述

类选择器 VS id选择器

1、类选择器在一个页面中是可以重复使用的；id选择器，一个页面只能使用和设置一次。
2、定义顺序不同：类选择器先定义样式再使用，id选择器先有id再定义样式。
3、类选择器的定义以".“开头，id选择器是以”#"开头。

5.2.4 通配符选择器

使⽤ * 的定义, 选取所有的标签.

*{
color:red;
}

⻚⾯的所有内容都会被改成红⾊，不需要被⻚⾯结构调⽤。

5.3总结

在这里插入图片描述

6.常⽤元素属性

CSS 属性有很多, 可以参考⽂档:
https://www.w3school.com.cn/cssref/index.asp

6.1 字体属性

6.1.1 设置字体

body {
     font-family: '微软雅⿊';
     font-family: 'Microsoft YaHei';
}

●字体名称可以⽤中⽂, 但是不建议。
●从上到下查找字体, 如果都找不到, 会使⽤默认字体。
●如果字体名有空格, 使⽤引号包裹。
●建议使⽤常⻅字体, 否则兼容性不好。

写法2：类似于嵌套
在这里插入图片描述

6.1.2 字体⼤⼩

p {
   font-size: 20px;
}

●不同的浏览器默认字号不⼀样, 最好给⼀个明确值. (chrome 默认是 16px)
●可以给 body 标签使⽤ font-size
●要注意单位 px 不要忘记.
●标题标签需要单独指定⼤⼩
注意: 实际上它设置的是字体中字符框的⾼度；实际的字符字形可能⽐这些框⾼或矮。
在这里插入图片描述

6.1.3 字体粗细

p {
   font-weight: bold;
   font-weight: 700;
}

●可以使⽤数字表示粗细。
●取值范围是 100 -> 900，500以下不加粗，500以上加粗
在这里插入图片描述

6.1.4 ⽂字样式

在这里插入图片描述

6.1.5 ⽂本属性

① ⽂本颜⾊
RGB：我们的显示器是由很多很多的 “像素” 构成的. 每个像素视为⼀个点, 这个点就能反映出⼀个具体的颜⾊.我们使⽤ R (red), G (green), B (blue) 的⽅式表示颜⾊(⾊光三原⾊). 三种颜⾊按照不同的⽐例搭配, 就能混合出各种五彩斑斓的效果。
计算机中针对 R, G, B 三个分量, 分别使⽤⼀个字节表示(8个⽐特位, 表示的范围是 0-255, ⼗六进制表示为 00-FF).
数值越⼤, 表示该分量的颜⾊就越浓. 255, 255, 255 就表示⽩⾊; 0, 0, 0 就表示⿊⾊.
在这里插入图片描述
color 属性值的写法:
●预定义的颜⾊值(直接是单词)
●[最常⽤] ⼗六进制形式
●RGB⽅式
在这里插入图片描述

② ⽂本对⻬：控制⽂字⽔平⽅向的对⻬.
不光能控制⽂本对⻬, 也能控制图⽚等元素居中或者靠右
在这里插入图片描述
●center: 居中对⻬
●left: 左对⻬
● right: 右对⻬
在这里插入图片描述

6.2 背景属性

6.2.1 背景颜⾊

background-color: [指定颜⾊]

默认是 transparent (透明) 的. 可以通过设置颜⾊的⽅式修改.
在这里插入图片描述
在这里插入图片描述

6.2.2 背景图⽚

background-image: url(...);

⽐ image 更⽅便控制位置(图⽚在盒⼦中的位置)
注意:
1.url 不要遗漏.
2. url 可以是绝对路径, 也可以是相对路径
3. url 上可以加引号, 也可以不加.
在这里插入图片描述

6.2.3 背景平铺

background-repeat: [平铺⽅式]

重要取值:
repeat: 平铺
no-repeat: 不平铺
repeat-x: ⽔平平铺
repeat-y: 垂直平铺
默认是 repeat.

注意：背景颜⾊和背景图⽚可以同时存在. 背景图⽚在背景颜⾊的上⽅.

6.2.4 背景尺⼨

background-size: length|percentage|cover|contain;

●可以填具体的数值: 如 40px 60px 表示宽度为 40px, ⾼度为 60px；也可以填百分⽐: 按照⽗元素的尺⼨设置。
● cover: 把背景图像扩展⾄⾜够⼤，以使背景图像完全覆盖背景区域。背景图像的某些部分也许⽆法显示在背景定位区域中。
● contain: 把图像图像扩展⾄最⼤尺⼨，以使其宽度和⾼度完全适应内容区域.。
在这里插入图片描述

7.Chrome 调试⼯具 – 查看 CSS 属性

有两种⽅式可以打开 Chrome 调试⼯具：
●直接按 F12 键
● 开发者工具

标签含义：

在这里插入图片描述

elements 标签⻚使⽤

●ctrl + 滚轮进⾏缩放, ctrl + 0 恢复原始⼤⼩。
● 使⽤ 左上⻆ 箭头选中元素。
● 右侧可以查看当前元素的属性, 包括引⼊的类。
● 右侧可以修改选中元素的 css 属性. 例如颜⾊, 可以点击颜⾊图标, 弹出颜⾊选择器, 修改颜⾊. 例如字体⼤⼩, 可以使⽤⽅向键来微调数值。
●此处的修改不会影响代码, 刷新就还原了。
● 如果 CSS 样式写错了, 也会在这⾥有提示. (⻩⾊感叹号)
在这里插入图片描述

8.⻚⾯布局—盒模型

每⼀个 HTML 元素就相当于是⼀个矩形的 "盒⼦，这个盒⼦由这⼏个部分构成：
边框 border
内容 content
内边距 padding
外边距 margin
在这里插入图片描述

8.1 边框

基础属性
● 粗细: border-width
● 样式: border-style, 默认没边框。solid： 实线边框 ；dashed： 虚线边框； dotted：点线边框。
● 颜⾊: border-color
在这里插入图片描述
在这里插入图片描述

8.2 内边距

padding 设置内容和边框之间的距离。
默认内容是顶着边框来放置的.。⽤ padding 来控制这个距离，可以给四个⽅向都加上边距。
●padding-top 上
●padding-bottom 下
●padding-left 左
● padding-right 右
可以把多个⽅向的 padding 合并到⼀起. [四种情况都要记住, 都很常⻅]
在这里插入图片描述

8.3 外边距

控制盒⼦和盒⼦之间的距离，可以给四个⽅向都加上边距。
●margin-top 上
● margin-bottom 下
● margin-left 左
● margin-right 右
在这里插入图片描述
块级元素⽔平居中：
前提:
指定宽度(如果不指定宽度, 默认和⽗元素⼀致)
把⽔平 margin 设为 auto

三种写法：
在这里插入图片描述
注意:
这个⽔平居中的⽅式和 text-align 不⼀样。
margin: auto 是给块级元素⽤的。
text-align: center 是让⾏内元素或者⾏内块元素居中的。
对于垂直居中, 不能使⽤ "上下 margin 为 auto " 的⽅式.

去除浏览器默认样式
浏览器会给元素加上⼀些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别。为了保证代码在不同的浏览器上都能按照统⼀的样式显示, 往往我们会去除浏览器默认样式。使⽤通配符选择器即可。
在这里插入图片描述

－_-||
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第四周学习周记——进一步学习CSS
jix_Hu的博客
04-22 393
第四周学习周记前言一、CSS常用属性1. CSS背景2. CSS颜色3. CSS对齐4. CSS边框5. CSS显示二、BootStrap简介总结 前言 在上周初步学习了CSS，了解了CSS的基本概念、语法以及如何创建CSS，这一周将进一步学习CSS的相关属性并初步认识BootStrap。 一、CSS常用属性 CSS的常用属性有很多，在这里我主要学习了如下属性。 1. CSS背景 CSS的背景属性用于定义HTML元素的背景。 背景颜色的background-color属性定义了元素的背景颜色。 页面的背
知识整理之CSS篇
weixin_34029949的博客
02-14 160
CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至：知识整理之HTML篇 CSS Hack CSS Hack就是针对不同的浏览器或不同版本浏览器写特定的CSS样式达到让浏览器兼容的过程。CSS Hack常见的有三种形式：CSS属性Hack、C...
CSS篇
qwredqwr的博客
02-21 85
名词定义 CSS：cascading style sheet 层叠样式表，用于装饰html。 引入方式 行间引入。对应html标签加上属性style 页面级。在head标签写style标签 外部引入。<link rel="stylesheet" type="text/css" href="css文件路径"> 权重 !important（Infinity）>行间样式（1000）>id（100）>class/属性/伪类（10）>标签/伪元素（1）>通配符（0
CSS篇一——（1）
Regina_Cai的博客
09-27 431
CSS是层叠样式表（Cascading Style Sheets）的简称，有时也称之为CSS样式表或级联样式表。CSS也是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS可以美化HTML，使其更加漂亮，布局也更加简单。HTML主要做结构，显示元素内容CSS美化HTML，布局网页CSS最大价值：由HTML专注做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。
CSS总结篇（一）
m0_72975897的博客
08-18 372
网页分成三个部分 结构 20个左右标签，先用一段时间 表现 外在显示的样子 行为 css -层叠样式表 -网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式 而最终我们能看到的只有最上边的一层 -设置网页中元素的样式。——将CSS样式编写到head中的style标签里,通过CSS选择器选中指定元素。4:将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，——声明块紧跟在选择器的后边，使用一对{}括起来，——声明块中实际上就是一组一组的名值对结构，一组一组的名值对我们称为声明，..
html：HTML和CSS学习
03-04
本篇文章将深入探讨这两个重要领域的核心概念、语法以及它们如何协同工作。 ### HTML基础 HTML是一种标记语言，用于创建网页的基本框架。它的主要功能是定义页面上的各个元素，如标题、段落、图片、链接等。HTML由...
Html与Css学习笔记以及经验总结
06-23
这篇学习笔记和经验总结将深入探讨这两者的核心概念，帮助初学者快速掌握这两门技术。 首先，HTML是用于创建网页内容的标记语言。它由一系列元素组成，这些元素通过标签表示，比如`<html>`、`<head>`、`<body>`等。...
CSS基础知识总结-新手入门篇
08-03
**CSS基础知识总结** **1. CSS概述** CSS（Cascading Style Sheets）是层叠样式表，主要用于美化HTML页面。它允许我们独立于内容来定义网页的布局和样式，使得网页设计更加灵活和可控。CSS可以控制网页元素的颜色、...
bootstrap学习心得总结-css样式设计分享
09-22
下面小编就为大家带来一篇bootstrap学习心得总结-css样式设计分享。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS学习之一 CSS样式引入方法
09-25
本篇文章主要探讨了三种常见的CSS样式引入方法：外部样式表、内部样式表和内联样式。 首先，外部样式表是通过`<link>`标签来引入的，这通常是推荐的最佳实践。`<link>`标签有四个关键属性： 1. `rel`属性定义了链接...
一周HTML5以及CSS的学习
i_am_yy的博客
08-14 284
上周学习了HTML5，CSS，JS，对他们有了个初步的认识。 HTML5新增结构标签：section，article, header, hgroup, footer, nav, figure, video, audio, embed, mark, ruby.....等 他们大部分是自定义标签，比如nav是导航标签，可有可无，为了规范化html语言的一种方式 css样式大部分使用的类选择器
html css周志,html & css学习第二周总结（上）
weixin_39912368的博客
06-20 376
第二周在学习css各种选择器还有各种字体样式中度过，也涉及了一些框模型的知识。。然鹅弹幕说还没有步入门槛，emmmm...任重而道远哈～同时补充了些html的标签，主要补充了两类，分别是文本标签和列表标签，比较简单，但是让我更加明白语意标签的含义了。在html中，基本上标签都是语意标签，正如上周总结的那样，html设置的是网页的骨架，这些标签的表现形式是什么不重要，重要的是它的含义，比如h1就是告...
学习周记 CSS合集
m0_47087071的博客
06-17 197
一 css样式 5-1 认识css样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。 如下列代码： p{ font-size:12px; color:red; font-weight:bold; } 使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。 5-2 CSS代码语法 css 样式由选择符和声明组成，而声明又由属性和值...
CSS周报第四周
最新发布
ianarua的博客
01-03 67
学习CSS第四周 动画
第二周周报
m0_62225285的博客
11-28 215
# 选择器 选择器:帮助你精准的选中想要的元素 ## 简单选择器 1.ID选择器 2.元素选择器 3.类选择器 4.通配符选择器 *，选中所有元素 5.属性选择器 根据属性名和属性值来选中元素 ``` [这里面写属性值和属性名] 例如: [href=“https://baidu.com"]{ color：red； } ``` 6.伪类选择器 选中某些元素的某种状态 1) link：超链接未访问时的状态 2) visited:超..
第三周学习周记——了解CSS
jix_Hu的博客
04-01 307
第三周学习周记前言一、CSS简介二、CSS语法1. CSS实例2. CSS注释三、CSS中Id和Class选择器1. Id选择器2. Class选择器四、CSS创建1. 外部样式表2. 内部样式表3. 内联样式总结 前言 在第二周进一步了解了HTML后，有了一定的HTML基础，接下来将进一步学习CSS。 一、CSS简介 CSS指的是层叠样式表(Cascading Style Sheets)，是用来显示HTML等文件样式的计算机语言，而样式通常存储在样式表中，把样式添加到HTML4.0中，是为了解决内容与表现
第一周周报：简单的HTML知识总结及部分CSS基础
qq_61639723的博客
11-20 452
HTML # 文本元素 ## h[块级] h1-h6 ## p[块级] 同上 > lorem，乱数假文，没有任何实际含义的文字 ## span 【无语义】【容器】 没有语义，仅用于设置样式 ## pre 【常用于显示写出的代码(一般套code元素，code表示代码区域)】 【功能本质：默认css属性】（white-space:pre） 预格式化文本元素 空白折叠 # 链接 # 图片元素 # 列表元素 ## 有序列表 ol，父，属性：type（规定序号类型，不建议用，语义
第一个css网页周报
Bella.的博客
11-07 123
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>纳兰.
CSS基础•下篇——学习周记4
weixin_54919878的博客
05-13 280
CSS基础学习二二、CSS7. css 边框8. css尺寸9. css对齐10. css显示附1.有趣的CSS 二、CSS 7. css 边框 8. css尺寸 9. css对齐 10. css显示 附1.有趣的CSS
83.WHUCTF之CSS注入、越权、csrf-token窃取及XSS总结_杨秀璋的专栏-CSDN博客1
08-03
"这篇网络安全自学教程文章主要涵盖了WHUCTF比赛中的CSS注入、越权、csrf-token窃取以及XSS漏洞的总结。作者通过实际的CTF题目分享了学习过程和解题经验，旨在帮助读者理解和防御这些常见的网络安全威胁。" 在网络...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值