CSS

一、CSS概述

二、CSS的选择器

2.1 CSS语法

2.2 选择器--基本类型

2.3 选择器--分组、继承

2.4 选择器--高级类型

三、CSS常用样式

3.1 样式--背景

3.2 样式--文本

3.3 样式--字体

3.4 样式--链接

3.5 样式--表格

3.6 样式--轮廓

四、CSS框模型

4.1 CSS框模型示意图

4.2 CSS框模型--内边距、边框、外边距

五、值复制

六、CSS定位

定位-position：流、相对、绝对、固定、浮动定位

七、伪类&伪元素

7.1 伪类--主要针对超链接

7.2 伪元素

CSS

Cascading Style Sheets层叠样式表。

修饰HTML标签的显示。

一、CSS概述

CSS：数据(html)和显示(css)分离

外部样式的引入方式：<link rel="stylesheet" type="text/css" href="xxx.css"/>

优先级：就近原则，后加载的覆盖先加载的。

二、CSS的选择器

2.1 CSS语法

选择器{
属性：属性值；
}

选择器：选取HTML页面中的标签元素。

属性：设置相关的属性值。

2.2 选择器--基本类型

元素选择器、id选择器(不推荐使用，JS使用元素id属性)、类选择器(推荐使用)

2.3 选择器--分组、继承

2.4 选择器--高级类型

属性选择器：选择器[属性='值']

/* 元素选择器 */
p{color: blue;
}/* id选择器 */
/* 不建议在CSS中使用，JS要使用元素的id属性 */
#pId{color: aqua;font-size: 24px;
}   /* 类选择器 */
.pClass{color: aqua;font-size: 24px;
}/* 分组选择器 --多个元素共享*/
p,h1,#pId,.pClass{font-weight: bolder; /* 字体加粗*/
}/* 继承选择器 --body下子元素受到影响*/
body{font-family: 宋体; /* 设置字体*/
}/* 后代选择器:影响所有后代 */
h1 span{color: red;
}/* 子元素选择器：只影响直属的子元素 */
h2 > strong{color: red;
}/* 相邻兄弟选择器 */
h2+p{color: red;
}/* 属性选择器 */
input[type="password"]{border-color: red;
}

三、CSS常用样式

3.1 样式--背景

3.2 样式--文本

3.3 样式--字体

3.4 样式--链接

3.5 样式--表格

3.6 样式--轮廓

四、CSS框模型

4.1 CSS框模型示意图

Box Model--盒子模型，规定了元素框处理元素内容、内边距、边框和外边距的方式。

4.2 CSS框模型--内边距、边框、外边距

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>DIV盒子--系统后台</title><style type="text/css">body{margin: 0px;}.top{background-color: #0000FF;height: 30px;}.left{background-color: #00FFFF;height: 600px;width: 100px;position: absolute;top:30px; bottom: 0px;left: 0px;}.main{background-color: black;height: 600px;position: absolute; /* 绝对定位，需要定义上下左右的距离*/top:30px; bottom: 0px;left: 100px;right: 0px;}</style></head><body><div id="" class="top"></div><div id="" class="left"></div><div id="" class="main"></div></body>
</html>

五、值复制

六、CSS定位

定位-position：流、相对、绝对、固定、浮动定位

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>定位</title><style type="text/css">body{margin: 0px;}.yellow{background-color: yellow;position: relative; /* 相对定位 没有脱离流定位 */top: 10px; /* 相对元素原来的位置移动 */left: 10px;}.green{background-color: green;position: absolute; /* 绝对定位 脱离流定位*/top: 40px; /* 参照物：最靠近的外围已定位的元素*/left: 80px;}.red{background-color: red;position: fixed;/* 固定定位 脱离流定位*/top: 10px; /* 参照物：浏览器窗口--body */left: 10px;}.subdiv{height: 100px;width: 100px;}.maindiv{border: 1px solid;position: absolute;width: 80%;margin: 20px;height: 500px;}</style></head><body><div class="maindiv"><div class="yellow subdiv"></div><div class="green subdiv"></div><div class="red subdiv"></div></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>浮动定位</title><style type="text/css">body{margin: 0px;}div{/* background-color: #000000 */height: 100px;width: 100px;float: left; /* 浮动定位 */}.yellow{background-color: yellow;}.green{background-color: green;}.red{background-color: red;}</style></head><body><div class="yellow"></div><div class="green"></div><div class="red"></div><div style="clear:both"> </div> <!-- 消除浮动 --></body>
</html>

七、伪类&伪元素

7.1 伪类--主要针对超链接

超链接的几种状态。

结合display实现简单的下拉窗口。

7.2 伪元素

前端学习笔记02--CSS快速了解相关推荐

个人前端学习笔记 html5+css（保持更新）
2022年7月5日 HTML基础知识一.路径的使用 1.绝对路径的使用:表示含有盘符的路径地址==-不建议在服务器(工作)中使用== -补充:插件的名字:Image preview(在编辑器代码前显 ...
前端学习笔记 - HTML+CSS
基础认知网页什么是网页网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合. 网页是网站中的一"页",通常是 HTML 格式的文件,它要通 ...
第四次网页前端学习笔记（css）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 一.css的属性是否重复: 1.rep ...
前端学习笔记之CSS网页布局
CSS网页布局阅读目录一网页布局方式二标准流三浮动流四定位流一网页布局方式 #1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如wor ...
前端学习笔记之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学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...

前端学习笔记02--CSS快速了解

CSS

一、CSS概述

二、CSS的选择器

2.1 CSS语法

2.2 选择器--基本类型

2.3 选择器--分组、继承

2.4 选择器--高级类型

三、CSS常用样式

3.1 样式--背景

3.2 样式--文本

3.3 样式--字体

3.4 样式--链接

3.5 样式--表格

3.6 样式--轮廓

四、CSS框模型

4.1 CSS框模型示意图

4.2 CSS框模型--内边距、边框、外边距

五、值复制

六、CSS定位

定位-position：流、相对、绝对、固定、浮动定位

七、伪类&伪元素

7.1 伪类--主要针对超链接

7.2 伪元素

前端学习笔记02--CSS快速了解相关推荐

最新文章

热门文章