前端-CSS3学习笔记一

最新推荐文章于 2024-07-23 16:10:02 发布
最新推荐文章于 2024-07-23 16:10:02 发布
阅读量96 收藏
点赞数
分类专栏： 前端-CSS3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45068245/article/details/122168044
版权
本文是关于CSS3的学习笔记，介绍了CSS的作用、分类及优缺点，包括内联样式、内部样式表和外部样式表。讲解了CSS的基本语法、注释，以及常用的选择器，如元素选择器、ID选择器、类选择器和通配选择器，帮助初学者快速掌握CSS3的基础知识。
摘要由CSDN通过智能技术生成

日期：2021/12/26

所看视频链接：B站尚硅谷

内容：

P27_CSS简介

CSS,层叠样式表（Cascading Style Sheets）
后缀.css
1.作用：
        修改元素的样式
2.分类：
        1.内联样式（行内样式）
                在标签内部通过style属性来设置元素的样式

		<p style="color:red;font-size:60px;">少小离家老大回，乡音无改鬓毛衰</p>

P28_CSS编写的位置

连接P27
                问题：
                        使用内联样式，样式只能对一个标签生效
                                当用于多个元素时，样式发生变化，必须一个一个修改，非常不方便
        注：开发时绝对不要使用内联样式
        2.内部样式表
                将样式编写到head中的style标签里

		<head>
			<style>
				p{
					color:red;
					font-size:50px;
				}
			</style>
		</head>

                        可以通过CSS的选择器来选中元素并为其设置各种样式
                        可以同时为多个标签设置样式，并且修改时只需要修改一处即可
                内部样式表更加方便对样式进行复用
                问题：
                        只能对一个网页起作用，不能跨页面进行复用
        3.外部样式表
                可以将CSS样式编写到一个外部的CSS文件
                        然后通过link标签来引入外部的CSS文件
                外部样式表需要通过link标签进行引入
                        意味着只要想使用这些样式的网页都可以引用
                        可以在不同页面之间进行复用
                将样式编写到外部的CSS文件中，可以使用浏览器的缓存机制
                        从而加快网页的加载速度，提高用户的体验

		<link rel="stylesheet" href="./xxx.css" />

                        stylesheet——样式表
                1.属性：
                        rel        当前文档与被链接文档的关系
                        href      被链接文档位置

P29_CSS的基本语法

1.注释
        /*注释内容*/
        CSS中的注释，注释中的内容会自动被浏览器所忽略
2.基本语法
        选择器 声明块
                选择器，通过选择器可以选中页面中的指定元素
                        例如p的作用就是选中页面中所有的p元素
                        p{}
                声明块，通过声明块来指定要为元素设置的样式
                        声明块由一个一个的声明组成
                        声明是一个名值对结构
                                一个样式名对应一个样式值，名和值之间以:连接，以;结尾

				p{
					color:red;
				}

P30_常用选择器

1.元素选择器
        作用：根据标签名来选中指定的元素
        语法：标签名{}
        例子：p{}、h1{}、div{}
2.id选择器（唯一性）
        作用：根据元素的id属性值选中一个元素
        语法：#id属性值{}
        例子：#box{}、#red{}
3.类选择器（class选择器）
        作用：根据元素的class属性值选中一组元素
        语法：.class属性值{}
        例子：.blue{}
注：可以重复使用
        可以使用class属性为元素分组
        也可以为一个元素指定多个class属性（空格隔开）

		<p class="blue abc">落霞与孤鹜齐飞</p>

4.通配选择器
        作用：选中页面中的所有元素
        语法：*
        例子：*{}

钟离酉月
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css前端学习笔记.zip
01-01
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
前端学习笔记-黑马程序员CSS
01-09
前端学习笔记-黑马程序员CSS CSS 是一种标记语言，主要用于美化页面，美化 HTML，让画面更美观。总结来说，HTML 主要做结构，显示元素内容，而 CSS 负责美化，让结构（HTML）与样式（CSS）相分离。 一、CSS 语法...
CSS语法
MondayCui的博客
09-13 85
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS语法</title> <style> /* CSS中的注释，注释中的内容会自动被浏览器所忽略 CSS的基本语法: 选择器 声明块 选择器，通过选择
CSS—内联样式（行内样式）、内部样式、外部样式、选择器
Natural_mengniu的博客
06-24 2万+
文章目录CSS简介使用CSS修改元素样式方式方式一（==内联样式或行内样式==）方式二（==内部样式表==）方式三（==外部样式表==）全场最佳语法选择器元素选择器id选择器（id不能重复，即使出现相同效果）类选择器（class：与id作用相似，但是可重复）通配选择器交集选择器并集选择器（选择器分组）关系选择器子元素选择器后代元素选择器兄弟选择器属性选择器伪类选择器声明块 网页分为： 结构（html） 表现（CSS） 行为（JavaScript） CSS 简介 层叠样式表 网页实际时一个多层的结构，通过C
零基础CSS入门教程(24)–内联/内部/外部样式
程序员大阳
11-10 1284
点此查看全部文字教程、视频教程、源代码 本教程已配套视频教程，点此查看 本文目录1. 前言2. 内联样式3. 内部样式表4. 外部样式表5. 完整实例6. 小结 1. 前言 本篇比较轻松，没有具体的CSS样式语法，只是介绍下CSS代码的存放位置。来吧，跟我了解下。 2. 内联样式 内联样式，通过元素的style属性，直接在元素上编写： <!-- 内联样式 --> <div style="color:blue;font-size:2em;"> 努力努力再
前端-CSS3学习笔记九
weixin_45068245的博客
01-23 411
日期：2022/1/22 P63_简单的布局 1.头部         导航栏、logo 2.主体 3.底部
前端css基础学习笔记
a_big_panda的博客
01-22 919
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
【Web前端学习笔记】-CSS3-文本属性(text)
weixin_46681936的博客
04-27 421
学习了CSS3中有关文本属性的四大知识点
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
【前端学习笔记】12-css动画学习总结之3D立体盒子
SevgiliD的博客
07-04 268
css动画学习总结—3D立体盒子
【web前端HTML+CSS+JS】--- CSS学习笔记02
m0_67357141的博客
07-07 721
如果有多个选择器共同作用的话，只有优先级最高那层样式决定最终的效果。
前端---CSS篇（详解CSS）
stu_kk的博客
11-28 909
css学习笔记分享
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
前端三件套css学习笔记分享
02-24
前端三件套css学习笔记分享
html+css学习笔记 前端 CSS html
11-02
学习了一个月的前端笔记
CSS3雷达扫描效果
u011626414的专栏
07-23 477
这个示例创建了一个非常基础的雷达扫描效果。您可以根据需要调整颜色、大小、旋转速度等属性，以及添加更多的细节和效果。要创建一个CSS3的雷达扫描效果，我们可以使用CSS的动画（元素在2秒内从0度旋转到360度，从而实现连续的扫描效果。属性设置为50%，这会将扫描线的顶部置于雷达圆的中心，而。的圆形div作为雷达的主体，并在其中放置了一个名为。则会将其向上移动自身高度的一半，从而实现垂直居中。的垂直线，这条线将作为雷达的扫描线。，确保旋转的起点在元素的顶部中心。进行旋转，模拟雷达扫描的效果。
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
HTML5+CSS3+JS前端开发学习笔记
"这是一份综合性的Web前端学习资料，涵盖了HTML5、...这份学习笔记为初学者和进阶者提供了一个全面的Web前端学习平台，从基础知识到高级特性，从理论到实践，帮助读者掌握前端开发的核心技能，并了解HTML5带来的创新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值