有关css基础的基础选择器、字体文本属性、Emmet语法及复合选择器

这里写目录标题

  • 一级目录
    • 二级目录
      • 三级目录
  • 基础选择器、字体文本属性
    • 一、语法规范
      • 1.
      • 2.代码风格
    • 二、基础选择器
      • 1.标签选择器
      • 2.类选择器:样式点.定义,结构类class调用
      • 3.id选择器:样式#定义,结构id调用,只能调用一次
      • 4.通配符选择器:把body内的全改
    • 三、字体属性
      • 1.字体系列
      • 2.字体大小
      • 3.字体粗细
      • 4.字体样式
      • 5.字体复合属性
    • 四、文本属性
      • 1.文本颜色
      • 2.对齐文本
      • 3.装饰文本
      • 4.文本首行缩进
      • 5.行间距
    • 五、引入方式
      • 1.内部样式表
      • 2.行内样式表
      • 3.外部样式表
    • 六、Chrome调试工具
      • 1.打开方式
      • 2.使用
  • Emmet语法及复合选择器
    • 一、Emmet语法
      • 1.快速生成html语法
      • 2.快速生成css语法
    • 二、复合选择器
      • 1.后代选择器
      • 2.子选择器
      • 3.并集选择器
      • 4.伪类选择器

一级目录

二级目录

三级目录

基础选择器、字体文本属性

一、语法规范

1.

<head><style>p<!--选择器-->{color属性: red值;}</style>
</head>

2.代码风格

每一行换行
属性用小写字母
选择器后一个空格,属性的冒号后一个空格

二、基础选择器

1.标签选择器

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

2.类选择器:样式点.定义,结构类class调用

<head><style>.red {color: red;}.box {width: 150px;height: 100px;}</style>
</head>
<body><ul><li class="red box">冰雨</li></ul>
</body>

3.id选择器:样式#定义,结构id调用,只能调用一次

<head><style>#pink {color: pink;}</style>
</head>
<body><div id="pink">冰雨</div>
</body>

4.通配符选择器:把body内的全改

<head><style>* {color: pink;}</style>
</head>
<body><div>冰雨</div><span>好的</span>
</body>

三、字体属性

1.字体系列

<head><style>body {font-family: 'Microsoft YaHei',arial,tahoma,'Hiragino Sans GB';}</style>
</head>

2.字体大小

标题要另外重新设置

<head><style>body {font-size: 16px;}h2 {font-size: 16px;}</style>
</head>

3.字体粗细

<head><style>.bold {font-weight: bold;或者font-weight: 700;细变粗,更提倡}h4 {font-weight: 400;粗变细或者font-weight: normal;}</style>
</head>

4.字体样式

<head><style>p {font-style: normal;倾斜改为不倾斜font-style: italic;不倾斜改为倾斜}</style>
</head>

5.字体复合属性

<head><style>div {font: font-style font-weight font-size font-family;font: italic 700 16px 'Microsoft yahei';<!--简略版-->不可以换顺序,前两个可以省略}</style>
</head>

四、文本属性

1.文本颜色

<head><style>div {color: red;color: #e600ff;最常用color: rgb(0, 255, 242)}</style>
</head>

2.对齐文本

<head><style>h2 {text-align: center;水平居中,还有left,right}</style>
</head>

3.装饰文本

<head><style>div {text-decoration: none;取消下划线text-decoration: underline;下划线}</style>
</head>

4.文本首行缩进

<head><style>p {text-indent: 2em;一个em是相对当前元素的一个文字大小}</style>
</head>

5.行间距

当让行间距等于盒子高度时,可以让文字垂直居中

<head><style>p {line-height: 26px;文本高度不变+上行距+下行距}</style>
</head>

五、引入方式

1.内部样式表

上述

2.行内样式表

注意双引号,使用较少,只能改变一个标签

<p style="color: pink; font-size: 12px">青春</p>

3.外部样式表

新建一个css文件,注意后缀为css,将所有css代码都放入此文件,不需要写style,只写样式就可以,div{color: pink;}
在html页面使用link引入文件,link+tab

<head>  <link rel="styleshleet" href="css文件路径">
</head>

六、Chrome调试工具

1.打开方式

F12或右键空白处,检查,elements

2.使用

放大:ctrtl+滚轮
左侧html右侧css

Emmet语法及复合选择器

一、Emmet语法

1.快速生成html语法

标签+tab

div*10快速生成10个div
ul>li快速生成父子关系标签
+快速生成兄弟关系标签

默认div
.nav快速生成


#win快速生成

span.nav快速生成
span#win快速生成
.nav$*5快速生成排好序的nav
{}可以生成标签内内容,div{学习使我快乐}*5

2.快速生成css语法

tac:text-align: center;
ti:text-indent: 2em;
w700:width: 700px
lh26px:line-height: 26px;

二、复合选择器

1.后代选择器

后续元素必须是元素一的后代,逐层查找,中间必须有空格,改变最后的元素代表的多个标签

<style>元素一ul 元素二li {color: pink;}元素一ul 元素二li 元素三a{color: red;}.nav (li) a{color: yellow;}
</style>
<ul><li>粉字</li><li><a href="#">红色链接</a></li><li><p><a href="#">也是红色链接</a></p></li>
</ul>
<ul class="nav"><li><a href="#">黄色链接</a></li>
</ul>

2.子选择器

只会选择亲儿子

<style>.nav>a{color: red;}
</style>
<ul class="nav"><li><a href="#">红色链接</a></li><li><p><a href="#">不变色</a></p></li>
</ul>

3.并集选择器

<style>div,p,.pig li{color: pink;}
</style>
<div></div>
<p></p>
<ul class="pig"><li></li>
</ul>

4.伪类选择器

按照LVHA的顺序书写

<style>a:link选择未被选择的链接{color: pink;text-decoration: none;}a:visited选择被选择的链接{color: black;}a:hover选择鼠标经过的链接{color: red;}a:active选择鼠标按下但未弹出的链接{color: green;}
</style>
<a href="#">小猪佩奇</a>

一般写法:

<style>a {color: pink;text-decoration: none;}a:hover选择鼠标经过的链接{color: red;}
</style>
<a href="#">小猪佩奇</a>

:focus伪类选择器:
用于选取获得焦点的表单元素,只改变取得焦点的临时状态

<style>input:focus {back-ground-color: pink;color: red;}
</style>
<input type="text">
<input type="text">
<input type="text">

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/6756.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

W801学习笔记十九:古诗学习应用——下

经过前两章的内容&#xff0c;背唐诗的功能基本可以使用了。然而&#xff0c;仅有一种模式未免显得过于单一。因此&#xff0c;在本章中对其进行扩展&#xff0c;增加几种不同的玩法&#xff0c;并且这几种玩法将采用完全不同的判断方式。 玩法一&#xff1a;三分钟限时挑战—…

深入理解网络原理4----TCP核心特性介绍(下)

文章目录 前言一、拥塞控制二、延时应答三、捎带应答四、面向字节流五、异常处理 前言 随着时代的发展&#xff0c;越来越需要计算机之间互相通信&#xff0c;共享软件和数据&#xff0c;即以多个计算机协同⼯作来完成业务&#xff0c;就有了⽹络互连。 一、拥塞控制 虽然TCP有…

使用memcache 和 redis 、 实现session 会话复制和保持

一、NoSQL介绍 NoSQL是对Not Only SQL、非传统关系型数据库的统称 NoSQL一词诞生于1998年&#xff0c;2009年这个词汇再次提出指非关系型、分布式、不提供ACID的数据库设计模式 随着互联网时代的数据爆发时增长、数据库技术发展的日新月异&#xff0c;要适应新的业务需求&am…

Spring Boot应用部署 - JAR包部署

Spring Boot应用部署采用打包成JAR文件的方式&#xff0c;旨在利用其内置的嵌入式Tomcat或其他Servlet容器&#xff0c;简化传统Web应用部署流程。以下是详细的步骤和说明&#xff1a; 1. 使用Maven或Gradle进行打包 Maven 在Spring Boot项目中&#xff0c;确保pom.xml文件已…

[C#] Visual Studio开发工具编译出错匹配目标平台x86或x64架构问题解决

使用Visual Studio开发工具的NuGet管理包插件时&#xff0c;开发者常常会遇到编译错误。尤其是在切换目标平台架构&#xff08;如AnyCPU、x86或x64&#xff09;时&#xff0c;有时会发现切换似乎不起作用&#xff0c;导致编译仍然出错。 文章目录 You need to specify platform…

三丰云搭建QQ-bot的服务器-代码实现

网址&#xff1a;https://www.sanfengyun.com >> 三丰云免费云服务器 代码实现-身份认证 首先来个 robot.py 文件 需要用到的库有&#xff1a; import osimport botpy from botpy import logging, BotAPIfrom botpy.types.message import Message from botpy.ext.cog_…

英语复习之英语形近词总结(二)

接着总结形近词 单词释义例句 impress 英 /ɪmˈpres/ 美 /ɪmˈpres/ vt.盖印&#xff1b;强征&#xff1b;传送&#xff1b;给予某人深刻印象 vi.给人印象。印象&#xff0c;印记&#xff1b;特征&#xff0c;痕迹 1.It didnt impress me as a good place to live. 那地方…

uniapp 自定义相机插件(组件版、缩放、裁剪)组件 Ba-CameraView

自定义相机插件&#xff08;组件版、缩放、裁剪&#xff09; Ba-CameraView 简介&#xff08;下载地址&#xff09; Ba-CameraView 是一款自定义相机拍照组件&#xff0c;支持任意界面&#xff0c;支持裁剪 支持任意自定义界面支持手势缩放支持裁剪&#xff08;手势拖动、比…

【MySQL】1.数据库设计:ER模型、范式与反范式的平衡之道

数据库作为数据存储和检索的管理工具&#xff0c;其设计的好坏直接关系到数据的可用性、一致性和整体系统的性能。基于此&#xff0c;本文将深入探讨数据库设计中的三个关键概念&#xff1a;实体-关系&#xff08;ER&#xff09;模型、规范化&#xff08;Normalization&#xf…

Leetcode—1396. 设计地铁系统【中等】

2024每日刷题&#xff08;127&#xff09; Leetcode—1396. 设计地铁系统 实现代码 class UndergroundSystem { public:typedef struct Checkin {string startStation;int time;} Checkin;typedef struct Checkout{int tripNum;int totalTime;} Checkout;UndergroundSystem()…

进程的环境变量

进程的环境变量是进程中一组变量信息&#xff0c;包括系统环境变量、用户环境变量和进程环境变量。系统有全局的环境变量&#xff0c;在进程创建时&#xff0c;进程会继承系统的全局环境变量、当前登录用户的用户环境变量和父进程的环境变量。进程也可以有自己的环境变量。 环…

器件配置比特流或 PDI 设置-Zynq-7000 比特流设置

Zynq-7000 比特流设置 下表所示 Zynq -7000 器件的器件配置设置可搭配 set_property <Setting> <Value> [current_design] Vivado 工具 Tcl 命令一起使用。 注释 &#xff1a; 用于加密的比特流设置对 Zynq-7000 器件无效。

HNU-人工智能-实验2-简单CSP问题

人工智能-实验2 计科210x 甘晴void 一、实验目的 求解约束满足问题 使用回溯搜索算法求解八皇后问题 二、实验平台 课程实训平台https://www.educoder.net/paths/369 三、实验内容 3.0 题目要求 回溯搜索算法 搜索与回溯是计算机解题中常用的算法&#xff0c;很多问…

Redis__数据持久化

文章目录 &#x1f60a; 作者&#xff1a;Lion J &#x1f496; 主页&#xff1a; https://blog.csdn.net/weixin_69252724 &#x1f389; 主题&#xff1a;Redis__数据持久化 ⏱️ 创作时间&#xff1a;2024年05月01日 ———————————————— 这里写目录标题…

3.10设计模式——Template Method 模版方法模式(行为型)

意图 定义一个操作中的算法骨架&#xff0c;而将一些步骤延迟到子类中&#xff0c;Template Method 使得子类可以不改变一个算法的结构即可重新定义该算法的某些特定步骤。 结构 AbstractClass&#xff08;抽象类&#xff09;定义抽象的原语操作&#xff0c;具体的子类将重定…

幼猫粮适合几个月的猫?

关于幼猫粮的选择&#xff0c;你是否有过疑惑呢&#xff1f;幼猫粮适合几个月的猫呢&#xff1f;今天&#xff0c;就让我来为大家详细解答这个问题吧&#xff01;&#x1f43e; 首先&#xff0c;我们要明确一点&#xff0c;幼猫粮是为4-12个月大的小猫咪特别设计的。在这个阶段…

[Java EE] 多线程(六):线程池与定时器

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏:&#x1f355; Collection与数据结构 (90平均质量分)https://blog.csdn.net/2301_80050796/category_12621348.html?spm1001.2014.3001.5482 &#x1f9c0;Java …

CSS中的Float(浮动)

CSS中的Float&#xff08;浮动&#xff09; 目录 CSS中的Float&#xff08;浮动&#xff09; 一、 什么是Float&#xff1f; 二、 Float的工作原理 三、Float的属性值 四、Float的清除 五、 Float的注意事项 六、 Float的代码示例 七、Float的最佳实践 一、 什么是Floa…

功能描述如何逻辑

assign相当于连线&#xff0c;注意每个assign独立&#xff0c;如果有变化立刻变化

算法题-求字符串数组中的最长公共前缀

1.编写一个函数来查找字符串数组中的最长公共前缀&#xff0c;如果不存在公共前缀&#xff0c;返回空字符串"" 。 示例&#xff1a;输入[“flower”,“flow”,“flight”]输出"fl" 在Java中&#xff0c;你可以通过水平扫描&#xff08;Horizontal Scannin…