CSS入门学习笔记

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

目录

一、CSS简介

1、什么是CSS

二、基本语法规范

三、引入方式

1、内部样式表

2.行内样式表

3.外部样式

四、选择器

1、选择器的功能

2、选择器的种类

基础选择器

标签选择器

类选择器

ID选择器

通配符选择器

复合选择器

后代选择器

子选择器

并集选择器

伪类选择器

五、常用元素属性

六、Chrome调试工具--查看CSS属性

七、元素的显示模式

 八、flex 布局基本概念

一、CSS简介

1、什么是CSS

层叠样式表 (Cascading Style Sheets).
CSS 能够对网页中元素位置的排版进行像素级精确控制 , 实现美化页面的效果 . 能够做到页面的样式和结构分离 . (可以理解为"东方四大邪术"之化妆术)。

二、基本语法规范

1、选择器 + {一条/N条声明}

选择器决定针对谁修改 ( 找谁 )
声明决定修改啥 . ( 干啥 )
声明的属性是键值对 . 使用 ; 区分键值对 , 使用 : 区分键和值 . 
<style>
    p {
        /* 设置字体颜色 */
        color: red;
        /* 设置字体大小 */
        font-size: 30px;
    }
</style>
<p>hello</p>

三、引入方式

1、内部样式表

写在 style 标签中 . 嵌入到 html 内部 .
理论上来说 style 放到 html 的哪里都行 . 但是一般都是放到 head 标签中 .
优点 : 这样做能够让样式和页面结构分离 .
缺点 : 分离的还不够彻底 . 尤其是 css 内容多的时候.

2.行内样式表

通过 style 属性 , 来指定某个标签的样式 .
只适合于写简单样式 . 只针对某个标签生效 . 
<style>
    div {
        color: red;
   }
</style>
<div style="color:green">初识CSS</div>
缺点 : 不能写太复杂的样式 .
这种写法优先级较高 , 会覆盖其他的样式 .

3.外部样式

实际开发中最常用的方式 .
1. 创建一个 css 文件 .
2. 使用 link 标签引入 css  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>初识CSS</div>
</body>


创建style.css

div {
    color: red; 
}
优点 : 样式和结构彻底分离了 .
缺点 : 受到浏览器缓存影响 , 修改之后 不一定 立刻生效 .

四、选择器

1、选择器的功能

选中页面中指定的标签元素. (要先选中元素，才能设置元素的属性)

2、选择器的种类

1. 基础选择器 : 单个选择器构成的
  • 标签选择器
  • 类选择器
  • id 选择器
  • 通配符选择器
2. 复合选择器 : 把多种基础选择器综合运用起来 .
  • 后代选择器
  • 子选择器
  • 并集选择器
  • 伪类选择器

基础选择器

标签选择器

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

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

特点 :
  • 能快速为同一类型的标签都选择出来.
  • 但是不能差异化选择

类选择器

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

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

特点 :
  • 差异化表示不同的标签
  • 可以让多个标签的都使用同一个标签.

ID选择器

  • CSS中使用#开头表示id选择器
  • id 选择器的值和 html 中某个元素的 id 值相同
  • html 的元素 id 不必带 #
  • id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)

通配符选择器

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

复合选择器

后代选择器

又叫包含选择器 . 选择某个父元素中的某个子元素 .
元素 1 元素 2 { 样式声明 }
  • 元素 1 和 元素 2 要使用空格分割
  • 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

子选择器

和后代选择器类似 , 但是只能选择子标签 .
元素 1> 元素 2 { 样式声明 }
  • 使用大于号分割
  • 只选亲儿子, 不选孙子元素

并集选择器

用于选择多组标签 . ( 集体声明 )
元素 1, 元素 2 { 样式声明 }
  • 通过 逗号 分割等多个元素.
  • 表示同时选中元素 1 和 元素 2
  • 任何基础选择器都可以使用并集选择器.
  • 并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)

伪类选择器

1) 链接伪类选择器
  1. a:link 选择未被访问过的链接
  2. a:visited 选择已经被访问过的链接
  3. a:hover 选择鼠标指针悬停上的链接
  4. a:active 选择活动链接(鼠标按下了但是未弹起)
2) :force 伪类选择器
选取获取焦点的 input 表单元素 .

五、常用元素属性

字体属性、文字样式、文本属性、背景属性等等，具体可参照https://www.w3school.com.cn/cssref/index.asp 进行学习。

六、Chrome调试工具--查看CSS属性

打开浏览器

有两种方式可以打开 Chrome 调试工具
  • 直接按 F12 键
  • 鼠标右键页面 => 检查元素

标签页含义

  • elements 查看标签结构
  • console 查看控制台
  • source 查看源码+断点调试
  • network 查看前后端交互过程
  • application 查看浏览器提供的一些扩展功能(本地存储等)
  • Performance, Memory, Security, Lighthouse

七、元素的显示模式

在 CSS 中 , HTML 的标签的显示模式有很多 .
此处只重点介绍两个 :
  • 块级元素

常见的块级元素：h1-h6、p、div、ul、ol、li.....

特点：独占一行 、高度, 宽度, 内外边距, 行高都可以控制、宽度默认是父级元素宽度的 100% (和父元素一样宽) 、是一个容器(盒子), 里面可以放行内和块级元素

  • 行内元素

常见的行内元素：a、strong、b、em、i、del、s、span...

特点：不独占一行, 一行可以显示多个 、设置高度, 宽度, 行高无效 、左右外边距有效(上下无效). 内边距有效、默认宽度就是本身的内容 、行内元素只能容纳文本和其他行内元素, 不能放块级元素

  • 盒模型

每一个 HTML 元素就相当于是一个矩形的 "盒子"

这个盒子由这几个部分构成：
  • 边框 border
  • 内容 content
  • 内边距 padding
  • 外边距 margin

 八、flex 布局基本概念

flex 是 flexible box 的缩写 . 意思为 " 弹性盒子 ".
任何一个 html 元素 , 都可以指定为 display:flex 完成弹性布局 .
flex 布局的本质是给父盒子添加 display:flex 属性 , 来控制子盒子的位置和排列方式 .

Crush.mm
关注
html+css入门学习笔记
01-24
本入门学习笔记将帮助初学者理解这两门技术的基本概念，逐步掌握创建动态、美观网页的方法。 HTML是用于创建网页内容的语言，它通过一系列标签来定义网页的各个部分，如标题、段落、图片、链接等。在HTML5中，新增...
css入门学习笔记1 基础选择器
05-25
本篇将详细讲解四种基础选择器：标签选择器、类选择器、ID选择器和通配符选择器。 1. 标签选择器： ...例如，`Div {Color: ...这些基础选择器和属性是CSS入门的基础，熟练掌握它们能帮助你更好地控制网页的布局和样式。
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
前端css基础学习笔记
a_big_panda的博客
01-22 1010
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
css入门学习笔记
小乔不掉发的博客
04-06 1066
我是目录标题一、css 语法规范：二、css基础选择器：1、标签选择器：2、类选择器：3、id 选择器：4、通配符选择器：三、CSS 字体属性：1、文本字体：2、字体大小：3、字体粗细：4、文本样式：四、css 文本属性：1、文本颜色：2、文本对齐方式：3、装饰文本：4、文本缩进：5、背景:6、行间距：五、外部样式表：六、CSS复合选择器：（重要）1、后代选择器：2、子选择器：3、并集选择器：4、focues伪类选择器：七、元素显示模式转换：八、盒子模型：1、组成：2、边框：3、内边距：4、外边距： 一、c
CSS基础学习笔记（一）
weixin_40971244的博客
07-09 738
CSS基础学习笔记（一）一、CSS简介1. CSS语法规范二、CSS基本使用2.1 CSS基础选择器2.1.1 CSS选择器作用2.1.2 CSS选择器分类2.1.3 CSS标签选择器2.1.4 CSS类选择器2.1.5 Id选择器2.1.6 通配符选择器2.1.7 选择器总结2.2 CSS字体属性2.2.1 字体系列（font-family）2.2.2 字体大小（font-size）2.2.3 字体粗细（font-weight)2.2.4 字体样式（font-style)2.2.5 font复合属性2.2
尚硅谷CSS学习笔记
MissXu666的博客
10-10 1403
等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。③维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。我们在编码时，不用过于关注浏览器的私有前缀，不用去记忆，去查询，因为常用的css3 新特性，主流浏览器都是支持的，对于老版本浏览器，我们也可以借助现代构建工具，去帮我们添加私有前缀。
CSS入门学习笔记+案例(1)
2401_83915812的博客
04-01 901
盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：width 宽度height 高度border 边框padding 内边距margin 外边距通过position属性实现对元素的定位，有四种定位方式常用取值：取值含义说明static默认值按照常规文档流进行显示relative相对定位相对于标签原来的位置进行的定位absolute绝对定位相对于第一个非static定位的父标签的定位fixed固定定位相对于浏览器窗品进行定位。
CSS学习笔记
u011259405的博客
09-24 1055
自用CSS学习笔记
CSS基础知识学习笔记
qq_65173651的博客
06-14 486
CSS外观数学学习笔记
HTML&CSS入门学习笔记
最新发布
10-10
HTML&CSS入门学习笔记
css基础学习笔记之字体图标
01-08
一、字体图标的运用克服了精灵图的缺点： 1.图片文件还是比较大的 2.像素图片放大或缩小会失真 3.一旦完整精灵图片制作完成后想要更换非常复杂 二、字体图标–iconfont：展示的是图片，本质是属于字体，字体图标有三...
css入门学习笔记补充 补充了一些选择器
05-25
在初学者的CSS学习过程中，了解并掌握各种选择器至关重要。本篇笔记将补充一些CSS选择器的知识，帮助你更好地理解和应用它们。 1. **属性选择器**： 属性选择器允许我们根据元素的特定属性来选择元素。例如，`E...
CSS实现文本超出隐藏并显示省略号
everfoot的博客
10-02 575
通过结合使用和这三个CSS属性，我们可以轻松地在CSS中实现文本超出隐藏并显示省略号的效果。这一技巧在处理长文本、保持页面整洁和美观方面非常有用。希望本文的介绍和示例能帮助你更好地理解和应用这一技术。
【CSS in Depth 2 精译_044】第七章 响应式设计概述
PeacefulWinter的博客
10-02 1194
本篇为《CSS in Depth》全新第2版第7章响应式设计的概述部分，重点介绍了前端响应式设计理念诞生的相关背景。篇幅限制，本篇暂不与7.1节合并。学习过程中可以先准备好相应的章节源码，以便后续跟随介绍进行实操演练。建议先收藏。
使用CSS实现酷炫加载
qq_33003143的博客
10-03 947
使用CSS实现炫酷loading动画
CSS弹性布局
2401_82561004的博客
10-09 918
Flex 是 Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前，几乎所有的浏览器都支持 Flex布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值