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

总结 CSS 选择器的常见用法

一,什么是css

在前端网页中,css就相当于化妆术,把一个很生硬的网页页面变得排版有序起来。

CSS可以对网页中的元素位置进行像素级精准控制,实现美化页面的效果,也能做到页面的样式和结构分离。

 二,css的基本语法规范

选择器加{声明}

也就是该找那个修改,修改成什么样子,声明的属性是键值对,使用;区分键值对,使用:区分键和值。但要注意CSS要放置到style标签中,但style可以放置到任何位置,一般在head里面。

<style>p {/* 设置字体颜⾊ */ color: red;/* 设置字体⼤⼩ */ font-size: 30px;}
</style>
<p>hello</p>

三,CSS选择器

CSS选择器主要分为五种:

1.标签选择器:直接打标签,就比如div什么的,就全选上改变了。

2.class选择器:是使用点什么什么就比如:.font32  ,这就是选择class为32的元素

3.id选择器:使用#submit,就选择了id为subimt的元素,实现精准改变

4.复合选择器:ul li a,也就是只设置在ul标签下,li标签下的a标签

5.通配符选择器:一个*,设置页面的所有元素。

四,常用的CSS样式

1.color,设置字体颜色

2.font-size:设置字体大小

3.border:边框,但边框中也还有样式:

border-width,设置边框粗细,

border-style设置边框样式,就比如点状,实线,虚线的

border-color,设置边框颜色

4.width/height,高度和宽度,但要注意,只有块级元素可以设置高度和宽度

5.padding:内边距,设置内容和边框的距离

padding-top

padding-bottom

padding-left

padding-right

6. margin:外边距,复合样式和内边距一样

相关文章:

  • 硬盘数据恢复软件,推荐5种适合你的方法来恢复硬盘数据
  • 医学记录 --- 腋下异味
  • 手持弹幕LED滚动字幕屏夜店表白手灯接机微信抖音小程序开源版开发
  • 20-OWASP top10--XXS跨站脚本攻击
  • websocket 安全通信
  • 计算机组成入门知识
  • Memcached缓存系统详解
  • android 在线程中更新界面
  • Typora + Hexo 图片路径问题(Typedown)
  • Flink Sql Redis Connector
  • 数据结构之B数
  • 在JPA项目启动时新增MySQL字段
  • 华为欧拉 openEuler24.03 更新 阿里 yum源
  • 算是一些Transformer学习当中的重点内容
  • suuk-s.php.jpg-python 库劫持
  • ES6指北【2】—— 箭头函数
  • Android开发 - 掌握ConstraintLayout(四)创建基本约束
  • HashMap剖析之内部结构
  • iOS小技巧之UIImagePickerController实现头像选择
  • javascript从右向左截取指定位数字符的3种方法
  • laravel with 查询列表限制条数
  • LeetCode29.两数相除 JavaScript
  • Swoft 源码剖析 - 代码自动更新机制
  • vue自定义指令实现v-tap插件
  • Webpack 4 学习01(基础配置)
  • 笨办法学C 练习34:动态数组
  • 从零开始的webpack生活-0x009:FilesLoader装载文件
  • 关键词挖掘技术哪家强(一)基于node.js技术开发一个关键字查询工具
  • 基于axios的vue插件,让http请求更简单
  • 计算机在识别图像时“看到”了什么?
  • 试着探索高并发下的系统架构面貌
  • 在 Chrome DevTools 中调试 JavaScript 入门
  • MyCAT水平分库
  • 直播平台建设千万不要忘记流媒体服务器的存在 ...
  • ​secrets --- 生成管理密码的安全随机数​
  • ​软考-高级-系统架构设计师教程(清华第2版)【第20章 系统架构设计师论文写作要点(P717~728)-思维导图】​
  • ​油烟净化器电源安全,保障健康餐饮生活
  • # 利刃出鞘_Tomcat 核心原理解析(二)
  • #周末课堂# 【Linux + JVM + Mysql高级性能优化班】(火热报名中~~~)
  • (07)Hive——窗口函数详解
  • (10)Linux冯诺依曼结构操作系统的再次理解
  • (1综述)从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
  • (2)STL算法之元素计数
  • (4)STL算法之比较
  • (C#)一个最简单的链表类
  • (poj1.3.2)1791(构造法模拟)
  • (pojstep1.3.1)1017(构造法模拟)
  • (板子)A* astar算法,AcWing第k短路+八数码 带注释
  • (差分)胡桃爱原石
  • (第三期)书生大模型实战营——InternVL(冷笑话大师)部署微调实践
  • (回溯) LeetCode 78. 子集
  • (简单) HDU 2612 Find a way,BFS。
  • (力扣记录)235. 二叉搜索树的最近公共祖先
  • (三)centos7案例实战—vmware虚拟机硬盘挂载与卸载
  • (四) Graphivz 颜色选择