CSS基础语法

这篇具有很好参考价值的文章主要介绍了CSS基础语法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

CSS

标签选择器

内嵌式改变标签样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <!-- 属于标签选择器 -->
		<style>
			p{
				font - size: 16px;
				color: red;
			}
		</style>
	</head>
	<body>
		<p>
			nihao
		</p>
		
	</body>
</html>

外嵌式

.css文件

	p{
				font-size: 16px;
				color: red;
		}

.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入外部样式表  使用link标签关联两个文件-->
		<link href = "css/index.css" rel = "stylesheet"/>s
	</head>
	<body>
		<p>
			nihao
		</p>
		
	</body>
</html>

id选择器

**在标签中使用 id = [id名称] 命名,在< style>< /style>中对[id名称]进行修饰.语法

  • #id_name{
    
    }
    

类选择器

在标签中使用 class = [class名称],在< style>< /style>中对[id名称]进行修饰

  • 语法

    .class_name{
    
    }
    
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入外部样式表 -->
		<!-- <link href = "css/index.css" rel = "stylesheet"/> -->
		
		<style>
			/* 标签选择器 */
			p{
				font - size: 16px;
				color: red;
			}
			/* id选择器 */
			#id1{
				font - size: 16px;
				color: red;
			}
			/* 类选择器 */
            
			.p1{
				color: blue;
			}
			/* 选择器优先级   id > 类 > 标签选择器*/
			/* 通配选择器  可以选中所有的标签 */
			*{
				font-family:楷体;
			}
			#id2,.p2{
				color: yellow;
			}
			
		</style>
		
	</head>
	<body>
		<p id = "id1">
			nihao
		</p>
		<p class = "p1">
			你好
		</p>
		<p id = "id2">
			666
		</p>
		<p class = "p2">
			777
		</p>
		
	</body>
</html>

id选择器与类选择器的区别

  • ID 选择器的是以井号 # 开头来定义的。而类选择器是以点 . 来定义的。
  • ID 选择器在 HTML 中是可以通过 id 属性来使用。而类选择器是通过 class 属性来使用的。
  • 同一个页面中一个ID选择器只能在中出现一次,是唯一的。而类选择器可以在多次出现,所以ID选择器的针对性更强。

后代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Nine Percent</title>
		<style>
			.b1{
				background-image: url("img/cxk.png");
			}
			/* 后代选择器 */
			.u1 li{
				list-style-type: none;
				list-style-image: url("img/basketball.png");
				list-style-position: inside;
				color: blue;
				font-size: 200px;
				font-family: 方正舒体;
			}
			.li1{
				
			}
		</style>
	</head>
	<body class = "b1">
		<ul class = "u1">
			<li class = "li1">蔡徐坤</li>
			<li>陈立农</li>
			<li>范丞丞</li>
			<li>黄明昊</li>
			<li>林彦俊</li>
			<li>朱正廷</li>
			<li>王子异</li>
			<li>王琳凯</li>
			<li>尤长靖</li>
			<li>Nine Percent</li>
		</ul>
	</body>
</html>

文本修饰

  • color : 字体颜色
  • font-size: 字体像素大小 (px)
  • font-family:字体
  • font-weight:700;
  • font-style:italic(斜体)
  • text-decoration: line-through; 删除线
  • ~ : underline; 下滑线
  • line-height:文字行高(px)
  • letter-spacing: 字符的宽度(px)
  • word-spacing:单词之间的宽度(px)
  • text-indent: 文段的缩进(px/em)(em:表示当前一个文字的大小)
  • text-align: left; /* 添加此行以设置文本左对齐 */

背景修饰

  • background-image:url(“图片;链接”);背景图片
  • background-color:背景颜色
  • background-repeat:背景重复 no-repeat(不重复)
  • background-size:背景尺寸(px,px)
  • background-position: 背景位置

列表修饰

  • color:颜色
  • list-style-type: none(无序列号);
  • list-style-imag:url(“图片链接”);
  • list-style-position:inside(图片位置);
    • 以上都可以简写为list-style: [];

CSS 伪类

  • **[标签] : hover{}**鼠标放在[标签]的事件

要实现当鼠标悬停在.lead_text元素上时改变.floor元素的颜色,

​ 您可以使用CSS中的兄弟选择器(sibling selector)。通过这种方式,您可以选择.lead_text元素的兄弟元素(即.floor元素),并在.lead_text元素悬停时应用新的样式。

以下是如何修改您提供的CSS代码来实现这一效果:

.floor {
    width: 100px;
    height: 44px;
    background-color: white;
    position: absolute;
    top: 0px;
    z-index: 0;
}

.lead_text:hover + .floor {
    background-color: red;
}

在上面的代码中,使用了兄弟选择器+来选择.lead_text元素的紧邻兄弟元素.floor。当鼠标悬停在.lead_text元素上时,会选择紧邻的.floor元素,并将其背景颜色设置为红色。

通过应用上述CSS样式,您可以实现当鼠标悬停在.lead_text元素上时改变.floor元素的背景颜色的效果。您可以根据需要调整颜色和其他样式。

  • **[标签] : active{}**鼠标点击发生事件

  • [标签] : focus{} 想拥有鼠标点击的标签(输入框)添加样式

块级标签

块级标签:无论内容多少,都会独占一行,一般用来进行网页布局,可以设置宽高width height

行级标签

行级标签:只占自身大小,不会占一行,设置宽高无效

行级块

不占一行,可以设置长宽高

display.

盒模型

  • 内容区(content)
  • 内边距(padding)
  • 边框(border)
  • 外边框(margin)
  • 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

文档流

  • 文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分 成一行行 ,并在每行中按从左至右的顺序排放标签,即为文档流。

  • 在文档流`中标签默认会紧贴到上一个标签的右边,如果右边不 足以放下标签,标签则会另起一行,在新的一行中继 续从左至右摆放。

  • 这样一来每一个块标签都会另起一行,那么我们如果想在文档 流中进行 布局就会变得比较麻烦

比如:每个块元素都会另起一行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.nav_box{
				width: 600px;
				margin: 0px auto;
			}
			.nav{
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div class = "nav_box">
			<div class = "nav">网站首页</div>
			<div class = "nav">产品案例</div>
			<div class = "nav">公司介绍</div>
			<div class = "nav">联系我们</div>
		</div>
	</body>
</html>

CSS基础语法,前端,css,前端,html

为了解决这种问题,我们可以使用css浮动属性

浮动

float

transform

CSS的transform属性允许你对元素进行2D或3D转换。它包含了一系列函数,如旋转、缩放、倾斜和移动,可以用来改变元素的形状和位置。

2D转换函数

  1. translate():移动元素。
css复制代码

transform: translate(50px, 100px);
  1. scale():缩放元素。
css复制代码

transform: scale(2, 0.5); /* 宽放大2倍,高缩小到一半 */
  1. rotate():旋转元素。
css复制代码

transform: rotate(45deg); /* 旋转45度 */
  1. skew():倾斜元素。
css复制代码

transform: skew(30deg, 20deg); /* X轴倾斜30度,Y轴倾斜20度 */
  1. matrix():定义一个2D转换,使用六个值的矩阵。

3D转换函数

  1. translate3d():在3D空间中移动元素。
css复制代码

transform: translate3d(50px, 100px, 200px);
  1. scale3d():在3D空间中缩放元素。
css复制代码

transform: scale3d(2, 0.5, 1);
  1. rotate3d():在3D空间中旋转元素。
css复制代码

transform: rotate3d(1, 0, 0, 45deg); /* 绕X轴旋转45度 */
  1. rotateX()**rotateY()rotateZ():分别绕X轴、Y轴和Z轴旋转元素。
css复制代码

transform: rotateX(45deg);
  1. perspective():为3D转换元素定义透视视图。
  2. matrix3d():定义一个3D转换,使用16个值的4x4矩阵。

用法

你可以将多个转换函数结合使用,只需用空格分隔即可。例如:

css复制代码

transform: translate(50px, 100px) rotate(45deg) scale(2);

在上面的例子中,元素首先会移动,然后旋转,最后缩放。

注意:转换的顺序很重要,因为它们是按照你指定的顺序连续应用的。例如,先旋转后移动与先移动后旋转的效果是不同的。

另外,transform-origin属性可以用来改变转换的原点。默认的原点是元素的中心(50% 50%)。例如:

css复制代码

transform-origin: top left;

这将把转换的原点设置为元素的左上角。文章来源地址https://www.toymoban.com/news/detail-858596.html

到了这里,关于CSS基础语法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML和CSS的基础-前端扫盲

    想要写出一个网页,就需要学习前端开发(写网页代码)和后端开发(服务器代码)。 对于前端的要求,我们不需要了解很深,仅仅需要做到扫盲的程度就可以了。 写前端,主要用到的有: HTML  CSS  JS 前端开发,主要使用的开发环境主要有两个: 1.JetBrains系列 如IDEA专业版

    2024年02月05日
    浏览(48)
  • CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

    !DOCTYPE html !-- 这是HTML的注释 -- html lang=\\\"en\\\" id=\\\"myHtml\\\"     head         !-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --         meta charset=\\\"UTF-8\\\"         meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"         titleHtmlAll/title         

    2024年02月05日
    浏览(59)
  • 前端 | (五)CSS三大特性及常用属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月17日
    浏览(45)
  • 前端基础面试题(HTML,CSS,JS)

    前后端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库  web前端面试题库 VS java后端面试题库大全 代码结构:  使页面在没有css的情况下,也能够呈现出好的内容结构 有利于SEO:  爬虫根据标签来分配的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓

    2024年02月09日
    浏览(53)
  • 常见前端基础面试题(HTML,CSS,JS)(三)

      类型转换可以分为两种, 隐性转换 和 显性转换 主要分为三大类:数值类型、字符串类型、布尔类型 三大类的原始类型值的转换规则我就不一一列举了 数值类型(引用类型转换) 字符串类型(引用类型转换) 类型 转换前 转换后 number 4 4 string \\\"1\\\" 1 string \\\"\\\" 0 boolean true 1 b

    2024年02月12日
    浏览(61)
  • 【前端基础篇】HTML5 + CSS3 入门知识

    万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文:W3C Recommendation) HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 简

    2024年02月09日
    浏览(78)
  • 【Web前端HTML+CSS基础——小米官网项目实战】

    小米官网是学习前端实战项目锻炼最多的一个项目,基本上就是学习完HTML和CSS之后就可以开始锻炼自己实战的能力,学习如何搭建自己一个完整的页面实战,对之后的学习打下很好的基础,在这个博客的代码中,我只是涉及到相关的HTML和CSS,图片路径可以自己改并且找一些

    2024年02月04日
    浏览(58)
  • 【前端】夯实基础 css/html/js 50个练手项目(持续更新)

    发现一个没有用前端框架的练手项目,很适合我这种纯后端开发夯实基础,内含50个mini project,学习一下,做做笔记。 项目地址:https://github.com/bradtraversy/50projects50days 效果预览 核心代码: 知识点总结: 响应式布局 flex: 5; 操作 classList 可以动态修改节点的 class 效果预览 核心

    2024年02月22日
    浏览(44)
  • 前端 | ( 十)HTML5简介及相关新增属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(58)
  • 前端 | (二)各种各样的常用标签 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包