我的CSS学习笔记

最新推荐文章于 2024-11-01 16:54:21 发布
最新推荐文章于 2024-11-01 16:54:21 发布
阅读量158 收藏
点赞数
分类专栏： CSS 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lujiebin/article/details/105957002
版权

CSS介绍

CSS是什么？CSS，即“Cascading Style Sheet（层叠样式表）”，是用来控制网页的外观的一门技术。

HTML、CSS和JavaScript是前端技术中最核心的三个元素。HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。我们已经在HTML入门教程中的前端技术简介这一节详细讲解了这三者的区别，大家可以回去查看一下。

HTML、CSS和JavaScript的关系如下：

“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”

官方中文文档

CSS内容

CSS引入的三种方式

在HTML中引入CSS共有3种方式：

1.外部样式； 2.内部样式； 3.内联样式；

外部样式
外部样式表在单独文件中定义，并且在标签对中使用link标签来引用。 举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title></title>
   <!--在HTML页面中引用文件名为index的css文件-->
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>   
    <div></div>
</body>
</html>

说明：外部样式表都是在head标签内使用link标签来引用的。

内部样式
内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在标签对是放在标签对内的。 举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
  <title></title>    
  <!--这是内部样式表，CSS样式在style标签中定义-->    
  <style type="text/css">
          p{
          color:Red;
          }  
          a,h1,p{
          color:Red;
          }    
   </style>
 </head>
 <body>   
  <p>学习网</p>  
  <p>学习网</p>
 </body>

内联(行内)样式

内联样式表，也是把CSS代码和HTML代码放在同一个文件中，但是跟内部样式表不同，CSS样式不是在标签对中定义，而是在标签的style属性中定义。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p style="color:Red;font-size:50px;background:green;">学习网</p>
    <p style="color:Red; ">学习网</p>
    <p style="color:Red; ">学习网</p>
</body>
</html>

CSS选择器

在这里插入图片描述

/* 通配选择器 */
* {
  color: red;
  margin: 0;
  padding: 0;
}
body{
  margin: 0;
  padding: 0;
}

基本内容

color：前景色

.box1{
	color: red;
	text-decoration: underline;
	border-width: 10px;
	border-style: solid;
	}

视图展示
font-size：文字的大小

background-color:背景颜色

width/height:宽度和高度

一切皆盒子

CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：

  • padding：即内边距，围绕着内容（比如段落）的空间。
  • border：即边框，紧接着内边距的线。
  • margin：即外边距，围绕元素外部的空间。
    在这里插入图片描述
    这里还使用了：
  • width ：元素的宽度
  • background-color ：元素内容和内边距底下的颜色
  • color ：元素内容（通常是文本）的颜色
  • text-shadow ：为元素内的文本设置阴影
  • display ：设置元素的显示模式（暂略）
lujiebin
关注
专栏目录
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学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
我的HTML+Css学习笔记
02-25
这份“我的HTML+Css学习笔记”无疑是对于初学者来说极好的资源，它涵盖了从基础到进阶的重要概念。 HTML是网页内容的结构语言，通过一系列标签来定义网页的各个部分，如`<head>`、`<body>`、`<h1>`至`<h6>`的标题、...
CSS学习笔记
ts1296797634的博客
09-23 1832
CSS）指的是层叠样式表，可以同时控制多张网页的布局，外部样式表存储在 CSS 文件中，即实现一张HTML页面可切换多个样式。CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。CSS 从 HTML 页面中删除了样式格式！样式定义通常保存在外部 .css 文件中。通过使用外部样式表文件，更改一个文件即可更改整个网站的外观！
CSS入门学习笔记+案例
热门推荐
itboy
06-16 31万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
前端css基础学习笔记
a_big_panda的博客
01-22 1037
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
CSS 学习笔记
weixin_42098295的博客
05-06 1279
定位（Positioning）：static, relative, absolute, fixed, sticky。组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。媒体查询（Media Queries）：根据不同的屏幕尺寸或设备特性应用不同的样式。属性选择器：根据元素属性选择，如 [type="text"]。Grid：二维布局模型，提供网格系统，进行更复杂的布局设计。伪元素选择器：如 ::before, ::after。
css学习笔记1
qq_42236791的博客
12-12 1002
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
CSS学习笔记目录
wz_1992的博客
05-30 521
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2536
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
【CSS学习笔记】
weixin_45037690的博客
08-12 864
Cascading Style Sheet 层叠样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动CSS1.0CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1：浮动，定位CSS3.0：圆角、阴影、动画…浏览器兼容性。
菜鸟教程CSS学习笔记（04）
2301_79999289的博客
09-13 1851
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。.marked{ }: 为所有 class=“marked” 的元素指定一个样式。CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。
css学习笔记之展开列表图标动画
weixin_65808257的博客
04-07 2520
蓝色界面”风格的填充的星图标欢迎下载填充的星矢量图标，“蓝色界面”风格。格式有png、svg、pdf、html代码。可对填充的星图标、符号进行修改、调整大小、修改颜色。今天在这个网站看到了上面类似的效果，然后就想弄一个，然后就有了上面的。
css经典学习笔记.zip
11-01
综上所述，《CSS经典学习笔记》旨在提供一个全面的CSS学习路径，无论你是初学者还是有经验的开发者，都能从中受益，提升你的CSS技能和网页设计能力。通过深入实践和不断探索，你会发现CSS不仅可以打造出美观的界面，...
【前端基础】CSS进阶
qq_41413652的博客
11-01 758
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
第七章利用CSS和多媒体美化页面
2402_83227353的博客
10-29 864
用这个属性可以同时设置列表型属性（list一style-type），列表项图片属性（list-style-image）和列表项位置属性（list-style-position）。border-spacing 属性作用等同于标签属性 cellspacing，即当表格边框独立时（border-collapse 属性等于separate），相邻单元格边框之间的横向和纵向的间距。caption-side 属性设置或检索表格标题在表格的哪一边，此属性必须和表格的caption标签同时使用。
第八章 利用CSS制作导航菜单课后习题
2302_80786141的博客
11-01 522
【代码】第八章 利用CSS制作导航菜单课后习题。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2048
【代码】炫酷的登录框!(附源码)
CSS例子: 横向排列的格子
最新发布
11-01 264
【代码】CSS例子: 横向排列的格子。
CSS学习笔记：WEB开发中的样式精华
"很好的css学习笔记，pdf格式（64页），包含了CSS+DIV的学习内容，适合初学者逐步了解和掌握CSS技术。" 这篇CSS学习笔记详细介绍了CSS的基础知识，包括其起源、作用以及如何改善HTML页面的设计。CSS，即层叠样式表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值