3.CSS

最新推荐文章于 2024-09-06 09:38:49 发布
最新推荐文章于 2024-09-06 09:38:49 发布
阅读量391 收藏 1
点赞数 1
分类专栏： 基础篇 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45131319/article/details/104380296
版权

文章目录

简介

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 外部样式表可以极大提高工作效率
  • 样式定义如何显示 HTML 元素
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题



选择器

<html>
<head>
	<title>This is the title</title>
	<style type="text/css">
		h1{         #元素选择器
			color:red;#定义前景色
			background-color:yellow;
		}
		#content{   #id选择器
			color:black:
			background-color:white;
		}
		.content{   #类选择器
			color:blue;
			background-color:green;
			font-size:16px;
		}
		a[href]{    #属性选择器
			color:darkbule;
			font-size:23px;
		}
		h2 em{      #后代选择器
			color:oldlace;
		}
		h3 >l{      #子元素选择器
			color:orange;
			border:green solid 1px;        #dashed为实心边框
		}
		li + p{     #相邻兄弟选择器
			font-weight:bold;
			outline:greenyellow dotted 5px;#轮廓
		}
		ul{
			list-style-type:none;          #去掉列表的实心圆
		}
	</style>
</head>
<body>
	<h1>This is the content</h1>
	<h2 id="content">This is the another content</h1>
	<h2 class="content">This is the another content</h1>
	<a href>This is the another content</a>
	<h2><em>still a content</em></h2>
	<h3>Again <em>is </em>a <l>the </l>content</h3>
	<ul>
		<li>Last a the content</li>
		<p>Last a the content</p>
		<li>Lat a the content</li>
		<p>Last a the content</p>
	</ul>
	<p>Last a the content</p>
</body>
</html>

在这里插入图片描述

伪元素
CSS 伪元素用于向某些选择器设置特殊效果。

<html>
<head>
	<title>This is a title</title>
	<style type="text/css">
		h3#id:first-letter{
			color:yellowgreen;
			font-size:xx-large;
		}
		h3.line:first-line{
			color:red;
		}
	</style>
</head>
<body>
<h3 id="id">
You can use the:first-letter change first letter<br>
</h3>
<h3 class="line">
You can use the:first-line<br>
change first line
</h3>
</body>
</html>

在这里插入图片描述

伪类

CSS 伪类用于向某些选择器添加特殊的效果。 
<html>
<head>
	<title>This again title</title>
	<style>
		a:link{color:#0000FF}   #链接
		a:visited{color:black}  #已经访问
		a:hover{color:green}    #悬停
		a:active{color:greenyellow}  #选定
	</style>
</head>
<body>
	<a href="https://me.csdn.net/weixin_45131319">This is a link</a>
</body>
</html>



盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外间距，边框，内间距，和HTML元素

在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>still is a title</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>
<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

</body>
</html>

在这里插入图片描述




表格

CSS 表格属性可以帮助您极大地改善表格的外观 
<html>
<head>
	<title>This again title</title>
	<style >	
		*{
			margin:0px; #外边距为0

		}
		table{
			border-collapse:collapse; #折叠表格
		}	
		table,th,td{
			border:darkgray solid 1px; #边框为深灰色	
			
		}
		table{
		width:100%; #使表格铺满浏览器
		}
		th{
		height:50px;
		}
		td{
			text-align:center; #居中
			height:50px;
			background-color:black;
			color:white
		}
	</style>
</head>
<body>
	<table>
		<tr>
		<th>班级</th><th>姓名</th><th>年龄</th>
		</tr>
		<td>大班</td><td>小明</td><td>16</td>
	</table>
</body>
</html>



定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。

绝对定位

元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位

<html>
<head>
	<title>This again title</title>
	<style >	
		#left{
			width:200px;
			height:200px;
			background-color:green;
			position:absolute;
			
		}
		#right{
			width:150px;
			height:150px;
			background-color:red;
			position:absolute;
		}
	</style>
</head>
<body>
	<div id="left"></div>
	
	<div id="right"></div>
</body>
</html>

在这里插入图片描述

相对定位

相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局

<html>
<head>
	<title>This again title</title>
	<style >	
		#left{
			width:200px;
			height:200px;
			background-color:green;
			position:absolute;


			
		}
		#right{
			width:150px;
			height:150px;
			background-color:red;
			position:absolute;
			top:20px;
			left:20px;
			
			
		}
	</style>
</head>
<body>
	<div id="left"></div>
	
	<div id="right"></div>
</body>
</html>

在这里插入图片描述
浮动

  • 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
<html>
<head>
	<title>This again title</title>
	<style >	
		#left{
			width:200px;
			height:200px;
			background-color:green;
			float:left;
			
		}
		#right{
			width:200px;
			height:200px;
			background-color:red;
			float:right;
		}
	</style>
</head>
<body>
	<div id="left"></div>
	
	<div id="right"></div>
</body>
</html>

在这里插入图片描述

盖头盖
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
68种动画效果的CSS3动画库vivify.css
12-13
Vivify.css是一款带68种动画效果的CSS3动画库。vivify.css动画库和Animate.css类似，为网页元素提供各种CSS3动画效果。vivify.css动画库内置了68种炫酷的CSS3动画效果。
HTML head 元素，应验而知，神人众人捧啊
chenggong9527的博客
01-31 154
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>菜鸟教程(runoob.com)</title> <styletype="text/css"> h1{color:red;} p{color:blue;} </style> </head> <body> <h1>火天大...
wow.min.js和animate.css
04-20
"wow.min.js" 和 "animate.css" 是两个非常有用的工具，它们共同为网页添加了丰富的CSS3动画效果。接下来，我们将深入探讨这两个组件的工作原理、如何使用以及它们在网页设计中的应用。 首先，"wow.min.js" 是一个...
我对乔普林的个人userchrome.css和userstyles.css。-JavaScript开发
05-26
）的基础上，并受到Mac / iOS的Things 3应用程序以及我喜欢的一些细节的启发，特别为支持我的日常GTD（完成事情）工作流而设计。 以下是有关我的设置的一些详细信息。 详细信息：这些是我添加到主题中的资源。 设置...
Hover.css使用代码
05-24
3. **SCSS**: SCSS（Sassy CSS）是另一种流行的CSS预处理器，它在LESS的基础上增加了更多特性，如嵌套选择器、变量、混合（mixins）、导入指令等。Hover.css中的`.scss`文件与LESS文件类似，为开发者提供了源代码，...
2.HTML
My笔记的博客
02-17 3026
介绍 HTML文件是什么？ HTML表示超文本标记语言（Hyper Text Markup Language）。 HTML文件是一个包含标记的文本文件。 这些标记保速浏览器怎样显示这个页面。 HTML文件必须有htm或者html扩展名。 HTML文件可以用一个简单的文本编辑器创建。<html> #告诉浏览器这是html文档 <head>#头信息中间填标题 <titl...
1.基础知识
My笔记的博客
02-16 616
1.什么是计算机网络 计算机网络是利用通信线路将不同地理位置、具有独立功能的计算和通信设备连接起来，实现资源共享和信息传递 主要有局域网、城域网、广域网和英特网等。 2.信息系统 信息系统是能进行信息的采集、传输、存储、加工使用和维护的计算机应用系统。 3.信息安全 信息安全是指保护计算机硬件、软件、及数据不因偶然或恶意的原因而遭到破坏、更改、泄露，保障系统连续可靠正常地运行，信息服务不中断。 ...
5.PHP(上)
My笔记的博客
03-22 587
文章目录 一、简介 二、输出 三、数据类型 三、运算符 四、程序结构 五、表单 五、数据库操作 简介 PHP（全称：PHP：Hypertext Preprocessor，即“ PHP：超文本预处理器”）是一种通用的开源脚本语言。 PHP文件可包含文本，HTML，JavaScript代码和PHP代码 PHP代码在服务器上执行，结果以纯HTML形式返回给浏览器 ...
4.JavaScript
My笔记的博客
02-21 257
文章目录 一、简介 二、输出 三、盒子模型 四、表格 五、定位 简介 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智 能手机等设备。 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 Java...
6.PHP(下)
My笔记的博客
09-05 176
1. PHP中的正则表达式 正则表达示我们其实之前经常看到，它主要用在以下一些地方：匹配邮箱、手机号码、验证码、替换敏感的关键词。 例如：涉及政治和骂人的话 PHP的正则表达示定界符的规定如下： 定界符，不能用a-zA-Z0-9\ 其他的都可以用。必须成对出现，有开始就有结束。 例子 说明 /中间写正则/ true $中间写正则 $ true %中间写正则% true ^中间写正则 ^ true @中间写正则@ true (中间写正则) false A中间写正则A
css的position定位的属性
qq_43235503的博客
08-30 631
css的position定位的属性
vue点击导航滚动到相应位置，鼠标滚动到相应位置对应导航名称高亮
Z18834071903的博客
09-03 632
vue点击导航滚动到相应位置，鼠标滚动到相应位置对应导航名称高亮
CSS解析:定位和层叠上下文
晓风残月淡的博客
08-31 2093
许多开发人员对定位的理解很粗略，如果不完全了解定位，就很容易给自己挖坑。有时候可能会把错误的元素放在其他元素前面，要解决这个问题却没有那么简单。一般的布局方法是用各种操作来控制文档流的行为。定位则不同：它将元素彻底从文档流中移走。它允许你将元素放在屏幕的任意位置。还可以将一个元素放在另一个元素的前面或后面，彼此重叠。
css spacing设置间距
时间不说谎
09-03 262
将在每个单词之间增加30像素的间距。这个属性可以增加或减少字与字之间的空白，并且允许负值，即减少字与字之间的间距。将在每个字母之间增加10像素的间距。这个属性会影响一个单词中每个字母之间的间距，使得单词中的字母之间也有空白。属性用于设置单词之间的间距。它只影响英文单词之间的间距，对中文无效。属性用于设置字母之间的间距，适用于中文和英文。
css radius
时间不说谎
09-03 598
在 css 中，radius 属性用于设置元素角落的圆角半径，以创建更美观的现代化外观。属性值包含绝对长度或百分比，或继承父元素的半径。指定一个值会影响所有四个角，指定两个值会分别影响左上角和右下角、右上角和左下角的半径。Radius 是 CSS 中的一个属性，它允许开发者对元素的角落进行圆角处理。它为元素创建圆角边框，使元素看起来更加美观和现代。radius 属性在所有现代浏览器中都得到广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。
VitePress 自定义 CSS 指南
最新发布
软考鸭
09-06 355
首先，在你的 VitePress 项目中，创建一个自定义 CSS 文件。例如，在目录下创建一个名为custom.css的文件。接下来，你需要在自定义主题入口文件中引入这个 CSS 文件。如果你的项目结构遵循 VitePress 的默认布局，这个文件通常是。import './custom.css' // 引入自定义 CSS。
css之雪碧图（精灵图）
qq_55961367的博客
09-02 662
雪碧图（Sprite）是一种在Web开发中常用的图像合并技术，将多个小图标或图片合并成一张大图，然后通过CSS来显示其不同部分。这种技术可以减少HTTP请求数量，提高网页加载速度。如果一张大图由许多小图构成，那么每张小图都需要进行网络请求，这样一来就会有很多请求，为了减少网络请求，雪碧图就出现了。听到雪碧图是不是跟我一样，啥？以下是本人自己写的例子，大图的图片是在百度找的。
<link rel="stylesheet" type="text/css" href="css3-3.css">
06-20
`<link>`是HTML中的一个元素，`rel="stylesheet"`定义了链接文档的类型为样式表，`type="text/css"`指定了文件的MIME类型为文本/样式表，`href="css3-3.css"`则是指向要加载的CSS文件的URL路径，即`css3-3.css`文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值