前端学习笔记3-CSS入门一

前言：虽然做了几个前端项目，但是属于项目组的赶鸭上架。我的前端基础还是非常薄弱，在网上找了一些网站，用于空闲时间学习。在此做下学习笔记，以做复习使用。

网站的课程讲的很好，很适合像我这样零基础的人学习，非常感谢网站的维护者，推荐下：绿叶学习网

1.CSS的3种引用方式：

---外部样式表，CSS代码和HTML代码分开存放，在HTML中通过link标签引入CSS。

CSS代码：

div{width: 200px;height: 200px;border: 1px solid red;
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--外部样式表--><link href="demo1.css" type="text/css" rel="stylesheet">
</head>
<body><div>快看我，我是外部</div>
</body>
</html>

效果展示：

---内部样式表， CSS代码写在HTML的head标签的style标签中：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--内部样式表--><style type="text/css">div{width: 300px;height: 200px;border: 1px solid blue;}</style>
</head>
<body><div>没错，我是内部</div>
</body>
</html>

效果展示：

---内联样式表，CSS代码直接写在标签上：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--内联样式表--><div style="width: 300px;height: 150px;border: 1px solid black;">你猜对了，我是内联</div>
</body>
</html>

效果展示：

2.CSS选择器，用于选中标签：

---元素选择器、id选择器、类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">/*元素选择器*/div{color: red;}/*id选择器，以#开头，id唯一*/#demo1{color: blue;}/*类选择器，以 . 开头*/.demo2{color: #ebb563;}</style>
</head>
<body><div>元素选择器</div><p id="demo1">id选择器，id唯一</p><p class="demo2">类选择器</p><p class="demo2">类选择器</p>
</body>
</html>

效果展示：

---子元素选择器、相邻选择器、群组选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">/*子元素选择器，用于选中某元素下的子元素，父子间有空格*/#father #son{color: red;}/*相邻选择器，用于选中相邻的、同级的、下一个元素*/#son+div{color: blue;}/*群组选择器，用于一组元素,元素之间逗号隔开，减少代码*/h3,span{color: #f54141;}</style>
</head>
<body><div id="father"><p id="son">我是子元素，选我</p><div>我是上个元素的兄弟</div></div><div>我是上个元素的叔叔</div><h3>我们是一组的</h3><span>我们是一组的</span>
</body>
</html>

效果展示：

前端学习笔记3-CSS入门一相关推荐

第四次网页前端学习笔记（css）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 一.css的属性是否重复: 1.rep ...
个人前端学习笔记 html5+css（保持更新）
2022年7月5日 HTML基础知识一.路径的使用 1.绝对路径的使用:表示含有盘符的路径地址==-不建议在服务器(工作)中使用== -补充:插件的名字:Image preview(在编辑器代码前显 ...
前端学习笔记之CSS网页布局
CSS网页布局阅读目录一网页布局方式二标准流三浮动流四定位流一网页布局方式 #1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如wor ...
前端学习笔记 - HTML+CSS
基础认知网页什么是网页网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合. 网页是网站中的一"页",通常是 HTML 格式的文件,它要通 ...
前端学习笔记之CSS属性设置
CSS属性设置阅读目录一字体属性二文本属性三背景属性四盒子模型五盒子模型各部分详解一字体属性 1.font-weight:文字粗细取值描述 normal 默认值,标准粗细 ...
前端学习笔记day48 CSS介绍
1. CSS-----层叠样式表设置样式的三种方式: 1. 直接在标签内写style属性设置该标签的样式(又叫内联标签) 2. 在head标签中写style标签设置body标签中子标签的样式: 3. ...
前端学习笔记：CSS学习之选择器篇
一.初识选择器 1.语法: 选择器{/* 注意添加";" */样式; } exp: body {font-size: 12px;color: red;} 二.标签选择器标签选择器 ...
前端学习笔记 - 用CSS实现一个背景色为红色，半径为200px的圆，并设置不停的上下移动动画
返回目录一.DOM <body><div class="box"></div> </body> 二.CSS <style&g ...
前端学习笔记（CSS、JS基础篇）
CSS篇注意:css注释使用/ /,而不是或者//,否则很容易导致不明错误!!! div padding:内边距.盒子内容与盒子边框的距离设置,相当于给盒子加了厚度,使用 ...
前端学习笔记：Bootstrap框架入门
前端学习笔记:Bootstrap框架入门一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...

前端学习笔记3-CSS入门一

前端学习笔记3-CSS入门一相关推荐

最新文章

热门文章