一、CSS引入方式

1.内部样式表

    <style>div {color: pink;}</style>

<body><div>内部样式表就是在html页面内部写样式，但是是单独写到style标签内部</div>
</body>

2.行内样式表

<body><p style="color: pink;">账户相关</p>
</body>

3.外部样式表

在外部创建一个后缀为.css的文件，路径是相对的。

4.综合案例

.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="综合案例.css">
</head>
<body><h1>客服温馨提示</h1><div>       <b class="one">2023.3.9 16:06 来源：</b><a href="#">淘宝网</a><input type="text" value="请输入查询条件" class="search"><button class="btn">搜索</button>        </div><hr><p>为了减少您可能的等待时间，您不妨先仔细阅读下面的常见问题。 查询物流状态，退货，退余额等操作均可以登录聚美优品网站后自助进行，无需联系客服。如果仍无法解决。请您在本页页底联系在线客服，或拨打聚美客服电话。小美谢谢您的理解！</p><p class="one">美订单什么时候发货？大概多长时间可以收到货？</p><p>正常情况下您的订单将在6小时内发出（最晚不超过1个工作日）。8月1日的订单，将在3日内全部发出。发货之后，您可以在我的订单中可以查看发货状态。由于快递公司可能无法实时更新信息，因此您看到的发货情况可能有一定延迟。</p><p>为什么后下的订单，先收到了，之前下的订单还没有收到？你们是按什么顺序发货的？</p><p>为了单位时间内以最快速度处理尽量多订单，聚美会适当综合按订单里货品配货的情况安排发货顺序，因此可能会出现订单发货和下单顺序不完全一致的情况。我们会尽一切努力为您尽快发货。</p><p class="two"><img src="faq03.jpg" width="500px" ></p><p class="one">订单显示发货了，但快递信息为什么还没有更新？</p><p>您在聚美订单页面看到的物流查询信息由快递公司传递提供。由于快递公司信息更新会有一定延迟，请您多多谅解。（延迟时间可能从1天到3天不等，EMS快递的物流配送信息可能最多可能有1周左右延迟）</p><p>名品折扣产品收到后，发现漏发了或者错发，应该怎么办？请您先准备好漏发，错发的相关图片（拍摄图片），再通过在线客服核实，我们需要和品牌商方面进行确认，待客服确认后会进行补发或退款。</p><p>如果使用了现金券或红包的订单想退货，怎么办？对没有付款的订单或者货到付款订单，您可以选择取消订单再重新下单。如果订单已经付款（或货到付款订单已被系统确认），请您自助登陆聚美优品网站提交退货申请，待聚美工作人员审批通过后订单就会进入退货状态，同时订单对应红包会变为“未使用”状态。此时您可以选择在我的订单页面将红包订单进行退款退货。</p>
</body>
</html>

.css文件

body {font: 16px/28px 'Microsoft YaHei'
}
h1 {font-weight: 400;/* 让h1里面的文字水平居中 */text-align: center;
}
div {color: #888888;font-size: 12px;text-align: center;
}
a {text-decoration: none;
}
.search {color: #666666;width: 170px;
}
.btn {font-weight: 700;
}p {font-size: 16px;text-indent: 2em;line-height: 24px; font-family: 'Microsoft yahei';
}
.one {font-weight: 700;
}
.two {text-align: center;
}

二、快速生成html结构语法

       /*tac+tab键*/text-align: center;/*ti2em+tab键*/text-indent: 2em;/*th+tab键*/text-height: 26px;/*lh+tab键*/line-height: 26px;/*td+tab键*/text-decoration: none;/*w100+tab*/width: 100px;/*h100+tab*/height: 100px;/* ... */

其他的也一样,比如background-color:bac+tab键。

快速生成HTML结构语法不准有空格

1.生成标签直接输入标签名按tab键即可比如div然后tab健，就可以生成<div> </div>
<div></div>
2.如果想要生成多个相同标签加上*就可以了比如div*3 就可以快速生成3个div
<div></div>
<div></div>
<div></div>
3.如果有父子级关系的标签，可以用>比如ul> li就可以了
<ul><li></li>
</ul>
4.如果有兄弟关系的标签,用+就可以了比如div+p
<div></div>
<p></p>
5.如果生成带有类名或者id名字的，直接写.demo或者#two tab 健就可以了
<div class="demo"></div>
<div id="two"></div>
p.one
<p class="one"></p>
span#gray
<span id="gray"></span>
6.如果生成的div类名是有顺序的，可以用自增符号$ .demo$*5
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
7.如果想要生成的标签内部些内容可以用{}表示
div{我是.hh}+tab
<div>我是.hh</div>
div{$}*5
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

三、复合选择器

前面我们已经学习了基础选择器,比如标签选择器、类选择器等等,接下来我们在这个的基础上再学习复合选择器。

1.后代选择器

后代选择器:元素1 元素2 { } ，元素2是元素1的后代，可以是儿子也可以是孙子，是后代就行(元素1和元素2是基础选择器)。

<body><ol><li>哈喽，我是ol的孩子</li><li>哈喽，我是ol的孩子</li><li>哈喽，我是ol的孩子</li></ol><ul><li>嘿嘿</li><li>嘿嘿</li><li><a href="#">嘿嘿</a></li></ul><ul class="one"><li>嘿嘿</li><li>嘿嘿</li><li><a href="#">嘿嘿</a></li></ul>
</body>

<style>ol li {color: pink;}ul li a {color: blue;}.one li a {color: red;}
</style>

2.子选择器

子选择器元素1>元素2{ } ，元素2必须是元素1的亲儿子，孙子等后代不行。

<body><div><a href="#">我是儿子</a><p><a href="#">我是孙子</a></p></div>
</body>

<style>div>a {color: green;}
</style>

3.并集选择器

并集选择器元素1,元素2{ }

<body><div class="two">熊大</div><p>熊二</p><span>光头强</span><ul class="pig"><li>佩奇</li><li>乔治</li><li>猪妈妈</li></ul>
</body>

<style>/* 把熊大熊二改成相同颜色.two,p {color: brown;} *//* 把熊大熊二猪猪都改成相同颜色 */.two,p,.pig li {color: blueviolet;}
</style>

4.链接伪类选择器

<body><a href="#">喜羊羊</a><a href="http://www.xxxx.com" class="a">美羊羊</a><input type="text"> <input type="text"> <input type="text">
</body>

    <style>/* 必须是link visited hover active 的顺序声明 改变顺序无效 LVHA:love hate(方便记) *//* a链接在浏览器中有默认样式，必须单独指定样式 如改变body但是a不得改变 *//* 1.未访问过得链接 a:link 把没访问过得链接选出来*/a:link {color: black;}/* 2.a：visited 访问过得链接选出来 */a:visited {color: orange;}/* 3.a:hover 选择鼠标经过的那个链接 */a:hover {color: aqua;}/* 4.a:active 选择我们鼠标按下还没有弹起鼠标的那个链接 */a:active {color: blueviolet;}/* 平时用法 */.a {color: black;text-decoration: underline;}.a:hover {color: red;}/* :focus 伪类选择器 光标在的表单元素*/input:focus {background-color: pink;}</style>

效果:

CSS引入方法快速生成and复合选择器相关推荐

最简单的方法快速生成抖音风格文字——使用HTML和CSS代码
最简单的方法快速生成抖音风格文字--用HTML和CSS代码大家好! 这是我第一次与大家分享心得.希望能与大家共同学习.共同提升. 抖音作为近年来大火的APP,其具有特色的图标和字体收到了不少人的喜爱 ...
Word怎么生成目录？4个方法快速生成目录！
案例:Word怎么生成目录 [想问下大家在使用Word时是怎么生成目录的呀?正在写毕业论文的我真的很急!感谢!] Word作为我们常用的办公软件,为我们的提供了很多便利.生成目录是在Word文档中创建 ...
【攻破css系列——第三天】复合选择器
文章目录 1. 复合选择器 1.1 定义 1.2 分类 1.3 元素分类 1.4 后代选择器 1.4.1 定义 1.4.2 语法 1.4.3 示例 1.5 子选择器 1.5.1 定义 1.5.2 语法 ...
黑马程序员pink老师前端h5(html5)+css3(16)P94-P104伪类选择器上并集选择器子选择器后代选择器emmet语法生成标签快速格式化代码复合选择器简介
P94-emmet语法生成标签 Emmet语法 Zen codig他使用缩写,来提高htmlcss编写速度 div+p div class="nav" div id="b ...
CSS中如何快速生成雪碧图
最近遇到了导入雪碧图的项目,因为雪碧图更加好写,然后发现了一款比较好用的可以在线生成雪碧图的网页: https://www.toptal.com/developers/css/sprite-gener ...
10个可视化 CSS 工具，快速生成 CSS 片段
作者: Jatin Sharma 译者:前端小智来源:dev 有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.com/qq ...
CSS_10个可视化 CSS 工具，快速生成 CSS代码
1. Neumorphism https://neumorphism.io/#e0e0e0 这个网站为 section 或 div 生成对应UI,它也可以自定义border-radius, box-s ...
在html中引入css内部样式表使用,CSS样式学习笔记（三）html文件引入CSS的方法（2）...
一.CSS样式规则 CSS样式规则二.html文件中引入CSS样式的方法有以下三种(行内样式,内部样式表,外部样式表): 2.1 行内样式( 使用style属性引入CSS样式) 实现方式:CSS样式 ...
0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...

CSS引入方法快速生成and复合选择器

文章目录