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

css-选择器、常见样式、标签分类

news 2025/7/8 9:47:23

CSS

CSS简介

  • 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
  • CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]

1.层叠

  • 多个样式可以作用在同一个html的标签上

2.样式表

提供了丰富的样式修饰内容

3.作用

  • 样式丰富，功能强大
  • 内容和样式分离(解耦)

CSS的使用

1.行内样式

  • 在标签中使用style属性进行CSS样式设置
  • 样式名与样式值之间用冒号隔开
  • 样式与样式之间用分号隔开
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div style="width:500px;height:500px;background-color: rgb(90, 139, 102);"></div>
</body>
</html>

2.内部样式

在<head>标签中使用<style>标签进行设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div></div><div></div>
</body>
</html>

3.外部样式

  • 将CSS样式独立到.css的文件中
  • 再将这个文件导入到需要使用这些样式的HTML文件中，使用标签。

（1）index.html 页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link href="css/demo.css" rel="stylesheet">
</head>
<body><div></div><div></div>
</body>
</html>

(2) demo.css css文件

div{width: 200px;height: 200px;background-color: red;
}

4.三种样式的优先级 (就近原则)

  • 行内样式>(内部样式&外部样式)

5.三种样式的生效范围

  • 外部样式>内部样式>行内样式

CSS选择器

1.CSS选择器

（1）为什么需要选择器

  • 内部样式和外部样式中，需要去找到要设置样式的标签，这时就需要选择器。

（2）语法

选择器{样式名1:样式值1;……}

2.基本选择器

（1）标签选择器

  • 通过标签名来获取标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div></div><div></div>
</body>
</html>

(2) ID选择器

  • 通过标签的ID属性的值来获取标签
  • 注意：ID属性值在当前页面上是唯一的
  • 使用 ‘*’
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#test{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div>div1</div><div>div2</div><div id="test">div3</div><div>div4</div>
</body>
</html>

（3）class选择器

  • 通过标签的class属性值来获取标签
  • 注意：class属性值可以重复
  • 使用 ‘.’
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.demo{color: red;}</style>
</head>
<body><div>div1</div><div class="demo">div2</div><div>div3</div><div>div4</div><p class="demo">p1</p>
</body>
</html>

（4）三大基本选择器的优先级

  • ID选择器>class选择器>标签选择器

2.其他选择器

（1）全局选择器

  • 选中当前页面上所有的标签
  • 使用 ‘*’
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>*{background-color: red;}</style>
</head>
<body><div>这是DIV</div><div>这是DIV</div><div class="last">这是DIV</div><p>这是P标签</p><p class="last">这是P标签</p>
</body>
</html>

（2）组合选择器

  • 选中当前页面上 所选中的标签
  • 使用 ‘,’
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>#test,p,span{color: red;}</style>
</head>
<body><div>这是DIV</div><div id="test">这是DIV</div><div>这是DIV</div><p>这是P标签</p><p>这是P标签</p><span>这是span</span>
</body>
</html>

（3）层级选择器（后代选择器）

  • 使用 空格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>div span{color: red;}</style>
</head>
<body><div><p><span>这是最里面的span</span></p><span>这是div的儿子span</span></div><span>这是div的兄弟span</span>
</body>
</html>

（4）子选择器

  • 选择定位到的标签
  • 使用 ‘>’
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>div>span{color: red;}</style>
</head>
<body><div><p><span>这是最里面的span</span></p><span>这是div的儿子span</span></div><span>这是div的兄弟span</span>
</body>
</html>

（5）属性选择器

  • 使用：[属性名=属性值]
  • 获取所有属性名是属性值的标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>[title=last]{color: red;}</style>
</head>
<body><div title="first">这是DIV</div><div>这是DIV</div><div title="last">这是DIV</div><div>这是DIV</div><div title="last">这是DIV</div><p title="last">这是P</p>
</body>
</html>

（6）伪类选择器

  • 主要针对超链接

  • a:link{}：未被访问时

  • a:visited{}：访问过后

  • a:hover{}： 鼠标悬浮时（hover也可以用于其他标签）

  • a:active{}：鼠标激活时，点击未释放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>a:link{color: black;text-decoration: none;}a:visited{color: gainsboro;}a:hover{color: pink;}a:active{color: aqua;}</style>
</head>
<body><a href="http://www.taobao.com">淘宝</a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>div:hover{color: pink;}</style>
</head>
<body><div>这是DIV</div>
</body>
</html>

CSS常见样式

1.尺寸样式

  • height：设置元素的高度

  • width：设置元素的宽度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div>这是DIV</div>这是测试
</body>
</html>

2.字体样式

  • font-size：字体大小
  • font-style：字体风格(取值：italic/normal…)
    • italic 斜体
    • normal : 默认值。正常的字体
  • font-family：字体类型(取值：隶书/微软雅黑…)
  • font-weight：字体粗细取值:Normal 默认值。
    • bold 粗体字符
    • bolder 更粗的字符
    • lighter 定义更细的字符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>span{font-size: 42px;font-style: italic;font-family: '宋体';font-weight: bold;}</style>
</head>
<body><span>这是SPAN</span>
</body>
</html>

3.字体样式

  • color：文本颜色（取值：colorname或#0000FF）
  • text-align：文本对齐（取值：left/right/center…）
  • text-decoration：文本装饰，取值:none默认。
    • underline下划线。
    • overline上划线
    • line-through删除线
  • line-height：设置行高
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 400px;height: 200px;background-color: aquamarine;color: red;text-align: center;text-decoration: line-through;line-height: 200px;}</style>
</head>
<body><div>这是DIV</div>
</body>
</html>

4.边框样式

  • border-width：边框宽度，按方向设置：border-(left/right/top/bottom)-width
  • border-color：边框颜色，按方向设置：border-(left/right/top/bottom)-color
  • border-style：边框风格，按方向设置：border-(left/right/top/bottom)-style
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 100px;height: 100px;background-color: aquamarine;/* border: 10px black solid; */border-top-width: 10px;border-right-width: 20px;border-bottom-width: 30px;border-left-width: 40px;border-top-color: red;border-right-color: gray;border-bottom-color: yellow;border-left-color: orange;border-top-style: solid;border-right-style: double;border-bottom-style: dashed;border-left-style: dotted;}</style>
</head>
<body><div>这是DIV</div>
</body>
</html>
  • border-radius：圆角边框按方向设置值：border-(top/bottom)-(left/right)-radius
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 200px;height: 200px;background-color: red;/* border-radius: 1px; */border-top-left-radius: 10px;border-top-right-radius: 20px;border-bottom-left-radius: 30px;border-bottom-right-radius: 40px;}</style>
</head>
<body><div></div>
</body>
</html>

5.背景样式

  • background-color：yellow;背景颜色
  • background-image：url(img/1.jpeg);背景图片
  • background-repeat：背景是否平铺，
    • 取值:repeat-x:水平方向平
    • repeat-y :垂直方向平，
    • repeat :水平和垂直方向同时平
    • no - repeat : 不平铺
  • background-size：背景图片大小
  • background-position：center;背景偏移
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 500px;height: 500px;background-color: red;background-image: url(img/gouza.png);background-size: 50px 50px;background-repeat: no-repeat;background-position: center;}</style>
</head>
<body><div></div>
</body>
</html>

6.盒子模型

在这里插入图片描述

  • content：内容
  • padding：内边距
  • border：边框
  • margin：外边距

（1）内边距

  • padding：内容与边框之间的距离

  • 常用样式

    • padding：
    • padding-top：
    • padding-right：
    • padding-bottom：
    • padding-left：

  • 主要作用：调整标签内容的位置，但是，会导致整个标签大小的变化

padding:10px;代表四个方向的内边距都是10个像素padding:10px 20px;代表上下内边距是10像素，左右内边距是20像素padding:10px 20px 30px;代表上内边距10像素，右内边距20像素，下内边距30像素，左内边距同右padding:10px 20px 30px 40px;分别代表上，右，下，左内边距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 200px;height: 200px;background-color: red;border: 10px black solid;/* padding: 50px; *//* padding: 50px 100px; *//* padding: 50px 100px 150px; */padding: 50px 100px 150px 200px;}</style>
</head>
<body><div>这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容</div>
</body>
</html>

（2）外边距

  • margin：边框与父容器之间的距离
  • 常用样式
    • margin
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
  • 主要作用：调整标签本身相对于父标签的位置
  • 外边距的常用方式：设置标签水平居中
    • margin: auto;
margin:10px;代表四个方向的外边距都是10个像素margin:10px 20px;代表上下外边距是10像素，左右外边距是20像素margin:10px 20px 30px;代表外内边距10像素，右外边距20像素，下外边距30像素，左外边距同右margin:10px 20px 30px 40px;分别代表上，右，下，左外边距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 200px;height: 200px;background-color: red;border: 10px black solid;/* margin: 50px; *//* margin: 50px 100px; *//* margin: 50px 100px 150px; *//* margin: 50px 100px 150px 200px; */}</style>
</head>
<body><div>这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容</div>
</body>
</html>

7.布局样式

（1）样式

  • float

（2）常用值

  • left
  • right

（3）理解

  1. 在Z轴上往人的方向移动，再进行左移和右移。
  2. 左移或右移时，碰到父标签边框或者碰到另一个浮动框的边框就会停下来。
  3. 实现框横向排列：将需要横向排列的框往同一个方向浮动就行了。

（4）出现问题

  • 由于浮动脱离了原本的平面，所以原本的位置会被后面的标签挤占掉，能不能让后面的标签不去挤占呢？

（5）解决方案

  • 清除前面浮动对后面的标签造成的影响

  • 样式：clear

  • 常用值：left，right，both

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>#first{width: 100px;height: 100px;background-color: red;}#second{width: 200px;height: 200px;background-color: gray;float: left;}#third{width: 300px;height: 300px;background-color: pink;float: left;}#fourth{width: 400px;height: 400px;background-color: purple;float: left;}#five{width: 1000px;height: 500px;background-color: black;clear:left}</style>
</head>
<body><div id="first"></div><div id="second"></div><div id="third"></div><div id="fourth"></div><div id="five"></div>
</body>
</html>

8.定位样式

  • 为了将标签放到指定的位置上。
  • 通常情况下，能用盒子模型解决，就不要用定位。

（1）样式

  • position

（2）常用值

  • absolute：绝对定位
  • relative：相对定位
  • fixed：固定定位

（3）调整位置的样式

  • left
  • right
  • top
  • bottom

（4）绝对样式

  • Z轴上往人的方向移动，原本的位置会空出来，后面的标签就会去挤占掉
  • 相对于页面的顶点进行移动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>#first{width: 100px;height: 100px;background-color: red;}#second{width: 200px;height: 200px;background-color: gray;position: absolute;left: 100px;top: 50px;}#third{width: 300px;height: 300px;background-color: pink;}</style>
</head>
<body><div id="first"></div><div id="second"></div><div id="third"></div>
</body>
</html>

（5）相对定位

  • 原本的位置会一直保留
  • 相对于原来的位置进行偏移
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>#first{width: 100px;height: 100px;background-color: red;}#second{width: 200px;height: 200px;background-color: gray;position: relative;left: 0px;top: 0px;}#third{width: 300px;height: 300px;background-color: pink;}</style>
</head>
<body><div id="first"></div><div id="second"></div><div id="third"></div>
</body>
</html>

（6）固定定位

  • 原来的位置不保留
  • 相对于页面的顶点进行偏移
  • 不受滚动条的影响
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>#first{width: 100px;height: 100px;background-color: red;}#second{width: 200px;height: 1000px;background-color: gray;}#third{width: 300px;height: 300px;background-color: pink;}#fourth{width: 50px;height: 50px;position: fixed;right: 50px;bottom: 50px;}</style>
</head>
<body><div id="first"></div><div id="second"></div><div id="third"></div><div id="fourth"><a href="#" style="font-size:40px;text-decoration: none;color: black;">^</a></div>
</body>
</html>

9.列表修饰

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>li{list-style-type: none;/*取消图标*//* list-style-image: url(img/gouza.png); */float: left;}</style>
</head>
<body><ul><li>橘子</li><li>香蕉</li><li>火龙果</li></ul>
</body>
</html>

标签的分类

1.块标签

  • 独占一行，自动换行
  • 可以手动设置宽高
<div>,<p>,<h*>,<ol>,<ul>,<li>,<table>,<form>……

2.行标签

  • 不会自动换行
  • 不能设置宽高
<span>,<font>,<strong>,<b>,<em>,<i>,<a>,<input>,<select>……

3.行块标签

  • 不能自动换行
  • 可以设置宽高
<img>

4.标签类型的转换

（1）样式

  • display

（2）常用值

  • block(：转成块标签
  • inline：转成行标签
  • inline-block：转成行块标签
  • none：隐藏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 100px;height: 100px;background-color: red;display: inline-block;}span{width: 100px;height: 100px;background-color: green;display: inline-block;}img{width: 100px;height: 100px;display: block;}</style>
</head>
<body><div>这是DIV</div><span>这是Span</span><img src="img/gouza.png">
</body>
</html>

综合练习

1.实现如下效果

在这里插入图片描述

2.浮动完成

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>li{list-style-type: none;float: left;background-color: green;color: white;text-align: center;width: 80px;height: 30px;line-height: 30px;border-radius: 5px;}ul{width: 400px;margin: auto;}</style>
</head>
<body><ul><li>首页</li><li>天猫</li><li>聚划算</li><li>超市</li><li>支付宝</li></ul>
</body>
</html>

3.使用标签类型转换完成

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>li{list-style-type: none;background-color: green;color: white;text-align: center;width: 80px;height: 30px;line-height: 30px;border-radius: 5px;display: inline-block;margin-left: -5px;}ul{width: 400px;margin: auto;}</style>
</head>
<body><ul><li>首页</li><li>天猫</li><li>聚划算</li><li>超市</li><li>支付宝</li></ul>
</body>
</html>

enter;
width: 80px;
height: 30px;
line-height: 30px;
border-radius: 5px;
}
ul{
width: 400px;
margin: auto;
}

  • 首页
  • 天猫
  • 聚划算
  • 超市
  • 支付宝
```

3.使用标签类型转换完成

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>li{list-style-type: none;background-color: green;color: white;text-align: center;width: 80px;height: 30px;line-height: 30px;border-radius: 5px;display: inline-block;margin-left: -5px;}ul{width: 400px;margin: auto;}</style>
</head>
<body><ul><li>首页</li><li>天猫</li><li>聚划算</li><li>超市</li><li>支付宝</li></ul>
</body>
</html>
http://www.lryc.cn/news/141758.html

相关文章：

  • 三星申请新商标：未来将应用于智能戒指，作为XR头显延伸设备
  • 0201hdfs集群部署-hadoop-大数据学习
  • DevOps中的持续测试优势和工具
  • 函数-C语言（初阶）
  • elementuiplus设置scroll-to-error之后 提示被遮挡的解决方案
  • vue中将新添加的div标签自动定位到可视区域内
  • Vue3笔记——（尚硅谷张天禹Vue笔记)
  • 正则表达式一小时学完
  • 上门服务系统|上门服务小程序如何提升生活质量？
  • 系统报错msvcp120.dll丢失的解决方法，常见的三种解决方法
  • 数据库备份工具有哪些
  • Sentinel流量控制与熔断降级
  • The Connector 周刊#10：你真的知道什么是DevOps文化吗？
  • leetcode438. 找到字符串中所有字母异位词(java)
  • 【锐捷】OSPF 多区域配置
  • Linux常用命令_权限管理命令
  • 【黑马头条之热点文章kafkaStream】
  • 【SpringSecurity】三、访问授权
  • 你对SPA单页面的理解，它的优缺点分别是什么？如何实现SPA应用呢？
  • 【LeetCode75】第三十七题 二叉树中的最长交错路径
  • 百度Apollo学习心得：探索自动驾驶技术的前沿之旅
  • kafka原理之springboot 集成批量消费
  • 【GeoDa实用技巧100例】024：geoda计算全局（局部）莫兰指数Moran‘s I，LISA聚类地图，显著性地图
  • Java进阶（7）——手动实现LinkedList 内部node类的实现 增删改查的实现 toString方法 源码的初步理解
  • CPU总线的理解
  • Spring Boot 中的 AOP，到底是 JDK 动态代理还是 Cglib 动态代理
  • 记录一下在工作中使用 LayUI bug的问题
  • 手机自动无人直播,实景无人直播真的有用吗？
  • python 面试题--2(15题)
  • kafka复习：（11）auto.offset.reset的默认值