![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 84
CSS课程学习笔记
努力学习前端的小陈
每一天都在努力学习前端,专栏有报错,配置专栏,用于记录每次报错的问题及处理方案
展开
-
CSS 盒子模型
页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面.1.1 看透网页布局的本质网页布局其实就是每一个大的盒子包小的盒子,然后一点点堆积起来,最后得以将网页搭建起来。网页布局过程:1. 先准备好相关的网页元素,网页元素基本都是盒子 Box 。2. 利用 CSS 设置好盒子样式,然后摆放到相应位置。3. 往盒子里面装内容.网页布局的核心本质: 就是利用 CSS 摆盒子。1.2 盒子模型(Box Model)组成.原创 2022-05-07 16:38:13 · 349 阅读 · 0 评论 -
CSS 简介、基础选择器
1. CSS 简介CSS 的主要使用场景就是美化网页,布局页面的.1.1 HTML 的局限性说起 HTML,这其实是个非常单纯的家伙,他只关注内容的语义。比如 <h1> 表明这是一个大标题,<p> 表 明这是一个段落,<img> 表明这儿有一个图片,<a> 表示此处有链接。很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点:丑。 虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐……1.2 CSS-网页的美容师..原创 2022-04-17 20:13:16 · 238 阅读 · 0 评论 -
CSS 字体属性
3. CSS 字体属性CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。3.1 字体系列CSS 使用 font-family 属性定义文本的字体系列。p { font-family:"微软雅黑";}div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}各种字体之间必须使用英文状态下的逗号隔开一般情况下,如果有空格隔开的多个单词组成的字体,加引号.尽量使用系统默认自带字体,保证在任何用户的浏原创 2022-04-17 21:09:05 · 592 阅读 · 0 评论 -
CSS文本属性及Chrome 调试工具
4. CSS 文本属性CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。4.1 文本颜色color 属性用于定义文本的颜色。div {color: red;}开发中最常用的是十六进制.4.2 对齐文本text-align 属性用于设置元素内文本内容的水平对齐方式。div {text-align: center;}4.3 装饰文本text-decoration 属性规定添加到文本的修...原创 2022-04-19 15:00:00 · 210 阅读 · 0 评论 -
CSS的引入方式(案例: 新闻页面)
6. CSS 引入方式6.1 CSS 的三种样式表按照 CSS 样式书写的位置(或者引入的方式),CSS 样式表可以分为三大类:1.行内样式表(行内式)2.内部样式表(嵌入式)3.外部样式表(链接式)6.2 内部样式表内部样式表(内嵌样式表)是写到html页面内部. 是将所有的 CSS 代码抽取出来,单独放到一个 <style> 标签中。<style>div {color: red;font-size: 12px;}</st原创 2022-04-19 14:57:45 · 346 阅读 · 0 评论 -
CSS 的复合选择器
1. CSS 的复合选择器1.1 什么是复合选择器在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对 基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素(标签)复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等1.2 后代选择器 (重要)后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签原创 2022-04-18 20:31:42 · 205 阅读 · 0 评论 -
CSS 的元素显示模式(案例:简洁版小米侧边栏)
2. CSS 的元素显示模式了解元素的显示模式可以更好的让我们布局页面.1.什么是元素的显示模式2.元素显示模式的分类3.元素显示模式的转换2.1 什么是元素显示模式作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>。 HTML 元素一般分为块元素和行内元素两种类型。2.2 块元.原创 2022-04-19 14:41:49 · 151 阅读 · 0 评论 -
CSS 的背景
通过 CSS 背景属性,可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。3.1 背景颜色background-color 属性定义了元素的背景颜色。background-color:颜色值;一般情况下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色。background-color:transparent;3.2 背景图片background-image 属性描述了元素的.原创 2022-04-26 15:16:20 · 102 阅读 · 0 评论 -
案例:五彩导航
案例效果:这里例举两个,其他同理案例分析:1.链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换.2.里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码.3.链接里面需要设置背景图片.因此需要用到背景的相关属性设置.4.鼠标经过变化背景图片,因此需要用到链接伪类选择器.代码示例:<!DOCTYPE html><html lang="en"><head> <met...原创 2022-04-26 15:22:13 · 519 阅读 · 0 评论 -
CSS 三大特性及注释
1. CSS 的三大特性CSS 有三个非常重要的三个特性:层叠性、继承性、优先级。1.1 层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠CSS 层叠性口诀:长江后浪推前浪,前浪死在沙滩上。1.2 继承性现实中的继承: 我们继承了父亲的姓CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和.原创 2022-05-01 18:15:09 · 287 阅读 · 0 评论