CSS的选择器、常用属性、盒子模型和定位

最新推荐文章于 2024-07-30 23:06:43 发布
最新推荐文章于 2024-07-30 23:06:43 发布
阅读量456 收藏 7
点赞数 9
文章标签： css tensorflow 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/secret010/article/details/140273217
版权

CSS

选择器

CSS选择器：选择页面(文档)中对应的标签，并设置样式

通配符选择器
//*：通配符选择器，选择页面中所有的标签
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>一级标签</h1>
        <h2>二级标签</h2>       
        <p>用良心做教育</p>
        <p>做真实的自己</p>   
        <span>匠心育人</span>
        <span>初心至善</span>
    </body>
</html>
基本选择器

基本选择器分为标签选择器、类(class)选择器、ID选择器

标签选择器
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        p{
            color: #FF0000;
        }
    </style>
    <body>
        <h1>一级标签</h1>
        <p>用良心做教育</p>
        <span>匠心育人</span>
    </body>
</html>
类（class）选择器

以 . 开头

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .myclass{
                color: #FF0000;
            }
        </style>
    </head>
    <body>
        <h1 class="myclass">一级标签</h1>
        <h2>二级标签</h2>
    </body>
</html>
ID选择器

以#开头，id唯一

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        #myid{
            color: #FF0000;
        }
    </style>
    <body>
        <h1 id="myid">一级标签</h1>
        <h2>二级标签</h2>
    </body>
</html>
​
基本选择器的优先级

ID选择器 > Class选择器 > 标签选择器

群组选择器
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
            h1,h3,h5,p{color: red;}
        </style>
    <body>
        <h1>一级标签</h1>
        <h2>二级标签</h2>
        <h3>三级标签</h3>
        <h4>四级标签</h4>
        <h5>五级标签</h5>
        <h6>六级标签</h6>
        <p>用良心做教育</p>
        <p>做真实的自己</p>
    </body>
</html>
​
派生选择器

也被称为上下文关系选择器

分为后代选择器、子代选择器、相邻兄弟选择器

后代选择器

注意使用空格符号

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
            ul a{
                color: red;
            }
        </style>
    <body>
        <ul>
            <li>
                <a href="#">超链接1</a>
            </li>
            <li>
                <a href="#">超链接2</a>
            </li>
            <li>
                <a href="#">超链接3</a>
            </li>
        </ul>
        
        <ul>
            <li>
                <a href="#">超链接4</a>
            </li>
            <li>
                <a href="#">超链接5</a>
            </li>
            <li>
                <a href="#">超链接6</a>
            </li>
        </ul>
        
        <a href="#">超链接7</a>
        <a href="#">超链接8</a>
        <a href="#">超链接9</a>
    </body>
</html>
​
子代选择器

注意：使用>符号

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
            li>a{
                color: red;
            }
        </style>
    <body>
        <ul>
            <li>
                <a href="#">超链接1</a>
            </li>
            <li>
                <a href="#">超链接2</a>
            </li>
            <li>
                <a href="#">超链接3</a>
            </li>
        </ul>
        
        <ul>
            <li>
                <a href="#">超链接4</a>
            </li>
            <li>
                <a href="#">超链接5</a>
            </li>
            <li>
                <a href="#">超链接6</a>
            </li>
        </ul>
        
        <a href="#">超链接7</a>
        <a href="#">超链接8</a>
        <a href="#">超链接9</a>
    </body>
</html>
​
相邻兄弟选择器

注意使用+符号

样式作用在后者

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a+a{
                color: red;
            }
        </style>
    </head>
    <body>
        
        <ul>
            <li>
                <a href="#">超链接1</a>
            </li>
            <li>
                <a href="#">超链接2</a>
            </li>
            <li>
                <a href="#">超链接3</a>
            </li>
        </ul>
        
        <ul>
            <li>
                <a href="#">超链接4</a>
            </li>
            <li>
                <a href="#">超链接5</a>
            </li>
            <li>
                <a href="#">超链接6</a>
            </li>
        </ul>
        
        <a href="#">超链接7</a>
        <a href="#">超链接8</a>
        <a href="#">超链接9</a>
    </body>
</html>
​
属性选择器
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 属性选择器
			 * 
			 * 单个属性的属性选择器：
			 * 	input[placeholder]{color: red;}
			 * 
			 * 单个属性+值的属性选择器：
			 * 	input[type="text"]{color: red;}
			 * 
			 * 多个属性的属性选择器：
			 * 	input[name][placeholder]{color: red;}
			 * 
			 * 多个属性+值的属性选择器：
			 * 	input[type="text"][placeholder]{color: red;}
			 * 	input[type="text"][placeholder="请输入账号..."]{color: red;}s
			 */

		</style>
	</head>
	<body>
		<form action="服务器地址" method="post">
			
			账号：<input type="text" name="username" placeholder="请输入账号..."/>
				<br />
			密码：<input type="password" name="password" placeholder="请输入密码..."/>
				<br />
			确认密码：<input type="password" name="repassword"/>
				<br />
			姓名：<input type="text" name="name"/>
				<br />
			昵称：<input type="text" name="nickName" placeholder="请输入昵称..."/>
				<br />
			性别：
				<input type="radio" name="sex" value="man" checked="checked"/>男
				<input type="radio" name="sex" value="woman"/>女
				<br />
			爱好：
				<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
				<input type="checkbox" name="hobbies" value="basketball" checked="checked"/>篮球
				<input type="checkbox" name="hobbies" value="shop"/>购物
				<br />
			国籍：
				<select name="nationality">
					<option value="001">韩国</option>
					<option value="002">美国</option>
					<option value="003" selected="selected">中国</option>
					<option value="004">日本</option>
				</select>
				<br />
			
			<input type="submit" value="注册" />
		</form>
	</body>
</html>
锚伪类

设置超链接各个状态的样式（未访问状态、已访问状态、鼠标悬停在超链接状态、鼠标按下状态）

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a:link {color: #FFCCFF}		/* 未访问的链接 */
			a:visited {color: #FF0000}	/* 已访问的链接 */
			a:hover {color: #66FF66}	/* 鼠标移动到链接上 */
			a:active {color: #33FFFF}	/* 选定的链接 */
		</style>
	</head>
	<body>
		
		<a href="http://www.163.com">跳转页面</a>
		
	</body>
</html>

常用属性

样式的优先级
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			样式的优先级别：
				行内样式 > 内/外部样式
			
			注意：内外部样式要看加载顺序
        -->
		
		<!--外部样式表-->
		<link rel="stylesheet" type="text/css" href="../../css/new_file.css"/>
		
		<!--内部样式表-->
		<style type="text/css">
			h1{color: red;}
		</style>
	</head>
	<body>
		<!--行内样式表-->
		<h1 style="color: blue;">我好像在哪儿见过你</h1>
		
	</body>
</html>
常用的CSS属性

1.字体属性

属性名称

font-family(字体)

font-size（大小）

font-style（风格）

---- normal标准样式

---- italic斜体

---- oblique倾斜

---- inherit从父类继承的字体样式

font-weight(字体加粗)

----normal标准样式

----bold粗体

----bolder更粗

----lighter更细

2.文本属性

属性名称

letter-spacing(字母间隔)

text-decoration（划线修饰）

text-align（文本对齐方式）

text-indent(文本缩进)

line-height（行高）

3.背景

属性名称

background-color

background-image

background-repeat

4.边框

属性名称

border-bottom

solid(实线)

dashed(虚线)

double(双实线）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			p{
				font-family: "微软雅黑";/*设置字体*/
				font-size: 50px;/*设置字体大小*/
				font-style: italic;/*设置字体样式*/
				font-weight: bold;/*设置字体粗细*/
				
				letter-spacing: 10px;/*设置文本间隔*/
				text-decoration: underline;/*设置文本划线*/
				text-align: center;/*设置对齐方式*/
				background-color: red;/*设置背景颜色*/
				color: white;/*设置字体颜色*/
				
				border: orange 5px solid;/*设置边框：颜色，粗细，实线*/
			}
			
			a:link {color: #000000}		/* 未访问的链接 */
			a:visited {color: #000000}	/* 已访问的链接 */
			a:hover {color: #3366FF}	/* 鼠标移动到链接上 */
			a:active {color: #3366FF}	/* 选定的链接 */
			
			a{
				text-decoration: none;/*去除划线*/
			}
			
			button{
				width: 500px;
				height: 500px;
				background-image: url(../../img/01.jpg);/*设置背景图片*/
				background-repeat:repeat-y;/*设置平铺方式*/
			}
			
			img{
				border-radius: 50%;/*倒圆角*/
			}
			
		</style>
	</head>
	<body>
		
		<p>我好像在哪儿见过你</p>
		
		<a href="#">地图</a>
		<br />
		
		<button>普通按钮</button>
		<br />
		
		<img src="../../img/01.jpg" width="100px" height="100px" />
	</body>
</html>

盒子模型

内边距
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: orange 1px solid;
			
			padding: 50px;/*设置上下左右内边距*/
			padding-top: 50px;/*设置上内边距*/
			padding-bottom: 50px;/*设置下内边距*/
			padding-left: 50px;/*设置左内边距*/
			padding-right: 50px;/*设置右内边距*/
			
			/*
			 * 注意1：内边距可能会把盒子撑变形
			 * 注意2：IE老版本不支持内边距
			 * 经验：能不用内边距就不用
			 */
		}
	</style>
	<body>
		<div>
			<span>我好像在哪儿见过你</span>
		</div>
	</body>
</html>
外边距
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: orange 1px solid;
			
			margin-top: 50px;/*设置上外边距*/
			margin-bottom: 50px;/*设置下外边距*/
			margin-left: 50px;/*设置左外边距*/
			margin-right: 50px;/*设置右外边距*/
			margin: 50px;/*设置上下左右外边距*/
		
		}
	</style>
	<body>
		<div>
			<span>我好像在哪儿见过你</span>
		</div>
	</body>
</html>
水平居中
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: orange 1px solid;
			
			margin: 0 auto;/*水平居中*/
		}
	</style>
	<body>
		<div>
			<span>我好像在哪儿见过你</span>
		</div>
	</body>
</html>

定位

相对定位

相对定位：保留原有位置，相对于原来的位置进行位移

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#manager{
			border: orange 1px solid;
			margin-top: 50px;
		}
		#box01{
			width: 100px;
				height: 100px;
				border: red 1px solid;
		}
		#box02{
				width: 100px;
				height: 100px;
				border: green 1px solid;
				
				position: relative;/*相对定位：保留原有位置，相对于原来的位置进行位移*/
				top: 50px;
				left: 50px;
			}
			
			#box03{
				width: 100px;
				height: 100px;
				border: blue 1px solid;
			}
	</style>
	<body>
		<div id="manager">
			<div id="box01"></div>
			<div id="box02"></div>
			<div id="box03"></div>
		</div>
	</body>
</html>
绝对定位

绝对定位：不保留原有位置，向上找寻父级元素，判断父级元素中是否有position属性，如果有就按照父级元素进行位置，如果没有就继续向上找寻父级元素，直到body为止

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#manager{
			border: orange 1px solid;
			margin-top: 50px;
		}
		#box01{
			width: 100px;
				height: 100px;
				border: red 1px solid;
		}
		#box02{
				width: 100px;
				height: 100px;
				border: green 1px solid;
				
				position: absolute;/*绝对定位：不保留原有位置，向上找寻父级元素，判断父级元素中是否有position属性，如果有就按照父级元素进行位置，如果没有就继续向上找寻父级元素，直到body为止*/
				top: 50px;
				left: 50px;
			}
			
			#box03{
				width: 100px;
				height: 100px;
				border: blue 1px solid;
			}
	</style>
	<body>
		<div id="manager">
			<div id="box01"></div>
			<div id="box02"></div>
			<div id="box03"></div>
		</div>
	</body>
</html>

固定定位
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			position: fixed;/*固定定位*/
			top: 80%;
			right: 20%;
		}
	</style>
	<body>
		
		<a name="top"></a><!--下锚点-->
		
		<div>
			<a href="#top">置顶</a>
		</div>
		
		<!--导航栏-->
		<a href="#new01">法治</a>
		<a href="#new02">国际</a>
		<a href="#new03">娱乐</a>
		
		<a name="new01"></a><!--下锚点-->
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<a name="new02"></a><!--下锚点-->
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<a name="new03"></a><!--下锚点-->
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>	
	</body>
</html>

0号程序员
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS小技能:常用样式属性、选择器分类、盒子模型
iOS逆向与安全
08-12 689
CSS(cascading style sheets,层叠式样式表)是一种用来表现HTML 或XML 等文件样式的计算机语言,CSS文档以.css作为后缀 。CSS的作用：设置HTML页面的布局和样式 CSS的语法： 1.1 HTML中引入CSS的方式 外部样式，link标签将外部样式表链接到页面。 内部样式是指放在 HTML 文件标签里的 内联样式表存在于 HTML 元素的 style 属性之中，每个 CSS 表只影响一个元素。 1.2 选择器 选择器的优先级排序:例子：+～结合filt
CSS 选择器命名规范化
09-25
在实际应用中，CSS选择器的命名并不严格限定于某一种命名法，可以根据项目需求和团队习惯灵活选择。重要的是确保选择器名称简洁、明了，易于其他开发者理解和维护。遵循的原则是"易读、易理解、利于协作"，而不是...
CSS入门学习之--选择器，属性及使用，盒子模型，浮动定位
lilcur的博客
01-23 836
入门学习
逆袭之路——python 前端开发之CSS选择器及属性、盒子模型、浮动【day40】
絵飛ヾ的魚的博客
04-26 1080
今日内容概要 伪元素选择器 选择器优先级 CSS 字体样式 CSS 文字属性 CSS背景属性 CSS 边框 display属性 盒子模型 浮动(重要) 解决浮动造成的影响 今日内容详细 一、伪元素选择器         通过css操作文本内容 修改首个字体样式 p:first-letter { color: red; font-size: 48px;
CSS-盒子模型之定位
weixin_52724250的博客
09-28 1305
一：定位的定义 定位可以让盒子自由地在另一个盒子的内部移动位置或者固定在屏幕中的某个位置，并且可以压住其它盒子。 二：定位使用方式 定位=定位模式+边偏移 2.1：定位模式 1.静态定位static 2.相对定位relative 3.绝对定位absolu 4.固定定位fixed 2.2：边偏移 top属性 bottom属性 left属性 right属性 三：使用定位 3.1静态定位static 2.默认定位方式，无定位的意思，无实际含义 选择器{position：stati
CSS3 属性选择器 伪类选择器 盒模型 圆角 阴影 CSS定位和浮动
Designer 小郑的技术博客
01-24 2539
HTML是网页的裸框架，但是现在已经是2020年了，你再做出一个80年代的网页来，恐怕是没HR要你了。所以学习CSS的重要性可想而知，CSS用途很广，是一门独立的编程语言，能美化网页，也能进一步提高自己的审美level。 就好比一套别墅一样，html就是房子的一砖一瓦组成的裸框架，css就是基于该房子的装饰，JavaScript就是主人在房子内的一系列动作...... CSS是一门独立的学科，...
HTML5&CSS3网页制作：盒子模型概述.pptx
05-31
例如，你可以通过给`<div>`添加id或class属性，然后在CSS中使用选择器如`#text`或`.text1`来设置特定的样式。此外，`<div>`可以嵌套，这样可以创建更复杂的布局结构。 盒子的大小是由其内容、内边距、边框和外边距...
前端基础知识包括盒子模型，css，html，布局和基础计算机进制知识
01-05
布局是指如何在页面上组织和排列元素，有多种布局技术，如流式布局（适合文本为主的网站）、网格布局（常用于响应式设计）、Flexbox（灵活的盒子模型，适用于复杂布局）和CSS Grid（二维网格系统，适用于复杂布局和...
css基础3-盒子模型
12-05
CSS 基础 - 盒子模型是 CSS 中的一個基础知识点，包括 CSS 三大特性、PxCook 的基本使用和盒子模型三个部分。 CSS 三大特性 CSS 三大特性包括继承性、层叠性和优先级。继承性是指子元素继承父元素的样式，层叠性是...
纯CSS3绘制盒子猫和老鼠特效
04-25
6. **CSS3盒模型和边距**： - 使用CSS3的盒模型（包括内边距和外边距）来调整元素的大小和位置，使整个场景更加美观和协调。 7. **CSS3响应式设计**： - 考虑到可能需要在不同设备上展示，可能会使用媒体查询(`...
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1301
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
嵌入式C++、STM32、树莓派4B、OpenCV、TensorFlow/Keras深度学习：基于边缘计算的实时异常行为识别
嵌入式极客小张
07-20 1561
随着物联网和人工智能技术的飞速发展，家庭安全愈发受到重视。本项目旨在构建一套基于边缘计算的智能家居安全系统，利用STM32微控制器和树莓派4B作为核心硬件，实时分析摄像头数据，智能识别异常行为（如入侵、跌倒等），并即时发出警报。 系统采用Python和C语言进行开发，其中树莓派运行TensorFlow/Keras深度学习模型，结合OpenCV进行图像处理，确保高效的行为识别。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 440
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
07-30 224
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 284
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 453
对于上云api开发学习过程中的错误教训积累总结
electron 主进程和渲染进程
qq_21087199的博客
07-29 289
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1317
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
前端代码混淆加密（使用Terser、WebpackObfuscator）
最新发布
@Fonden
07-30 270
（注意Terser和WebpackObfuscator引入的方式不同，后者是放到plugins中）② 在 Terser 之后使用 WebpackObfuscator 进行混淆。以此在网上查找到相应工具有：Terser、WebpackObfuscator。① 使用 Terser 进行代码压缩和 source map 生成，② 设置在生产环境中才去使用混淆加密工具（开发环境会产生各种报错）为了对公司项目进行安全防护措施，前端需要进行代码混淆加密处理。压缩代码、变量和函数名混淆、删除未使用代码。
CSS基础：盒子模型与选择器优先级解析
CSS盒子模型描述了网页元素在页面上占用的空间，分为两种模型：W3C标准盒子模型和IE低版本的怪异盒模型。 - **W3C标准盒子模型**：在这个模型中，元素的实际内容宽度和高度（content）是我们设置的width和height...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值