前端——css基础

最新推荐文章于 2024-07-11 17:28:05 发布
最新推荐文章于 2024-07-11 17:28:05 发布
阅读量5.8k 收藏
点赞数
分类专栏： 前端 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44331253/article/details/123286234
版权

目录

div和span

  • div 就是一个标签. 是一个容器, 块级元素, div内部可以放任何标签(body,html等不行)
  • span就是一个标签. 是一个文本容器, 行内元素, span标签中只能嵌套文本/图片/超链接

CSS

  • 层叠样式表
    层叠: 样式层层叠加 eg:刷墙
    样式表: 样式的集合

学习html就是学习标签, 学习CSS主要学习样式(属性),选择器

CSS的作用

  • 美化页面,修饰页面
  • HTML负责内容(hello),CSS负责样式(颜色,字体大小…)
<font color="red" size="7">hello</font>
  • html当做毛坯房, CSS当做装修

为什么要学习CSS

  • 通过标签来修改样式的缺点:
    1. 需要记忆哪些标签有哪些属性, 如果该标签没有这个属性, 那么设置了也没有效果
    2. 当需求变更时我们需要修改大量的代码才能满足现有的需求
  • 通过CSS来修改样式的好处:
    1. 不用记忆哪些属性属于哪个标签
    2. 当需求变更时我们不需要修改大量的代码就可以满足需求
CSS语法
{
	属性:属性值 属性值;
	属性:属性值 属性值
}
  • 属性和属性值用 : 连接
  • 如果有多个属性值用空格隔开
  • 如果有多个属性,属性和属性之间用;隔开 最后一个;可以不写

CSS引入方式

  • HTML是一种语言；CSS也是一种语言。如果想要CSS能够修饰HTML的样式，就必须把CSS引入到HTML中。即：要解决 把CSS代码写在什么地方 的问题

三种引入方式

  • 引入的方式有：
    内联样式：把CSS代码内嵌到HTML代码里,通过标签的style属性来结合
    内部样式：把CSS代码写在HTML文档内部,通过style标签来结合
    外部样式：把CSS代码写在独立的CSS文件里,通过link标签结合
  1. 通过标签的style属性来结合
<!--通过style属性-->
<p style="属性名称:属性值;..."></p>
  1. 通过style标签来结合
<head>
<style type="text/css">
      标签名称{
          属性名称: 属性对应的值;
         
      }
</style>
</head>

注意点:
1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
2.style标签中的type属性其实可以不用写, 默认就是type=“text/css”
3.设置样式时必须按照固定的格式来设置. key: value; 其中 : 不能省略, 分号大多数情况下也不能省略

  1. 通过link标签结合
    创建一个css文件(后缀是css)
    通过link标签引入
<head>
    <link rel="stylesheet" href="../../css/myCss.css" />
</head>

​link标签属性:

  • href : css文件路径

  • rel各个属性值配置的意思：
    Alternate – 定义交替出现的链接
    Stylesheet – 定义一个外部加载的样式表
    Start – 通知搜索引擎,文档的开始
    Next – 记录文档的下一页.(浏览器可以提前加载此页)
    Prev – 记录文档的上一页.(定义浏览器的后退键)
    Contents
    Index – 当前文档的索引
    Glossary – 词汇
    Copyright – 当前文档的版权
    Chapter – 当前文档的章节
    Section – 作为文档的一部分
    Subsection – 作为文档的一小部分
    Appendix – 定义文档的附加信息
    Help – 链接帮助信息
    Bookmark – 书签

所以说，我们用这样的方式，引入外部的css文件时，一定不能忘记rel属性的配置。

三种结合方式优先级

  • 就近原则(相对于代码,也就是要修饰的标签)

选择器

基本选择器语法

选择器描述语法示例
标签选择器根据HTML标签名称选择标签标签名称{}div{ color:red; }
ID选择器根据id属性值选择标签#id值{}#d1 { color:blue; }
类选择器根据class属性值（类名）选择标签.类名{}.c1 { color:yellow; }
通用选择器选取所有标签*{}*{ color: pink;}

优先级

选择器优先级

  • ID选择器 > 类选择器 > 标签选择器 > 通用选择器
  • 如果优先级相同，那么就满足就近原则

组合选择器

  • 多个基本选择器的组合，可以更灵活的选取标签
选择器描述语法示例
层级选择器根据HTML标签名称选择标签祖先 后代div a{ }
属性选择器根据指定属性的值筛选元素[属性=‘值’]input[type=‘text’] { }
并集选择器多个选择器的结果进行合并选择器1,选择器2,….c1, span { }

伪类选择器

  • 了解几个超链接相关的伪类选择器
选择器描述示例
:link选择正常状态的超链接a:link{}
:visited选择被访问过的超链接a:visited{}
:hover选择鼠标悬停的超链接a:hover{}
:active选择鼠标按下的超链接a:active{}

案例：鼠标悬停，div里面的字体变色

	<head>
		<meta charset="utf-8">
		<title>鼠标悬停，div里面的字体变色</title>
		<style>
			.a_div{
				width:200px;
			}
			.a_div:hover{
				background-color: #FF4C4C;
			}
			
			.a_div:hover ，.a_btn{
				color:#ffffff;
			}
		</style>
	</head>
	<body>
		<div class="a_div">
			<a href="#" class="a_btn">看我变色</a>
		</div>
	</body>

鼠标悬停前
鼠标悬停前
鼠标悬停后
鼠标悬停后

CSS常用属性

背景属性

介绍

功能属性名属性取值
背景色background-color1. 颜色常量，如：red 2. 使用十六进制，如：#ABC 3. 红绿蓝 使用 rgb(红,绿,蓝)
背景图片background-imageurl(图片的路径)
平铺方式background-repeatrepeat 默认。背景图像将在垂直方向和水平方向重复 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像 将在垂直方向重复。
背景位置background-positionleft top
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用属性-背景</title>
    <style>
        /*设置整个页面的背景样式*/
        body{
            /*背景图片*/
            background-image: url("img/little_mm.jpg");
            /*平铺方式*/
            background-repeat: repeat;
        }
    </style>
</head>
<body>

    <div>页面内容</div>

</body>
</html>

文本样式

介绍

功能属性名属性取值
颜色color颜色
设置行高line-height像素
文字修饰text-decorationunderline 下划线 overline 上划线 ine-through 删除线 none 不要线条
文本缩进text-indent用于缩进文本，可以使用em单位。
文本对齐text-align left把文本排列到左边。 right 把文本排列到右边。 center 把文本排列到中间。默认值：由浏览器决定。

字体属性

介绍

功能属性名作用
字体名font-family设置字体，本机必须要有这种字体
设置大小font-size像素
设置样式font-styleitalic 斜体normal 默认值。浏览器显示一个标准的字体样式。
设置粗细font-weightbolder加粗
<style>
        span{
            /*字体：幼圆*/
            font-family: 幼圆;
            /*大小：40px*/
            font-size: 40px;
            /*字体：斜体*/
            font-style: italic;
            /*加粗显示*/
            font-weight: bolder;
        }
    </style>

CSS列表
list-style-image

display样式

display:block;
    inline
    inline_block
    none

block 设置为块标签
inline 设置为行标签
inline-block 设置为行级块标签
none 隐藏标签

.title{
	display: inline-block;
	border-bottom: 3px solid #FF4C4C;
}

透明效果

opacity（定义透明度）

opacity:0;

规定不透明度：从0.0（完全透明）到1.0（完全不透明）

布谷～dwb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 - CSS基础
旧时言的博客
04-28 1572
目标 掌握 CSS 基本语法规范和代码书写风格 掌握 CSS 选择器的各种用法 熟练使用 CSS 中的常用属性. CSS 是什么 层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结 构分离. CSS 就是 “东方四大邪术” 之化妆术. 基本语法规范 选择器 + {一条/N条声明} 选择器决定针对谁修改 (找谁) 声明决定修改啥. (干啥) 声明的属性是键值对. 使用 ; 区分键值对,
Java web前端——CSS使用基础
冷漠的小猿
09-02 1万+
CSS简介 1.1 CSS概念 CSS :层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的,...
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
前端CSS基础
dabaiZhang的博客
08-09 110
CSS基础 一、css 的定义 CSS：（cascading style sheets）（层叠样式表）定义网页的样式——页面表现的基础、控制布局、控制元素的渲染。 二、HTML如何引入css样式表 1.外部样式表（方便重复使用和维护） css代码是独立的一个文件，通过link引用 2.内部样式表（不方便后期维护） 里面加3.行内样式表 直接在某个标签的起始标签里面用style属性写css代码 三、CSS术语 1、CSS规则 CSS代码由多个规则组成 ，每个规则指定了对哪些元素用什么样式 书写格式：选择器{
前端css基础知识学习
m0_58618019的博客
02-11 224
css主要作用：美化网页、布局页面。 html负责结构、css负责美化布局（一位网页美容师） css是层叠样式表的简称（style） css和html一样是一种标记语言；主要设置html页面的文本内容（字体、大小、对齐方式）； 图片外形（宽高边距）、以及版面的布局和外观显示样式。 css作用：美化网页、布局简单。 简单总结： html主要做结构，显示元素内容。 css美化html、布局网页。 css最大的价值：由html专注做结构呈现、样式交给css，即结构（html）样式（css）分离。
前端基础-css（一）
deartors的博客
10-09 356
css全称是cascading style sheet层叠样式表用来修饰网页信息的显示样式css样式可以放在head标签内也可以放在body标签内，但都需要用一个双标签，包裹，最常用的方法就是新建一个标签页然后再head部分引入css部分。css的样式表有三种，内部样式，外部样式，行内样式。
web前端基础——CSS入门
01-20
本文将详细介绍CSS入门的基础知识，包括CSS的引入方式、选择器、字体样式、外观属性以及标签显示模式。 1. CSS的引入方式： - 内部样式：直接在HTML的`<head>`标签内的`<style>`标签中编写CSS代码，这样样式只应用...
前端学习（二）——css3学习
08-09
前端学习（二）——css3学习
前端CSS基础-常规流练习.rar
04-09
在"前端CSS基础——常规流中练习对应图片代码"中，你可能会看到如何通过CSS控制元素在常规流中的位置和大小。例如，可以使用`display`属性来改变元素的行为，将一个内联元素转换为块级元素，或者创建一个内联块级...
WEB前端面试——常见CSS知识点
06-30
WEB前端面试——常见CSS知识点 CSS是一种标记语言，用于描述网页的样式和布局。以下是常见的CSS知识点： 一、CSS盒子模型 CSS盒子模型分为标准盒模型（content-box）和怪异盒模型（border-box）。标准盒模型的...
CSSCheckStyle——CSS的解析、检查、修复与压缩
04-24
《CSSCheckStyle——CSS的解析、检查、修复与压缩》 在前端开发中，CSS（层叠样式表）是构建网页样式的重要工具，它决定了页面的布局和视觉表现。然而，随着项目规模的扩大，CSS代码往往变得越来越复杂，易读性和可...
前端基础之CSS
时光的博客
07-12 292
参考学习：https://www.cnblogs.com/liwenzhou/p/7999532.htmlCSS的介绍CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，简单地说就是对HTML元素加以装饰。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。CSS语法CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性...
前端基础之CSS基础（一）
qiuqiudongdong的博客
10-17 235
CSS基础 文章目录CSS基础CSS简介：CSS基础语法：样式的继承：样式单位：颜色:文档流:盒模型: CSS简介： 网页分为三个部分：结构（HTML）、表现、行为 表现：CSS ：层叠样式表 （网页是一个多层的结构，通过CSS可以给网页的每一层设置样式） 使用CSS修改元素的样式 <p style="color:red;font-size:60px;">这是一个段落</p> (上面样式是内联样式，不方便维护) 开发时不要用内联样式 样式写入到head的style标签中
前端基础篇css
青梅煮码
11-11 328
一、web标准 web标准是网页制作的标准，它不是一个标准，而是由一系列标准组成。 web标准包含了三个方面：结构（html）,表现(css),行为(javascript或js) 注：a）W3C—万维网联盟，制定了结构和表现的标准 b) ECMA—欧洲电脑厂商联合会，制定了行为标准 二、html相关概念 1.html—超文本标记语言 2.xhtml—可扩展的超文本标记语...
前端入门之CSS基础
春眠不觉晓喵喵
11-03 342
CSS基础
CSS学习 — CSS的引入以及CSS选择器
小绵杨
02-13 377
目录前言引入CSSCSS选择器复杂的css选择器 前言 CSS是Cascading Style Sheets的缩写，一般翻译为层叠样式表，是用来表现HTML(标准通用标记语言的一个应用）或XML(标准通用标记语言的一个子集）等文件样式的计算机语言。 通俗的说，我们通过css来美化、格式化我们的html标签，那么我们如何确定改修饰那一部分html标签呢，这就需要使用css选择器。 当然我们要修饰页面，肯定需要在hmtl文件中引入css。 引入CSS 在html中引入css的方式有三种： 行内样式 直接在ht
scss概念及使用
m0_74293254的博客
07-10 903
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
在一个使用了 Sass 的 React Webpack 项目中安装和使用 Tailwind CSS
最新发布
Chloeeeeeeee的博客
07-11 101
在使用了 Sass 的 React 和 Webpack 项目中安装和使用 Tailwind CSS，可以按以下步骤进行：安装 Tailwind CSS 及其依赖，并初始化配置文件；创建 `postcss.config.js` 并配置 Tailwind CSS 插件；在 `src` 目录中创建 `index.css` 并引入 Tailwind 的基础、组件和工具类；更新 Webpack 配置以处理 PostCSS 插件和 Tailwind CSS；最后在组件中导入 `index.css` 和 Sass 文件
CSS实现从上往下过渡效果
m0_56164131的博客
07-11 90
要实现一个从上往下显示的过渡效果，可以使用CSS的@keyframes规则来创建一个动画，使得元素在垂直方向上逐渐改变其位置。
web前端技术--css.pptx
01-11
Web前端技术--CSS.pptx文档深入讲解了Web前端开发中不可或缺的一部分——层叠样式表(Cascading Style Sheets, CSS)。CSS是用于描述HTML或XML（包括如SVG、MathML等）文档呈现的样式语言，它实现了内容与表现的分离，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值