当前位置: 首页 > news >正文

HtmlCss 基础总结(基础好了才是最能打的)三

Html&Css 基础学习回顾总结

three day~
Html&Css 基础总结(基础好了才是最能打的)一
Html&Css 基础总结(基础好了才是最能打的)二


文章目录

  • Html&Css 基础学习回顾总结
  • 前言
    • CSS定义
    • CSS的引入方式
      • 内部样式表
      • 外部样式表
      • 行内样式表
    • 选择器、类和标签
      • 基础选择器
      • 标签选择器
      • 类选择器
      • id选择器
      • 通配符选择器
  • 结束


前言

这是作者的第三天总结篇章, 有需要的小伙伴可以 在这里 找到上一篇文章
视频在这里~ @B站黑马程序员视频

视频共15天,作者会以天为粒度,来分散到不同文章中,有兴趣的小伙伴可以关注一下,谢谢你
书中错误在所难免,如果有小伙伴发现的话恳请斧正,在此先谢过咯~


本篇文章主要讲述CSS的使用

CSS定义

层叠样式表(Cascading Style Sheets)CSS ,是一种样式表语言, 主要是美化html的内容;
书写位置:

title标签下方添加style标签, style标签里面书写css代码;

例如:

<style>
/*选择器*/p{/*CSS属性*/color:red;}</style>

CSS的引入方式

内部样式表

css代码写在style标签内部, 方便使用,学习使用; 

外部样式表

css代码单独写在css文件中, 后缀名是.css, 在html中使用link标签引入;

使用link 标签引入,link标签要写在head里面;

例如:

/* link 引入外部样式表, rel 是关系, 表示是什么, 
href 表示地址*/
<link rel="stylesheet" href ="./my.css">

行内样式表

css标签写在 标签内部的style属性值,
例如:

<div style="color":red; font-size:20px;></div>

选择器、类和标签

选择器就是查找标签的, 设置样式;

基础选择器

标签选择器

使用标签名作为选择器, 比如说div、p,img,h1等其他标签

类选择器

查找标签, 差异化设置标签的显示效果
步骤:
1.定义类选择器-> .类名
2.使用类选择器 -> 在标签身上添加class =“类名”,不带点;
示例:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>初识  CSS</title>
<link rel="stylesheet" href="./03-01-外部引入.css">
<style>
.div_cutsom{color: green;font-size: 50px;
}
.div_cutsom1{color: red;font-size: 50px;
}
</style>
</head>
<body><p>体验css</p><!-- 行内写法 --><div style=" color: red; font-size: 30px;">行内引入方式</div><!-- 一个类选择器可以给多个标签使用  --><!-- class 可以使用多个属性值 ,空格后添加上其他的类名, 且后面的会覆盖前面的--><div class="div_cutsom div_cutsom1" > 怎么讲?</div></body>
</html>

id选择器

同类选择器意昂, 差异化设置标签的显示效果
只不过场景是一般配合js使用,很少用来设置css的样式
步骤:
1. 定义id选择器 -> #id名, 不是.了
2. 使用id属性, 标签加id属性, id="xx "

示例:

/* 定义id选择器*/
#id_custom{color: black;font-size: 40px;
}/*使用id选择器*/
<div id="id_custom">不讲了</div>

通配符选择器

查找页面的所有标签, 设置相同样式;
通配符选择器, * 不需要调用。浏览器自动查找页面所有标签,以设置相同样式

示例:

*{color: orange;
} <!-- 一般在初期使用,目的是清除网页的默认样式--><div >通配符</div>

结束

今天的学习也到此为止了,希望大家都有所收获,再见


http://www.mrgr.cn/news/33002.html

相关文章:

  • ★ C++进阶篇 ★ 二叉搜索树
  • 机器之心 | 阿里云Qwen2.5发布!再登开源大模型王座,Qwen-Max性能逼近GPT-4o
  • OpenGL 原生库6 坐标系统
  • 【漏洞复现】泛微OA E-Office jx2_config.ini 敏感信息泄漏漏洞
  • Wireshark学习使用记录
  • IPsec-VPN中文解释
  • Vue极简入门
  • 不要死磕技术,还是要产品化
  • 图像生成大模型 Imagen:重塑创意的未来
  • 排序----快速排序(快排)(递归版)
  • 构建高可用和高防御力的云服务架构第一部分:深入解析DDoS高防(1/5)
  • git submodule
  • 低代码可视化工具-uniapp页面跳转传参-代码生成器
  • 为什么喝酱酒会回甘?
  • T4—猴痘识别
  • Redis数据结构之哈希表
  • 【HTTP】请求“报头”,Referer 和 Cookie
  • 盘点3款.NetCore(C#)开源免费商城系统
  • C++(2)进阶语法
  • 十四、运算放大电路