【CSS】一、基础选择器

文章目录

1、CSS

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

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

2、CSS的引入方式

三种引入方式:

方式一:内部样式表:

  • CSS代码写在style标签里面
html 复制代码
<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标签引入
html 复制代码
<!--rel,即关系,是一个样式表,href即文件地址-->
<link rel="stylesheet" href="./my.css">


效果:

方式三:行内样式:

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

3、选择器

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

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

3.1 标签选择器

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

html 复制代码
<style> 
	p {
		color: red; 
	}
</style>

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

3.2 类选择器

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

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

注意:

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


3.3 id选择器

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

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

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

3.4 通配符选择器

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

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

4、练习:画盒子

使用合适的选择器画出:

新属性:

html 复制代码
<!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>

效果:

相关推荐
计算机毕设定制辅导-无忧学长2 小时前
HTML 新手入门:从零基础到搭建第一个静态页面(二)
前端·javascript·html
luckyext3 小时前
Postman用JSON格式数据发送POST请求及注意事项
java·前端·后端·测试工具·c#·json·postman
烛阴3 小时前
JavaScript 函数对象与 NFE:你必须知道的秘密武器!
前端·javascript
px52133443 小时前
Solder leakage problems and improvement strategies in electronics manufacturing
java·前端·数据库·pcb工艺
eli9603 小时前
node-ddk,electron 开发组件
前端·javascript·electron·node.js·js
全宝4 小时前
🔥一个有质感的拟态开关
前端·css·weui
老K(郭云开)4 小时前
最新版Chrome浏览器加载ActiveX控件技术--allWebPlugin中间件一键部署浏览器扩展
前端·javascript·chrome·中间件·edge
老K(郭云开)4 小时前
allWebPlugin中间件自动适应Web系统多层iframe嵌套
前端·javascript·chrome·中间件
银之夏雪4 小时前
Vue 3 vs Vue 2:深入解析从性能优化到源码层面的进化
前端·vue.js·性能优化
巴巴博一4 小时前
Tailwindcss开启黑夜模式
css·vue.js