CSS学习笔记

最新推荐文章于 2024-07-22 19:24:41 发布
最新推荐文章于 2024-07-22 19:24:41 发布
阅读量494 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haisdw/article/details/120773232
版权
这篇博客详细介绍了CSS的基础知识，包括CSS的引入、基本语法和选择器。深入讲解了CSS在HTML中的应用方式，以及如何通过CSS设置文本和图像样式。此外，还涵盖了CSS的高级特性如复合选择器、盒模型、浮动与定位，以及固定和变宽度布局的实现方法。通过一系列实例，帮助读者掌握CSS在网页制作中的应用。
摘要由CSDN通过智能技术生成

CSS学习笔记

1、CSS概述

1.CSS指层叠样式表，HTML理解成身体，CSS理解为衣服

1.1、CSS引入

<html>
<head>
<meta   charset="UTF-8">
<title>CSS引入</title>
<style type="text/css">
   p{
	   font-size:20px;
	   color:red;
   }
 </style>
</head>
<body>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<p>段落四</p>
</body>
</html>

在这里插入图片描述

2、CSS核心基础

2.1、CSS基本语法

P:选择器 {color:red; font-size:20px} color:属性 red：值

<html>
<head>
<meta   charset="UTF-8">
<title>CSS基本语法</title>
<style type="text/css">
   p{
      color:red;
      font-size:20px;
   }
</style>
</head>
<body>
   <p>我爱王大凤！爱你么么da</p>
</body>
</html>

在这里插入图片描述

2.2、CSS基本选择器

2.2.1、类别选择器

<html>
<head>
<meta   charset="UTF-8">
<title>类别选择器</title>
<style type="text/css">
   .r{
      color:red;
      font-size:20px;
   }
      .b{
      color:blue;
      font-size:20px;
   }
</style>
</head>
<body>
   <p class="r">我爱王大凤！爱你么么da</p>
   <p class="b">我爱王大凤！爱你么么da</p>
</body>
</html>

在这里插入图片描述

2.2.2、ID选择器

<html>
<head>
<meta   charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
   #p1{
      color:red;
      font-size:20px;
   }
   #p2{
      color:blue;
      font-size:20px;
   }
</style>
</head>
<body>
   <p id="p1">我爱王大凤！爱你么么da</p>
   <p id="p2">我爱王大凤！爱你么么da</p>
</body>
</html>

在这里插入图片描述

2.3、在HTML中引入CSS的方法

2.3.1、行内样式

<html>
<head>
<meta   charset="UTF-8">
<title>行内样式</title>
</head>
<body>
   <p style="color:red;font-size:20px;">行内样式</p>
</body>
</html>

在这里插入图片描述

2.3.2、内嵌式

<html>
<head>
<meta   charset="UTF-8">
<title>内嵌式</title>
<style type="text/css">
   p{
      color:red;
      font-size:20px;
   }
</style>
</head>
<body>
   <p>内嵌式</p>
</body>
</html>

在这里插入图片描述

2.3.3、链接式

<html>
<head>
<meta   charset="UTF-8">
<title>链接式</title>
<link  href="red.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>链接式</p>
</body>
</html>

在这里插入图片描述

2.3.4、导入样式

  <html>
<head>
<meta   charset="UTF-8">
<title>导入式</title>
<style type="text/css">
@import Url(yellow.css)
   </style>
</head>
<body>
   <p>导入式</p>
</body>
</html>

在这里插入图片描述

2.3.5、几种方式的优先级比较

<html>
<head>
<meta   charset="UTF-8">
<title>优先级比较</title>
<link  href="red.css" type="text/css" rel="stylesheet">
<style type="text/css">
   p{
      color:blue;
      font-size:20px;
   }
   @import Url(yellow.css)
</style>
</head>
<body>
<p style="color:green;font-size:20px;">出现什么颜色就最高</p>
<p>行内样式&gt;链接式&gt;内嵌式&gt;导入式（链接式在后面）<br/>
行内样式&gt;内嵌式&gt;导入式&gt;链接式（链接式在前面）<br/>
总的规律：后面的样式会覆盖前面的样式</p>
</body>
</html>

在这里插入图片描述

3、网页制作小实践

3.1、网页裸奔

<html>
<head>
<meta   charset="UTF-8">
<title>网页裸奔</title>
<boby>
<h1>Java之父一般指詹姆斯·高斯林</h1>
<img src="http://pic.gerenjianli.com/mingren/2473/27284242.jpg">
<p>
詹姆斯·高斯林 （James Gosling）是一名软件专家，1955年5月19日出生于加拿大，Java编程语言的共同创始人之一，一般公认他为“Java之父”。
1977年获得了加拿大卡尔加里大学计算机科学学士学位，1983年获得了美国卡内基梅隆大学计算机科学博士学位。博士论文的题目是："The Algebraic Manipulation of Constraints"。毕业后到IBM工作，设计IBM第一代工作站NeWS系统，但不受重视。后来转至Sun公司。1990年，与Patrick Naughton和Mike Sheridan等人合作“绿色计划”，后来发展一套语言叫做“Oak”，后改名为Java。1994年底，James Gosling在硅谷召开的“技术、教育和设计大会”上展示Java程式。2000年，Java成为世界上最流行的电脑语言。
2009年四月，Sun被甲骨文公司并购。高斯林于2010年四月时宣布从甲骨文公司离职。</p>
<p>2011年3月29日，高斯林在个人博客上宣布将加入Google。</p>
<p>2011年8月30日，仅仅加入Google数月之后的高斯林就在个人博客上宣布离开Google，加盟一家从事海洋机器人研究的创业公司Liquid Robotics，担任首席软件架构师。
在2011年5月建立的Scala公司Typesafe Inc.， 高斯林被聘请为公司顾问。</p>
</boby>
</html>

在这里插入图片描述

3.2、设置标题

<html>
<head>
<meta   charset="UTF-8">
<title>设置标题</title>
<style type="text/css">
   /*
   用css对页面进行美化
   */
   /*设置标题*/
   h1{
   color:white;
   background-color:gray;
   text-align:center;
   padding:20px;
   }
</style>
<boby>
<h1>Java之父一般指詹姆斯·高斯林</h1>
<img src="http://pic.gerenjianli.com/mingren/2473/27284242.jpg">
<p>
詹姆斯·高斯林 （James Gosling）是一名软件专家，1955年5月19日出生于加拿大，Java编程语言的共同创始人之一，一般公认他为“Java之父”。
1977年获得了加拿大卡尔加里大学计算机科学学士学位，1983年获得了美国卡内基梅隆大学计算机科学博士学位。博士论文的题目是："The Algebraic Manipulation of Constraints"。毕业后到IBM工作，设计IBM第一代工作站NeWS系统，但不受重视。后来转至Sun公司。1990年，与Patrick Naughton和Mike Sheridan等人合作“绿色计划”，后来发展一套语言叫做“Oak”，后改名为Java。1994年底，James Gosling在硅谷召开的“技术、教育和设计大会”上展示Java程式。2000年，Java成为世界上最流行的电脑语言。
2009年四月，Sun被甲骨文公司并购。高斯林于2010年四月时宣布从甲骨文公司离职。</p>
<p>2011年3月29日，高斯林在个人博客上宣布将加入Google。</p>
<p>2011年8月30日，仅仅加入Google数月之后的高斯林就在个人博客上宣布离开Google，加盟一家从事海洋机器人研究的创业公司Liquid Robotics，担任首席软件架构师。
在2011年5月建立的Scala公司Typesafe Inc.， 高斯林被聘请为公司顾问。</p>
</boby>
</html>

在这里插入图片描述

3.3、设置图片


<html>
<head>
<meta   charset="UTF-8">
<title>设置图片</title>
<style type="text/css">
   /*
   用css对页面进行美化
   */
   /*设置标题*/
   h1{
   color:white;
   background-color:gray;
   text-align:center;
   padding:20px;
   }
   /* 设置图片 */
   img{
   width:150px;
   height:180px;
   float:left；
   margin:5px;
   }
</style>
<boby>
<h1>Java之父一般指詹姆斯·高斯林</h1>
<img src="http://pic.gerenjianli.com/mingren/2473/27284242.jpg">
<p>
詹姆斯·高斯林 （James Gosling）是一名软件专家，1955年5月19日出生于加拿大，Java编程语言的共同创始人之一，一般公认他为“Java之父”。
1977年获得了加拿大卡尔加里大学计算机科学学士学位，1983年获得了美国卡内基梅隆大学计算机科学博士学位。博士论文的题目是："The Algebraic Manipulation of Constraints"。毕业后到IBM工作，设计IBM第一代工作站NeWS系统，但不受重视。后来转至Sun公司。1990年，与Patrick Naughton和Mike Sheridan等人合作“绿色计划”，后来发展一套语言叫做“Oak”，后改名为Java。1994年底，James Gosling在硅谷召开的“技术、教育和设计大会”上展示Java程式。2000年，Java成为世界上最流行的电脑语言。
2009年四月，Sun被甲骨文公司并购。高斯林于2010年四月时宣布从甲骨文公司离职。</p>
<p>2011年3月29日，高斯林在个人博客上宣布将加入Google。</p>
<p>2011年8月30日，仅仅加入Google数月之后的高斯林就在个人博客上宣布离开Google，加盟一家从事海洋机器人研究的创业公司Liquid Robotics，担任首席软件架构师。
在2011年5月建立的Scala公司Typesafe Inc.， 高斯林被聘请为公司顾问。</p>
</boby>
</html>

在这里插入图片描述

3.4、设置正文

<html>
<head>
<meta   charset="UTF-8">
<title>设置正文</title>
<style type="text/css">
   /*
   用css对页面进行美化
   */
   /*设置标题*/
   h1{
   color:white;
   background-color:gray;
   text-align:center;
   padding:20px;
   }
   /* 设置图片 */
   img{
   width:150px;
   height:180px;
   float:left；
   margin:5px;
   }
   /* 设置正文 */
   p{
   font-size:12px;
   line-height:1.5;
   text-indent:2em;
   }
</style>
<boby>
<h1>Java之父一般指詹姆斯·高斯林</h1>
<img src="http://pic.gerenjianli.com/mingren/2473/27284242.jpg">
<p>
詹姆斯·高斯林 （James Gosling）是一名软件专家，1955年5月19日出生于加拿大，Java编程语言的共同创始人之一，一般公认他为“Java之父”。
1977年获得了加拿大卡尔加里大学计算机科学学士学位，1983年获得了美国卡内基梅隆大学计算机科学博士学位。博士论文的题目是："The Algebraic Manipulation of Constraints"。毕业后到IBM工作，设计IBM第一代工作站NeWS系统，但不受重视。后来转至Sun公司。1990年，与Patrick Naughton和Mike Sheridan等人合作“绿色计划”，后来发展一套语言叫做“Oak”，后改名为Java。1994年底，James Gosling在硅谷召开的“技术、教育和设计大会”上展示Java程式。2000年，Java成为世界上最流行的电脑语言。
2009年四月，Sun被甲骨文公司并购。高斯林于2010年四月时宣布从甲骨文公司离职。</p>
<p>2011年3月29日，高斯林在个人博客上宣布将加入Google。</p>
<p>2011年8月30日，仅仅加入Google数月之后的高斯林就在个人博客上宣布离开Google，加盟一家从事海洋机器人研究的创业公司Liquid Robotics，担任首席软件架构师。
在2011年5月建立的Scala公司Typesafe Inc.， 高斯林被聘请为公司顾问。</p>
</boby>
</html>

在这里插入图片描述

3.5、设置整体页面

<html>
<head>
<meta   charset="UTF-8">
<title>设置整体页面</title>
<style type="text/css">
   /*
   用css对页面进行美化
   */
   /* 设置整体页面 */
   boby{
       margin:0px;
       backgrounnd-color:#DFDFDF;
   }
   /* 设置标题 */
   h1{
   color:white;
   background-color:gray;
   text-align:center;
   padding:20px;
   }
   /* 设置图片 */
   img{
   width:150px;
   height:180px;
   float:left；
   margin:5px;
   }
   /* 设置正文 */
   p{
   font-size:12px;
   line-height:1.5;
   text-indent:2em;
   }
</style>
<boby>
<h1>Java之父一般指詹姆斯·高斯林</h1>
<img src="http://pic.gerenjianli.com/mingren/2473/27284242.jpg">
<p>
詹姆斯·高斯林 （James Gosling）是一名软件专家，1955年5月19日出生于加拿大，Java编程语言的共同创始人之一，一般公认他为“Java之父”。
1977年获得了加拿大卡尔加里大学计算机科学学士学位，1983年获得了美国卡内基梅隆大学计算机科学博士学位。博士论文的题目是："The Algebraic Manipulation of Constraints"。毕业后到IBM工作，设计IBM第一代工作站NeWS系统，但不受重视。后来转至Sun公司。1990年，与Patrick Naughton和Mike Sheridan等人合作“绿色计划”，后来发展一套语言叫做“Oak”，后改名为Java。1994年底，James Gosling在硅谷召开的“技术、教育和设计大会”上展示Java程式。2000年，Java成为世界上最流行的电脑语言。
2009年四月，Sun被甲骨文公司并购。高斯林于2010年四月时宣布从甲骨文公司离职。</p>
<p>2011年3月29日，高斯林在个人博客上宣布将加入Google。</p>
<p>2011年8月30日，仅仅加入Google数月之后的高斯林就在个人博客上宣布离开Google，加盟一家从事海洋机器人研究的创业公司Liquid Robotics，担任首席软件架构师。
在2011年5月建立的Scala公司Typesafe Inc.， 高斯林被聘请为公司顾问。</p>
</boby>
</html>

在这里插入图片描述

4、CSS高级特性

4.1、复合选择器

4.1.1、“交集”选择器

<html>
<head>
<meta   charset="UTF-8">
<title>“交集”选择器</title>
<style type="text/css">
   p{
     font-size:30px;
   }
   p.c{
      text-decoration:underline;
   }
   .c{
      color:blue;
   }
</style>
<boby>
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3" class="c">p3</p>
<h1 id="h1" class="c">h1</h1>
<h2 id="h2">h2</h2>
<div id="d1">d1</div>
</boby>
</html>

在这里插入图片描述

4.1.2、“并集”选择器

<html>
<head>
<meta   charset="UTF-8">
<title>“并集”选择器</title>
<style type="text/css">
   p{
     font-size:30px;
   }
   p.c{
      text-decoration:underline;
   }
   .c{
      color:blue;
   }
   p,h1,h2,.c,#d1{
      background-color:gray;
   }
</style>
<boby>
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3" class="c">p3</p>
<h1 id="h1" class="c">h1</h1>
<h2 id="h2">h2</h2>
<div id="d1">d1</div>
</boby>
</html>

在这里插入图片描述

4.1.3、“后代”选择器

<html>
<head>
<meta   charset="UTF-8">
<title>“后代”选择器</title>
<style type="text/css">
   span{
       color:blue;
   }
   p span{
        color:red;
   }
</style>
<boby>
<div>一代<p>二代<span>三代</span></p></div><br/>
<span>一层一代</span><br/>
<span>也是一层一代</span><br/>
</boby>
</html>

在这里插入图片描述

4.1.4、“子”选择器

<html>
<head>
<meta   charset="UTF-8">
<title>“子”选择器</title>
<style type="text/css">
   div>span{
        color:pink;
   }
</style>
<boby>
<div>
   <span>儿子</span>
   <p><span>孙子</span></p>
</boby>
</html>

在这里插入图片描述

4.2、CSS的继承特性

<html
最低0.47元/天 解锁文章
学习挣大钱
关注
CSS基础学习笔记一（详细）
Speed_Pig的博客
03-04 3064
文章目录初识CSS 初识CSS
CSS 学习笔记
abcdyjwll的博客
03-24 162
CSS, 主讲：姚景苇 一、CSS简介 1.什么是CSS CSS，Cascading Style Sheet层叠样式表 是一组样式设置规则，用于控制页面的外观样式 2.为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3.CSS作用 页面外观美化 布局和定位 二、基本用法 1.CSS语法 <head> <s...
css 笔记整理
css 笔记整理
01-24 198
html是什么 html（Hypertext Markup Language）—— 结构 超文本 标记 标签 css 凡是写在标签名后面的都是标签的属性 可以自动刷新浏览器 属性名称 = “属性值” border <!-- border 边框的粗细（宽度） 边框的样式 solid d
CSS笔记
最新发布
m0_73844340的博客
07-22 1035
标签选择器
【狂神说】CSS学习笔记
pan_h1995的博客
05-07 8362
参考B站狂神说视频教程
css 笔记
永远是死循环
06-08 192
此时所有子元素都可以平铺                 .user_list{         display: flex;                     flex-wrap: wrap;          li{ //          flex: 1;             width: 25%;             text-align...
【css笔记】
weixin_58387292的博客
03-11 767
css笔记
css学习笔记
人情世故54240871的博客
02-16 146
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
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学习笔记 ...
HeadFirst HTML&CSS学习笔记.zip
12-29
CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 Head...
[转载] Python新手写出漂亮的爬虫代码1——从html获取信息
ld909的博客
11-20 363
参考链接： Python中从用户获取多个输入 Python新手写出漂亮的爬虫代码1 初到大数据学习圈子的同学可能对爬虫都有所耳闻，会觉得是一个高大上的东西，仿佛九阳神功和乾坤大挪移一样，和别人说“老子会爬虫”，就感觉特别有逼格，但是又不知从何入手，这里，博主给大家纠正一个误区：爬虫并不神秘，也不高级，是一个非常好上手和掌握的东西（当然，里面也有很多坑，也有很多细节，展开说的话其实也蛮复杂的，不过它的模式和套路就摆在那里，看了小编的博客，保证你能爬下你想要的内容）。 一般情况下，爬虫分为两种，一种是..
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、付费专栏及课程。

余额充值