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

【CSS】一、基础选择器

文章目录

  • 1、CSS
  • 2、CSS的引入方式
  • 3、选择器
    • 3.1 标签选择器
    • 3.2 类选择器
    • 3.3 id选择器
    • 3.4 通配符选择器
  • 4、练习:画盒子

在这里插入图片描述

1、CSS

CSS,Cascading Style Sheets,层叠样式表,是一种样式表语言,用于表述HTML的呈现,做美化的

在这里插入图片描述

上面是最简单的一种写法,title标签下方写style标签(因为CSS是给浏览器看的,是浏览器渲染给你看,所以放html的head里),style标签中写CSS代码,先定义一个选择器,里面key-value写CSS的属性,效果:

在这里插入图片描述

在这里插入图片描述

2、CSS的引入方式

三种引入方式:

方式一:内部样式表:

  • CSS代码写在style标签里面
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS初体验</title>
    <style>
        p {
            color: red;
            font-size: 30px;
        }
    </style>
</head>

方式二:外部样式表:

  • CSS代码写在单独的CSS文件中(.css)
  • 在HTML文件中使用link标签引入
<!--rel,即关系,是一个样式表,href即文件地址-->
<link rel="stylesheet" href="./my.css">

在这里插入图片描述
在这里插入图片描述
效果:

在这里插入图片描述

方式三:行内样式:

  • 配合JavaScript使用
  • CSS写在标签自己的style属性中
<div style="color: green; font-size:30px;">这是 div 标签</div>

在这里插入图片描述

3、选择器

要美化HTML,就要先找到对应的标签,选择器就是用来查找对应的标签,并给它设置样式,基础的选择器有四种:

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

3.1 标签选择器

使用标签名作为选择器 → 选中同名标签设置相同的样式,如p, h1, div, a, img…

<style> 
	p {
		color: red; 
	}
</style>

缺点:同名标签的显示效果只能一样,即不能差异化

3.2 类选择器

用于查找标签,差异化设置标签的显示效果:

  • 定义类选择器 → .类名
  • 使用类选择器 → 标签添加 class="类名"

在这里插入图片描述

注意:

  • 类名自定义,不要用纯数字或中文,尽量用英文命名,见名知意,多个单词用-连接,如news-hd
  • 一个类选择器可以供多个标签使用
  • 一个标签可以使用多个类名,类名之间用空格隔开

在这里插入图片描述
在这里插入图片描述

3.3 id选择器

用于查找标签,差异化设置标签的显示效果,这和类选择器一样,但id选择器一般配合 JavaScript 使用,很少用来设置 CSS 样式

  • 定义id选择器→#id名
  • 使用 id 选择器 → 标签添加 id= "id名"

在这里插入图片描述

另外,和类选择器不同的是,同一个id选择器,在一个页面只能使用一次

3.4 通配符选择器

用于查找页面所有标签,设置相同样式,使用上:

  • *,不需要调用,浏览器自动查找页面所有标签,设置相同的样式
*{
	color: red; 
}
  • 可以用于清除标签的默认样式,比如,h和p标签之间,或者两个p标签之间自带的默认边距

在这里插入图片描述

4、练习:画盒子

使用合适的选择器画出:

在这里插入图片描述
新属性:

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            background-color: red;
            width: 100px;
            height: 100px;
        }
        .div2 {
            background-color: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>
</html>

效果:
在这里插入图片描述


http://www.kler.cn/a/588653.html

相关文章:

  • 蓝桥杯好题推荐---激光炸弹
  • 【蓝桥杯每日一题】3.16
  • 【Agent】OpenManus 项目架构分析
  • 技术栈分享之----Swagger
  • 专题|Python贝叶斯金融数据应用实例合集:随机波动率SV模型、逻辑回归、参数更新、绩效比较BEST分析亚马逊股票、普尔指数...
  • 思维训练让你更高、更强 |【逻辑思维能力】「刷题训练笔记」假设法模式逻辑训练题(6-16)
  • JVM常用概念之即时常量
  • Bash语言的智能家居
  • airtest用法
  • 网络VLAN技术详解:原理、类型与实战配置
  • 重生之我在学Vue--第16天 Vue 3 插件开发
  • Django中的查询条件封装总结
  • 蓝桥杯——车牌(dfs全排列问题)
  • 【R语言入门】向量,存储和计算
  • Oracle Linux Server 7.9安装fail2ban
  • 【QA】建造者模式在Qt有哪些应用
  • Axure设计之动态折线图教程(中继器)
  • 微服务架构: SpringCloud实战案例
  • 基于CSV构建轻量级数据库:SQL与Excel操作的双模实践
  • SSL/TLS 1.2过程:Client端如何验证服务端证书?