第三次网页前端培训笔记（CSS选择器）

最新推荐文章于 2023-07-28 11:17:40 发布
最新推荐文章于 2023-07-28 11:17:40 发布
阅读量343 收藏
点赞数 1
文章标签： 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62156548/article/details/122800198
版权

基本使用

CSS三种使用方式

声明需要用花括号，并用分号隔开（最好一个声明一行）

1.行内样式：直接写在标签上的样式，在标签上通过style属性定义的样式

<h3>你好</h3>
<h3 style="color:red;font-family:楷体;">你好</h3>

2.内部样式：定义在style标签中的样式，style标签一般设置在head标签中

    <style>
		h3{
			color:palevioletred
		}/*设置所有h3标签的文本为粉色*/
		</style>
		
		<h3>你好</h3>
		<h3>请问你叫什么名字</h3>

3.外部样式：定义在外部的CSS文件中，通过link标签引入

<link rel="stylesheet" type="text/css" href="css/style.css"/>
<h3>你好</h3>
<h3>请问你叫什么名字</h3>
h3{
	font-size: 10px;
	color: #550000;
}

 基本选择器

1.通用选择器：选择所有

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/*通用选择器*/
		*{
			color: #FFA500;
		}
		</style>
	</head>
	
	<body>
		
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<h3>标题1</h3>
		<h3>标题2</h3>
		<h2>标题3</h2>
		<p>段落</p>
		<div>这是一个标签</div>
		<span>zheyeshi标签</span>
		<br>
		<font>font</font>
		
	</body>

2.元素选择器  

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/*元素选择器*/
		h3{
			color: aquamarine;
			font-size: 20px;
		}
		</style>
	</head>
	
	<body>
		
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<h3>标题1</h3>
		<h3>标题2</h3>
		<h2>标题3</h2>
		<p>段落</p>
		<div>这是一个标签</div>
		<span>zheyeshi标签</span>
		<br>
		<font>font</font>

3.ID选择器(更加精准)

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/*ID选择器*/
		#p1{
			color: brown;
			font-size: larger;
		}
		</style>
	</head>
	
	<body>
		
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<h3>标题1</h3>
		<h3>标题2</h3>
		<h2>标题3</h2>
		<p id="p1">段落</p>
		<div>这是一个标签</div>
		<span>zheyeshi标签</span>
		<br>
		<font>font</font>
		
	</body>

4.类选择器

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/*类选择器*/
		.cls1{
			font-family: "楷体";
		}
		</style>
	</head>
	
	<body>
		
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<h3>标题1</h3>
		<h3>标题2</h3>
		<h2>标题3</h2>
		<p id="p1">段落</p>
		<div>这是一个标签</div>
		<div class="cls1">这是另一个标签</div>
		<span class="cls1">zheyeshi标签</span>
		<br>
		<font>font</font>
		
	</body>

5.分组选择器

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/*分组选择器*/
		#p1,.cls1,font {
			color: #55ff7f;
		}
		</style>
	</head>
	
	<body>
		
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<h3>标题1</h3>
		<h3>标题2</h3>
		<h2>标题3</h2>
		<p id="p1">段落</p>
		<div>这是一个标签</div>
		<div class="cls1">这是另一个标签</div>
		<span class="cls1">zheyeshi标签</span>
		<br>
		<font>font</font>
		
	</body>

组合选择器

1.后代选择器（原生选择器）：选择指定元素的所有指定后代元素，以空格隔开

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/*后代选择器*/
		.food li{
			border: #7FFFD4 solid 1px;
			/*设置边框颜色以及实心线*/
		}
		</style>
	</head>
	<body>
	
	<ul class="food">
		<li>水果
			<ul>
				<li>葡萄</li>
				<li>橘子</li>
				<li>香蕉</li>
			</ul>
		</li>
		<li>蔬菜
			<ul>
				<li>西兰花</li>
				<li>上海青</li>
				<li>生菜</li>
			</ul>
		</li>
	</ul>
		
	</body>

2.子元素选择器选择指定元素的第一代子元素，以大于号隔开

 

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

		/*子代选择器*/
		.food2>li{
			border: #A52A2A dotted 1px;
		}
		</style>
	</head>
	<body>
	
	<ul class="food1">
		<li>水果
			<ul>
				<li>葡萄</li>
				<li>橘子</li>
				<li>香蕉</li>
			</ul>
		</li>
		<li>蔬菜
			<ul>
				<li>西兰花</li>
				<li>上海青</li>
				<li>生菜</li>
			</ul>
		</li>
	</ul>
	
	<ul class="food2">
		<li>水果
			<ul>
				<li>葡萄</li>
				<li>橘子</li>
				<li>香蕉</li>
			</ul>
		</li>
		<li>蔬菜
			<ul>
				<li>西兰花</li>
				<li>上海青</li>
				<li>生菜</li>
			</ul>
		</li>
	</ul>
		
	</body>

3.相邻兄弟选择器：选择指定元素的下一个指定元素，两者有相同的元素，以加号隔开

 

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
        /*相邻兄弟选择器*/
		#mydiv+div{
			background-color: aquamarine;
		}
		</style>
	</head>
	<body>
		
		<div>相邻兄弟选择器 1 </div>
		<div id=mydiv>相邻兄弟选择器 2 </div>
		<div>相邻兄弟选择器 3 </div>
		<div>相邻兄弟选择器 4 </div>
		<div>相邻兄弟选择器 5 </div>
		
	</body>

4.普通兄弟选择器：选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪线隔开

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
        /*普通兄弟选择器*/
        #mydiv~div{
			background-color: antiquewhite;
		}
		</style>
	</head>
	<body>
		
		<div>普通兄弟选择器 1 </div>
		<div id=mydiv>普通兄弟选择器 2 </div>
		<div>普通兄弟选择器 3 </div>
		<div>普通兄弟选择器 4 </div>
		<div>普通兄弟选择器 5 </div>
		
	</body>

 

 

编程不秃头！！
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习笔记-黑马程序员CSS
01-09
前端学习笔记-黑马程序员CSS CSS 是一种标记语言，主要用于美化页面，美化 HTML，让画面更美观。总结来说，HTML 主要做结构，显示元素内容，而 CSS 负责美化，让结构（HTML）与样式（CSS）相分离。 一、CSS 语法...
斑码教育大前端课堂笔记-css第一天
11-24
【CSS第一天】——斑码教育大前端课堂笔记详解 斑码教育是专注于IT技术培训的机构，其在前端开发领域的教学资源备受关注。本篇笔记是斑码教育sy101课程的第一天内容，主要围绕CSS（Cascading Style Sheets）展开，...
CSS样式
anyi2351033836的博客
04-20 283
CSS三种引入方式 行内样式 行内样式:只在一个标签中起作用 <!-- 1.行内样式:写在某个标签的style属性中 特点:只对这个标签有效--> <h1 style="color: blue">明天放假哎</h1> 第二种内部样式 内部样式:只在一个HTML文件中起作用 <!--2.内部样式:写在style标签中 特点:本网页标签中有效--> <style> h3{ color: aqua; } </st
CSS学习笔记
最新发布
m0_50488257的博客
07-28 104
用于html文档中的元素样式的定义，美化页面。
CSS3 基础选择器
qq_62283694的博客
12-25 162
CSS3 基础选择器
DOM Style样式对象的详细用法
weixin_33910385的博客
08-06 730
DOM Style样式对象的详细用法 HTML Style样式比较复杂，相应访问、修改方法也有所差异。参考相关资料，整理如下。 典型Html文件如下，有三种定义方式。 <head> <style type="text/css"> /*内部样式*/ h3 {color:gre...
Css3弹性盒子属性认识
Suxiaomowang的博客
08-27 1372
flex box flex-direction 弹性容器中子元素的排列方式 row 横向从左到右排列（左对齐），默认的排列方式 row-reverse 横向从右到左排列（右对齐） column 纵向排列 column-reverse 纵向排列从下往上(底部对齐) flex-direction排列方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl.
CSS选择器笔记
05-16
**CSS选择器笔记** CSS（层叠样式表）选择器是网页设计中用来选取HTML或XML文档中的元素的工具，从而应用相应的样式规则。选择器的种类多样，可以帮助开发者精确地定位到页面上的任何元素，实现精准的样式控制。...
前端webcss3笔记.docx
08-16
本笔记主要讲解了 CSS3 的选择器、属性选择器、伪类选择器、伪元素选择器、阴影、字体、渐变等方面的知识点。 一、选择器 1. 兄弟选择器 - 相邻兄弟选择器：E + F，选择紧邻在 E 后面的 F 元素 - 通用兄弟选择器：...
前端第一阶段笔记HTML+CSS
08-15
CSS通过选择器匹配HTML元素，并应用相应的样式规则，如颜色、字体、布局等。 【项目开发流程】 在IT行业中，前端开发通常遵循以下步骤： 1. 项目经理/产品经理首先确定项目需求，组织立项会议。 2. UI设计师根据...
zhihuzheye:”之乎者也“是一个专栏类项目，使用了Vue3以及TypeScript
04-10
智虎之眼 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
web前端开发---css续2
qq_52956229的博客
09-30 404
css续2
通过使用html的css样式来达到给背景色添加渐变色的效果
小杨的博客
07-13 8678
html设置颜色渐变的方法：首先创建一个HTML示例文件；然后使用div标签创建一个模块；接着在css标签内通过“id(colorchange)”来设置div样式；最后通过linear-gradient属性设置div，在前端网页开发的时候，往往会用到一些渐变色的效果，这样可以使得前端页面更加美观。那么这些渐变效果是如何用css代码实现出来的？本章就给大家带来css如何实现渐变效果？ 第一份案例图及所需要求展示： 构思： 首先为整体设置个盒子，清除整体的浮动。整体宽750px，高480px，图片可以用back
Vue模板语法
m0_67477525的博客
09-02 288
昨天与大家分享了Vue入门，今天继续与大家分享关于部分Vue模板语法。
html文档定义样式信息是,html创建样式元素style
weixin_34449682的博客
06-03 137
【实例介绍】html创建样式元素style标签用于为HTML文档定义样式信息。在style中，可以规定在浏览器中如何呈现HTML文档。type属性是必需的，定义style元素的内容。【基本语法】【语法介绍】style元素只能在HTML文档的head内使用。Microsoft Intemet Explorer 4．0及以后版本允许多个样式块。此元素在Internet Explorer 3．0及以上版...
CSS布局
m0_63188530的博客
05-15 629
居中 一 居中布局： 水平居中： 1.inline-block + text-align 用法：对子框设置display:inline-block，对父框设置text-align:center。 设置了inline-block属性的元素，既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。 2.table+margin 用法：对子框设置块级表格（如table）display：table，再对子框设置水平居中 margin:0 auto tab.
表示颜色的单词 CSS background-color
wuyujin1997的博客
11-24 631
上网的时候突然打开F12，想改一下 body 标签的 background-color 。 鼠标单击background 属性的值，开始编辑：删除默认值，然后可以看到一个下拉列表，让我们选一种颜色。 然后我突然就想拿到这个列表里的所有单词，然后把有用的颜色(好看的颜色)背下来。background-color switch用这些单词设置颜色，写了个HTML，方便查看： 源码： 颜色 单词 background 与 background-color 的区别 See at: https://www.runo
background-color和background-image一起用时需注意
黑猫°
07-11 9689
不知道大家有没有遇到过background-color和background-image一起使用的情况，那有没有小伙伴遇到给了背景颜色，但是使用背景图片的时候，背景颜色会变透明，模拟代码如下(html里只有一个div)： div{ height: 500px; width: 500px; background-color: aquamarine; background: url('./img/head.png') no-repeat; b
夜光带你走进 前端工程师（二十）
夜光的博客
05-29 177
夜光序言： 再好的东西，都有失去的一天。 再深的记忆，也有淡忘的一天。 再爱的人，也有远走的一天。 再美的梦，也有苏醒的一天。 该放弃的决不挽留。 正文：Canvas绘制动画 如何让小方块动起来，嘿嘿 动起来：如何设置 /*** Created by Maibenben on 2018/4/9...
前端全栈学习笔记：JS、Vue、HTML5与CSS3深度解析
第6章CSS3详细阐述了选择器、颜色、文本、边框、盒模型、背景、渐变、过渡、转换、动画、伸缩布局、多列布局、Web字体以及兼容性管理，这些都是现代网页设计的必备技术。 第7章涉及了canvas标签，它是创建动态图形...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值